網站建設

現在(zài)網站技術已經非常成熟了(le／liǎo)，基本上(shàng)90%的(de)網頁已經完全抛棄了(le／liǎo)table排版布局，但一(yī / yì ／yí)些新手使用div+css還可能存在(zài)這(zhè)樣那樣的(de)問題，我們以(yǐ)下介紹一(yī / yì ／yí)些div+css的(de)使用小方法。

第一(yī / yì ／yí)：網頁版塊水平居中

css中使用*{padding:0px;margin:0px;｝定義整體居中，然後在(zài)标簽的(de)屬性中使用 style="margin:auto;"。

第二：内容居中：設置标簽的(de)style屬性，text-align:left内容靠左對齊，text-align:right右對齊，text-align:center居中對齊。

第三：設置邊框需要(yào / yāo)注意

一(yī / yì ／yí)般在(zài)設置一(yī / yì ／yí)個(gè)區域塊四邊線爲(wéi / wèi)1時(shí)，如果你的(de)div塊寬度設置的(de)是(shì)500,那你加上(shàng)border: 1px solid #CBDDE1;這(zhè)個(gè)寬度以(yǐ)後會根據浏覽器不(bù)同而(ér)出(chū)現兩種情況，一(yī / yì ／yí)種是(shì)還是(shì)500，另一(yī / yì ／yí)種是(shì)502，這(zhè)樣的(de)話就(jiù)可能造成你的(de)總體寬度不(bù)夠導緻版塊錯位，這(zhè)也(yě)是(shì)一(yī / yì ／yí)些網頁經常會在(zài)不(bù)同浏覽器顯示的(de)效果不(bù)同的(de)原因，正确的(de)做法是(shì)做一(yī / yì ／yí)個(gè)div寬度設置成500,然後在(zài)其中嵌套一(yī / yì ／yí)個(gè)div，把這(zhè)個(gè)加上(shàng)加上(shàng)border: 1px solid #CBDDE1;，代碼如下：

【div style="width:500px;border: 1px solid #CBDDE1;"】 内容  【/div】

改成

【div style="width:500px;"】

【div style="border: 1px solid #CBDDE1;"】

内容區

【/div】

【/div】

注：複制測試的(de)時(shí)候請把【】換成<和>

第四：div使用float:left浮動屬性會出(chū)現他(tā)的(de)父div内容塊大(dà)小不(bù)會自動改變，這(zhè)種情況隻要(yào / yāo)在(zài)使用float以(yǐ)後加上(shàng)clear:both就(jiù)可以(yǐ)解決。

第五：單行内容在(zài)div垂直居中，設置一(yī / yì ／yí)個(gè)div高度爲(wéi / wèi)50,那隻需要(yào / yāo)再設置一(yī / yì ／yí)個(gè)行高50就(jiù)可以(yǐ)，例： style="height:50px; line-height:50px;"

第六：設置整體的(de)布局浮動塊的(de)時(shí)候不(bù)同浏覽器也(yě)有可能會造成錯位，一(yī / yì ／yí)般在(zài)網頁上(shàng)需要(yào / yāo)劃分左右列的(de)時(shí)候可以(yǐ)在(zài)使用float:left屬性中加上(shàng)display:inline;。

.......

一(yī / yì ／yí)般使用div+css排版的(de)時(shí)候會出(chū)現各種問題，隻要(yào / yāo)制作人(rén)員心平去和(hé / huò)的(de)去思考總會解決的(de)，有解決不(bù)了(le／liǎo)的(de)可以(yǐ)聯系我們技術人(rén)員尋求幫助。