2、img:
①这里牵涉的不同浏览器的问题,ie6里显示的图片height总是要大于准确值,这里就需要我们记住下面这一点 img{ display:block};
②页面中最好不要用大块背景,能平铺的要平铺,否则加载起来会很慢,也不利于以后的优化和扩展,当然也有些大的网站,现在都尽量把背景统一放到一张图片上,用background-postion来取得背景。
③最好的格式就是gif格式,即确保了背景透明,在ie6中又不会有阴影,有时gif图片会有锯齿,这就需要我们保存成web格式,设置一下matter,matter的值用背景颜色的值越相近越好。
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使用。ID在一个页面中出现的次数是一次,过多使用将失去样式的可重用性的特征,对于页面的可维护性也将大打折扣。
7、table与div: 现在网络上的大多数网页都是用table写的,可以说它是不标准的!table层层嵌套,缺点是很繁琐,修改起来很麻烦,用w3c网页标准来说,table真正的目的是用来显示数据的,而不是用来布局的。div布局的好处是它符合了w3c网页标准,div是真正用来布局网页的,以后维护时要是想改变布局的话修改起来很方便,现在sina,163等国内网站以及国外的大多数网站都是用div布局的,如果你真的想当一名网页设计师,建议你走div这条路,但前提是要把CSS学好,并且要学精!你可以设置body的CSS属性,或者设置Body中元素的CSS属性,例如P标记、Table标记、Div标记等,他们都有text-align属性,设置居中就可以了,另外需要注意的是,要让整个网页居中最好使用Table来定位内容的位置,这样操作起来最简单和最方便。
7、link:.link:link{}、.link:visited{}、.link:hover{}、.link:active{}。有一点,visited与hover的顺序一定不能倒换,否则ie6中会大大的问题。
8、网页布局的方法: 网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。尺寸选择:目前一般800X600的分辨率为约定俗成的浏览模式。
9、层叠样式表的应用:
在新的HTML4.0标准中,CSS(层叠样式表)被提出来,它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂,但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上,层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。 当然,日趋炙热的WEB标准(XHTML+CSS)开是强烈推崇内容和表现相分离,并为下一代数据交换XML做为过渡(即XHTML)。
10、DTD:如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD
11、float:1)元素务必指定width属性:很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。2)float元素不能指定margin和padding等属性:IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。3) float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。4)float元素的父元素不能指定clear属性:MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的着名的bug,倘若不知道就会走弯路。
12、默认样式: 某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
13、利用border属性确定出错元素的布局特性:使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
14、使用清除浮动元素:停止书写诸如
查看更多关于div+css网页布局小结【转】_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did102922