前台页面CSS布局

今天就花了一整天才完成对一张psd文件的网页布局,这效率确实有点慢了。在此,总结几点以后让以后少走弯路,并且还有条理性、目的性去完成任务。

1. 首先拿到一张先分析它的结构,很有必要在纸上画画(并且对于div的margin、padding属性应该精确控制,再去进行div的布局)。对于切图这一方面应该以“资源尽量最小、图片”

2. 完成对页面布局构思后,在制作网页时应该把握先整体后部分的思想

3. 另外需要注意的一点是:margin 0px auto; 这一属性值应该是在html有引入W3C声明(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)  <html xmlns="http://www.w3.org/1999/xhtml"> 这是属性配置应该得加上。而且在html5网页中如果不加这些声明,可能有些标签的属性值不会生效。

4. ul li列表的基本配置:ul{list-style-type:none;200px;} li{width100px;float:left;} 另:需要左对齐时应在ul标签属性中加入 padding:0px; li列表需要横向排列时则需指定ul和li的width

5. 借助谷歌浏览器审查元素的功能,这可以大大提高自己的制作效率。

原文地址:https://www.cnblogs.com/xmaomao/p/2785681.html