網(wǎng)站建設(shè)知識企業(yè)官網(wǎng)定制開發(fā),擁有網(wǎng)站建設(shè)制作的豐富經(jīng)驗,為企業(yè)提供高質(zhì)量的網(wǎng)站建設(shè)服務(wù)

當前位置:首頁 > 網(wǎng)站建設(shè)知識 > 網(wǎng)頁使用div+css排版的一些小技巧
北京網(wǎng)站制作 網(wǎng)站建設(shè)公司 網(wǎng)站搭建 網(wǎng)站制作公司 企業(yè)建站 網(wǎng)站設(shè)計公司 網(wǎng)站開發(fā) 網(wǎng)站設(shè)計 北京網(wǎng)站設(shè)計 網(wǎng)頁設(shè)計公司 常見問題 高端網(wǎng)站建設(shè) 企業(yè)網(wǎng)站建設(shè) 品牌網(wǎng)站建設(shè) 網(wǎng)頁設(shè)計模板 網(wǎng)頁設(shè)計與制作 網(wǎng)站建設(shè)多少錢 網(wǎng)站設(shè)計與制作 網(wǎng)站建設(shè)費用 做網(wǎng)站 做網(wǎng)站公司 高端網(wǎng)站設(shè)計 網(wǎng)站建設(shè)方案 網(wǎng)站建設(shè)制作 北京網(wǎng)站建設(shè) 網(wǎng)站建設(shè)知識 網(wǎng)站建設(shè)優(yōu)化 網(wǎng)站建設(shè)空間 建設(shè)網(wǎng)站 制作網(wǎng)站 設(shè)計網(wǎng)站 開發(fā)網(wǎng)站 網(wǎng)站建設(shè)開發(fā) 網(wǎng)站開發(fā)公司 網(wǎng)頁制作 搭建網(wǎng)站 網(wǎng)站設(shè)計制作 網(wǎng)站設(shè)計費用 企業(yè)網(wǎng)站設(shè)計 公司網(wǎng)站建設(shè) 公司網(wǎng)站設(shè)計 公司網(wǎng)站制作 企業(yè)做網(wǎng)站 網(wǎng)站設(shè)計與開發(fā) 網(wǎng)站建設(shè)備案

網(wǎng)頁使用div+css排版的一些小技巧

作者:鵬飛網(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;}定義整體居中,然后在標簽的屬性中使用 style="margin:auto;"。

第二:內(nèi)容居中:設(shè)置標簽的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】

注:復制測試的時候請把【】換成<和>

第四: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ù)人員尋求幫助。