div+css使用技巧（原创教程）

div+css是网页排版中不可或缺的，在这里总结了一下工作中遇到的一些这方面的问题，以及这些问题的解决方法，在这里一起与大家分享(*^__^*)
嘻嘻……

1，ul方面的问题：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部

的div撑大，导致页面变形，这就需要我们在写代码的时候不要忘记 ul{margin:0px; padding:0px;}

2,img方面的问题：这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题，关于图片

，这里有一个小小的问题，有时ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这

一点 img{ display：block}

3，overflow方面问题：有时我们会看到，一些公司的注册协议都是好长好长的，但又不能把页面拉的太

长，这就用到了overflow，我们可以把div的style里加上这个：overflow：auto

4，小窗口弹出的问题：当我们点击某个按钮，可能会看到一个小窗口弹出，而窗口其它的部分都变了灰

色，这是怎么实现的呢，其实很简单div+css就可以实现：

css部分：

.black_overlay

{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: black;

z-index: 1001;

-moz-opacity: 0.8;

opacity: .80;

filter: alpha(opacity=50);

}

.white_content

{

display: none;

position: absolute;

top:20%;

left: 30%;

width:outo;

background-color: white;

z-index: 1002;

overflow: auto;

}

.white_content2

{

display: none;

position: absolute;

top: 20%;

left: 18%;

width:896px;

background-color: white;

z-index: 1002;

overflow: auto;

text-align: center;

}

.qpshcom

{

background-color: #efefef;

color: #666666;

border-width: 1px;

border-color: #cccccc;

border-style: solid;

margin: 6px;

padding: 6px;

font-size: 14px;

line-height: 200%;

float: midden;

}

div部分：

打开按钮部分：onclick="document.getElementByIdx_x

('light').style.display='block';document.getElementByIdx_x('fade').style.display='block'"

关闭按钮部分：onclick="document.getElementByIdx_x

('light').style.display='none';document.getElementByIdx_x('fade').style.display='none'"

4，关于float的问题：有时候一些div会挤到页面的上方，把页面挤破掉，这里可能就是浮动引起的，这

时候我们就用到了这个：clear：both，很不错的解决方法，不妨一试。

5，height等于1px的div，在ie6中可能并不是1px，那怎么解决呢？不妨试一下：在这个div的style里加

上font-size：1px;这样就ok了。

6，下面再说一下id和class的问题：当一个div要在页面中多次使用时，不要用id，要用class，还有就是

要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不用

用id，id要留给程序员用，前台我们就用class好了。

7，还是img问题，页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的

优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取

得背景，这样其实也好，背景虽然大了点，但只需统一加载一次，就ok了，速度也不会太慢，可以好好学

习一下。

8，img的格式问题：最好的格式就是gif格式，即确保了背景透明，在ie6中又不会有阴影，有时gif图片

会有锯齿，这就需要我们保存成web格式，设置一下matter，matter的值用背景颜色的值越相近越好。（

当然有时迫不得已png的图片也会用到，这时就需要另外想办法了，前面我也曾提到过，大家不妨一看）

9，链接问题：

.link：link{}

.link：visited{}

.link：hover{}

.link：active{}

有一点，visited与hover的顺序一定不能倒换，否则ie6中会大大的问题。

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