当前位置: 模板下载 > 学习教程 > 网页设计 > DIV+CSS教程 > 详细信息

div+css网页设计布局制作技巧七点个人总结

时间:2012-05-03

做网页这行已经有5年历史了,也从菜鸟变成了中年的鸟,还没到老鸟,不过,经验还是有一些些的,今天下大雨,空闲下来,整理了一些东西,一点点的发布出来吧,先弄了一个几点的小结,是关于DIV+CSS网页设计制作页面布局的一些常规思路与技巧,开始吧~~

1、div:height等于1px的div,在ie6中可能并不是1px,在这个div的style里加上font-size:1px;这样就ok了。
2、ul:默认的ul的margin和padding不是0,如果在导航中用到了左浮动的li,往往会把外部的div撑大,导致页面变形,改成: ul{margin:0px; padding:0px;}3、float:有时候一些div会挤到页面的上方,这里可能就是浮动引起的,可以加上clear:both。
4、img:
①这里牵涉的不同浏览器的问题,ie6里显示的图片height总是要大于准确值,这里就需要我们记住下面这一点 img{ display:block};
②页面中最好不要用大块背景,能平铺的要平铺,否则加载起来会很慢,也不利于以后的优化和扩展,当然也有些大的网站,现在都尽量把背景统一放到一张图片上,用background-postion来取得背景。
③最好的格式就是gif格式,即确保了背景透明,在ie6中又不会有阴影,有时gif图片会有锯齿,这就需要我们保存成web格式,设置一下matter,matter的值用背景颜色的值越相近越好。
5、overflow:有时一些公司的注册协议都是很长,这就用到了overflow,可以把div的style里加上这个:overflow:auto
6、link:.link:link{}、.link:visited{}、.link:hover{}、.link:active{}。有一点,visited与hover的顺序一定不能倒换,否则ie6中会大大的问题。
7、id和class:当一个样式在页面中多次使用时,不要用id,要用class,要使用js的时候,样式最好不要用id,因为id要留给js使用。

以上的7点是个人总结的一些网页设计的布局经验,希望能帮助到菜鸟网页设计师

文章来源 http://www.drame.cn  佳木中国网页设计教程栏目http://www.drame.cn/jc/wysj/