前端设计第一步先用div分割不同模块，设置不同的背景色加以区分，大致的调整大小和位置，div是通用的方便操作的容器，再按照一定的顺序实现每个div,此过程中不断调整各个div的本身细节(如颜色大小是否漂浮)，相对位置，实现后去除div背景色调整整体色调、风格，最后检查细节作最后修改。
position属性可能的值：
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
常用就是absolute和relative，顾名思义相对和绝对,相对是相对于其正常的位置。
类似的有top:30px和margin-top:30px之分，加上margin是相对的，left，right,bottom同理
img元素的src属性值除了可以是地址还可以直接填base64编码，即把图片以base64码的形式存在代码段里，适合比较小的图片，有很多在线转base64码网站，直接选择图片就可以得到base64码再复制到src属性值里即可，相对于地址来说base64性能好且更安全，每一个图片相当于一次http请求，图片多了的话，耗性能比较严重，当然并不是把图片都转base64码性能就高了，通常把较小的访问频率高的图片转码。
关于文字的居中，水平居中较为方便，垂直居中可以通过调整line-height行高属性达到目的，意思就是文字在行内垂直方向是默认居中的，我们觉得不居中是因为我们觉得相对于其他模块不居中，比如div的height:64px，假如文字比较偏上，我们想让文字居中，可以调整行高line-height：64让行高等于div高，文字在行高的中间也就是div的中间了。
模块的居中不太方便，尤其是想让网页放大缩小时效果相同，可以用<center></center>把模块加在中间，但是好像和浏览器版本有关，通用的方法就是计算模块位置设置百分比模块本身高宽也设置比例。比如水平居中div模块
<div style="width:30%; left:40%">
<!--可以放些图片之类的-->
</div>假设div本身30%比较合适，左边设置留40%那么右边也剩下40%即居中效果，不受页面放缩影响。