PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

div+css网页布局小结 【转】_html/css_WEB-ITnose

原创
2016-06-24 12:27:00 833浏览

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


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、使用清除浮动元素:停止书写诸如

,以及element:after {content:”.”;clear:both;visibility:hidden;height:0;display:block}这些都是hacks,不是最好的做法。应该如下:
#container {overflow:hidden}

#container {display:inline-block} #container {display:block}

为什么要用overflow:hidden,因为它具有神奇的魔力,具体解释看W3C的文档解释。



15、适当使用单位:不要使用px定义字体大小,使用px定义字体大小应该是table布局时代的一种旧习惯,与之对应的是像素字体在1024*768分辨率下看起来OK,但是时代是不断变化,现在1024分辨率的占有率不断下降,这也就意味着在1920的显示器上会觉得字很小。如何解决?用em单位定义,比如font-size:1.2em,意思就是该字体是默认字体的1.2倍,在火狐和IE下相当于16px,使用em的好处是,你可以通过改变body标签或者其他任意外部标签的字体大小来控制整站的字体大小,让字体具有弹性,而用px是无法做到的,除非你使用的浏览器的缩放功能。另外字体也不应该用诸如pt、cm等单位定义,避免使用百分比,1em和100%是等效的,但是后者占用了更多的空间而且有自己的怪癖。



16、Position:Float为主,Position为辅!!!如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。但是定位(position)有一个缺点,不会自适应内部元素的高度,KwooJan建议大家布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。

http://blog.sina.com.cn/s/blog_879890300100wnmb.html

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。