隨著WEB2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及,國(guó)內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法。但是在使用div+css網(wǎng)站頁(yè)面布局時(shí)會(huì)遇到一些問題,現(xiàn)在長(zhǎng)沙做網(wǎng)站依照自己多年的工作經(jīng)驗(yàn)總結(jié)了如下在使用div+css需要注意的地方。
1、ul:默認(rèn)的ul的margin和padding不是0,如果在導(dǎo)航中用到了左浮動(dòng)的li,往往會(huì)把外部的div撐大,導(dǎo)致頁(yè)面變形,改成: ul{margin:0px; padding:0px;}
2、img:
①這里牽涉的不同瀏覽器的問題,ie6里顯示的圖片height總是要大于準(zhǔn)確值,這里就需要我們記住下面這一點(diǎn) img{ display:block};
?、陧?yè)面中最好不要用大塊背景,能平鋪的要平鋪,否則加載起來會(huì)很慢,也不利于以后的優(yōu)化和擴(kuò)展,當(dāng)然也有些大的網(wǎng)站,現(xiàn)在都盡量把背景統(tǒng)一放到一張圖片上,用background-postion來取得背景。
③最好的格式就是gif格式,即確保了背景透明,在ie6中又不會(huì)有陰影,有時(shí)gif圖片會(huì)有鋸齒,這就需要我們保存成web格式,設(shè)置一下matter,matter的值用背景顏色的值越相近越好。
3、overflow:有時(shí)一些公司的注冊(cè)協(xié)議都是很長(zhǎng),這就用到了overflow,可以把div的style里加上這個(gè):overflow:auto
4、float:有時(shí)候一些div會(huì)擠到頁(yè)面的上方,這里可能就是浮動(dòng)引起的,可以加上clear:both。
5、div:height等于1px的div,在ie6中可能并不是1px,在這個(gè)div的style里加上font-size:1px;這樣就ok了。
6、id和class:當(dāng)一個(gè)樣式在頁(yè)面中多次使用時(shí),不要用id,要用class,要使用js的時(shí)候,樣式最好不要用id,因?yàn)閕d要留給js使用。
7,link:.link:link{}、.link:visited{}、.link:hover{}、.link:active{}。有一點(diǎn),visited與hover的順序一定不能倒換,否則ie6中會(huì)大大的問題。
從事頁(yè)面重構(gòu)工作,從局部細(xì)節(jié)到頁(yè)面的整合,然后再看整體系統(tǒng)的結(jié)構(gòu)。在各個(gè)步驟,都有不同的處理技巧和重構(gòu)的思想方式。原創(chuàng)總結(jié)了自己犯的一些錯(cuò)誤,和細(xì)節(jié)處理的問題,以便讓您更靈活的掌握這門技術(shù),提高制作效率和可用性。