我刚学div+CSS,为啥感觉在页面用CSS排版的时候总是很乱，无从下手

Posted 2023-05-06

CSS+DIV排版其实很容易。
如果凭空排版。你可能要先自己用纸画个版面草图。然后用div（不加内容，但是要显示边框）按照草图排版。直到自己满意之后再往div中添加内容。

如果有美工做好的效果图，那么按照效果图来排是最容易的。方法同上。

值得一提的是，排版一般都要求主层居中。而且兼容各个浏览器，关于这个方法，很多人都用
margin:0px 0px auto;
这是最通用的让主层居中的方法。但是浏览器兼容性差。在大多数浏览器中，这个样式是不起作用的。

最简单有效，而且兼容所有浏览器的方法就是把主层放在<center></center>里。然后主层里的其它层用float和margin排版。保证不跑偏。

以上是我从事CSS+DIV工作5年的心得。莫见笑。 参考技术A 我也是才学会没多久的，但感觉还行吧。我是这样做的
首先写好div 名字，然后从头部开始，先分好板块，
然后在从第一个板块开始写，有需要图片的时候在切图，避免太乱了
第一个板块写好后再继续写下一个，这样感觉就好度了 参考技术B 推荐你多看看书，《css商业网站布局之道》主要从布局这个角度全面、系统和深入地讲解CSS在标准网站布局之中的应用，因为你还未领略CSS的博大精深。用CSS轻易，难的是全部都用CSS。CSS的精髓是布局，而不是样式，布局是需要缜密的逻辑思维和系统设计的，而样式只需要简单地编写代码或复制即可。 参考技术C 先看看别人的，再想想自己的，就知道了 。而且不同的浏览器效果也不一样。最后选择一个良好的编辑器 参考技术D 你先拿别人的模版 重新做一遍 你会学的很多的 例如用class还是id 命名之类的

div+css是网页排版技巧_html/css_WEB-ITnose

div+css是网页排版技巧_html/css_WEB-ITnose

 

以下是兄弟连培训总结的一些技巧，留下备用，希望对看到的人有用~~

 

1，ul：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部的div撑大，导致页面变形，改成： ul{margin:0px; padding:0px;}

 

2、img：1、这里牵涉的不同浏览器的问题，ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这一点 img{ display：block}；2、页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取得背景。

 

3、最好的格式就是gif格式，即确保了背景透明，在ie6中又不会有阴影，有时gif图片会有锯齿，这就需要我们保存成web格式，设置一下matter，matter的值用背景颜色的值越相近越好www.lampbrother.net。

 

3，overflow：有时一些公司的注册协议都是很长，这就用到了overflow，可以把div的style里加上这个：overflow：auto

 

4，float：有时候一些div会挤到页面的上方，这里可能就是浮动引起的，可以加上clear：both。

 

5，div：height等于1px的div，在ie6中可能并不是1px，在这个div的style里加上font-size：1px;这样就ok了。

 

6，id和class：当一个样式在页面中多次使用时，不要用id，要用class，要使用js的时候，样式最好不要用id，因为id要留给js使用。

 

7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。有一点，visited与hover的顺序一定不能倒换，否则ie6中会大大的问题。

 

8，css编码问题：@charset "utf-8";注意这行代码，utf-8与g把gb2312是比较常用的两种编码方式。

 

欢迎投稿相关技术文章，可获得价值4899的视频教学及礼品发放，邮箱：zhaowei[email protected]。