網(wǎng)站建設(shè)知識企業(yè)官網(wǎng)定制開發(fā),擁有網(wǎng)站建設(shè)制作的豐富經(jīng)驗,為企業(yè)提供高質(zhì)量的網(wǎng)站建設(shè)服務(wù)
作者:鵬飛網(wǎng)絡(luò) 時間:2014-7-5 分類:網(wǎng)站建設(shè)知識
現(xiàn)在網(wǎng)站技術(shù)已經(jīng)非常成熟了,基本上90%的網(wǎng)頁已經(jīng)完全拋棄了table排版布局,但一些新手使用div+css還可能存在這樣那樣的問題,我們以下介紹一些div+css的使用小方法。
第一:網(wǎng)頁版塊水平居中
css中使用*{padding:0px;margin:0px;}定義整體居中,然后在標(biāo)簽的屬性中使用 style="margin:auto;"。
第二:內(nèi)容居中:設(shè)置標(biāo)簽的style屬性,text-align:left內(nèi)容靠左對齊,text-align:right右對齊,text-align:center居中對齊。
第三:設(shè)置邊框需要注意
一般在設(shè)置一個區(qū)域塊四邊線為1時,如果你的div塊寬度設(shè)置的是500,那你加上border: 1px solid #CBDDE1;這個寬度以后會根據(jù)瀏覽器不同而出現(xiàn)兩種情況,一種是還是500,另一種是502,這樣的話就可能造成你的總體寬度不夠?qū)е掳鎵K錯位,這也是一些網(wǎng)頁經(jīng)常會在不同瀏覽器顯示的效果不同的原因,正確的做法是做一個div寬度設(shè)置成500,然后在其中嵌套一個div,把這個加上加上border: 1px solid #CBDDE1;,代碼如下:
【div style="width:500px;border: 1px solid #CBDDE1;"】 內(nèi)容 【/div】
改成
【div style="width:500px;"】
【div style="border: 1px solid #CBDDE1;"】
內(nèi)容區(qū)
【/div】
【/div】
注:復(fù)制測試的時候請把【】換成<和>
第四:div使用float:left浮動屬性會出現(xiàn)他的父div內(nèi)容塊大小不會自動改變,這種情況只要在使用float以后加上clear:both就可以解決。
第五:單行內(nèi)容在div垂直居中,設(shè)置一個div高度為50,那只需要再設(shè)置一個行高50就可以,例: style="height:50px; line-height:50px;"
第六:設(shè)置整體的布局浮動塊的時候不同瀏覽器也有可能會造成錯位,一般在網(wǎng)頁上需要劃分左右列的時候可以在使用float:left屬性中加上display:inline;。
.......
一般使用div+css排版的時候會出現(xiàn)各種問題,只要制作人員心平去和的去思考總會解決的,有解決不了的可以聯(lián)系我們技術(shù)人員尋求幫助。