今天完成的事情

完成了任务三 魔镜介绍页

配置了nginx的http服务, 实现本地的域名访问.

上传到服务器,实现浏览器访问.

在手机和pc上访问魔镜介绍页

明天计划的事情

完成下一个实战任务

遇到的问题

图片不能居中的问题

错误写法

<img class="photo" src="" alt="" />

.photo {

position: absolute;

top: 11%;

margin: 0 auto;

}

正确写法

<img class="photo" src="" alt="" />

.photo {

position: absolute;  /* 生成绝对定位元素, 相对于static定位以外的第一个父元素进行定位 */

top: 11%;

margin: 0 auto;

}

别的方法

<img class="photo" src="" alt="" />

.photo {

position: relative; /* 生成绝对定位元素, 相对于浏览器窗口进行定位 */

top: 11%;

display: block; /* 将此元素显示为块级元素(img默认为内联元素) */

margin: 0 auto;

}

参考资料 : 让一个图片在div中居中（四种方法） 实现div里的img图片水平垂直居中

收获

学会了photoshop的基本操作

    切图 测量  切割 导出

了解了盒子模型的原理

    margin和padding的基本使用方法

    盒子实际宽高的计算方法

    width = margin-left + margin-right + border-left + border-right + padding-left + padding-right + content(width)

    height = margin-top + margin-bottom+ border-top + border-bottom + padding-top + padding-bottom + content(height) 

定位(position)

    position: absolute;

    position: relative;

了解了px em rem的概念和基本使用方法