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

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

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

作者:鵬飛網(wǎng)絡(luò)   時(shí)間:2014-7-5   分類:網(wǎng)站建設(shè)知識(shí)

現(xiàn)在網(wǎng)站技術(shù)已經(jīng)非常成熟了,基本上90%的網(wǎng)頁(yè)已經(jīng)完全拋棄了table排版布局,但一些新手使用div+css還可能存在這樣那樣的問(wèn)題,我們以下介紹一些div+css的使用小方法。

第一:網(wǎng)頁(yè)版塊水平居中
css中使用*{padding:0px;margin:0px;}定義整體居中,然后在標(biāo)簽的屬性中使用 style="margin:auto;"。

第二:內(nèi)容居中:設(shè)置標(biāo)簽的style屬性,text-align:left內(nèi)容靠左對(duì)齊,text-align:right右對(duì)齊,text-align:center居中對(duì)齊。

第三:設(shè)置邊框需要注意
一般在設(shè)置一個(gè)區(qū)域塊四邊線為1時(shí),如果你的div塊寬度設(shè)置的是500,那你加上border: 1px solid #CBDDE1;這個(gè)寬度以后會(huì)根據(jù)瀏覽器不同而出現(xiàn)兩種情況,一種是還是500,另一種是502,這樣的話就可能造成你的總體寬度不夠?qū)е掳鎵K錯(cuò)位,這也是一些網(wǎng)頁(yè)經(jīng)常會(huì)在不同瀏覽器顯示的效果不同的原因,正確的做法是做一個(gè)div寬度設(shè)置成500,然后在其中嵌套一個(gè)div,把這個(gè)加上加上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ù)制測(cè)試的時(shí)候請(qǐng)把【】換成<和>

第四:div使用float:left浮動(dòng)屬性會(huì)出現(xiàn)他的父div內(nèi)容塊大小不會(huì)自動(dòng)改變,這種情況只要在使用float以后加上clear:both就可以解決。

第五:?jiǎn)涡袃?nèi)容在div垂直居中,設(shè)置一個(gè)div高度為50,那只需要再設(shè)置一個(gè)行高50就可以,例: style="height:50px; line-height:50px;"

第六:設(shè)置整體的布局浮動(dòng)塊的時(shí)候不同瀏覽器也有可能會(huì)造成錯(cuò)位,一般在網(wǎng)頁(yè)上需要?jiǎng)澐肿笥伊械臅r(shí)候可以在使用float:left屬性中加上display:inline;。

.......

一般使用div+css排版的時(shí)候會(huì)出現(xiàn)各種問(wèn)題,只要制作人員心平去和的去思考總會(huì)解決的,有解決不了的可以聯(lián)系我們技術(shù)人員尋求幫助。