第二種絕對(duì)定位positionabsolute 設(shè)置父盒子positionrelative相對(duì)定位， 三個(gè)子盒子positionabsolute， 左盒子left0， 右盒子right0 中間盒子left300pxright300px 第三種flex布局 父。

所謂“T”結(jié)構(gòu)布局，就是指網(wǎng)頁(yè)上邊和左邊相結(jié)合，頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條，左下方為主菜單，右面顯示內(nèi)容，這是網(wǎng)頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式在實(shí)際設(shè)計(jì)中還可以改變“T”結(jié)構(gòu)布局的形式如左右兩欄式布。

流動(dòng)布局流動(dòng)布局是瀏覽器默認(rèn)的布局方式他會(huì)按照你所寫(xiě)的標(biāo)簽特性，從上至下從左到右的方式進(jìn)行排列在HTML中我們按照標(biāo)簽的排列特性可以將它們分成三類(lèi)1行級(jí)元素不獨(dú)占一行，不能設(shè)置元素的高度寬度和底邊邊距。

DOCTYPE htmllthtml lang=quotzhcnquotlthead ltmeta charset=quotUTF8quot lttitlelttitle ltstyle type=quottextcssquot body，html margin 0 padding 0 height 100% color #fff。

在HTML開(kāi)發(fā)中，制作網(wǎng)站時(shí)首先需要考慮內(nèi)容是頁(yè)面內(nèi)容和頁(yè)面布局首頁(yè)是整個(gè)網(wǎng)站頁(yè)面最完整的內(nèi)容，將網(wǎng)站的每一欄內(nèi)容設(shè)置為一個(gè)，這樣的功能如果排版不當(dāng)，那么首頁(yè)就會(huì)出現(xiàn)混亂因此，主頁(yè)的布局是整個(gè)網(wǎng)站的首要任務(wù)，所以主頁(yè)的布局必須簡(jiǎn)。

布局就是以最合適瀏覽的方式將圖片和文字排放在頁(yè)面的不同位置不同的制作者會(huì)有不同的布局設(shè)計(jì)網(wǎng)頁(yè)布局有以下幾種常見(jiàn)結(jié)構(gòu) 1“同”字型結(jié)構(gòu)布局 所謂同字型就夠就是指頁(yè)面頂部為“網(wǎng)站標(biāo)志+廣告條+主菜單”或主菜單，下方左側(cè)。

3無(wú)論什么元素，一旦設(shè)置為是浮動(dòng)顯示，就擁有了完整的盒模型結(jié)構(gòu)，我們就可以使用外邊距，內(nèi)邊距，邊框，高和寬來(lái)控制的大小以及與其他對(duì)象之間的位置關(guān)系4浮動(dòng)是從網(wǎng)頁(yè)布局的角度來(lái)定義元素的顯示，而行內(nèi)和塊狀屬性。

1首先打開(kāi)Deamweaver8，新建一網(wǎng)頁(yè)文件，接著輸入以下導(dǎo)航菜單的內(nèi)容2此時(shí)對(duì)應(yīng)效果如圖3接下來(lái)準(zhǔn)備相關(guān)的導(dǎo)航按鈕圖片可以事先利用PS制作好4然后將以下CSS代碼加入到ltheadlthead之間5網(wǎng)頁(yè)此時(shí)的效果。

用兩個(gè)div，左邊div浮動(dòng)并包含ul層，右邊div浮動(dòng)包含img至于樣式，左右兩邊的div按照比例設(shè)置個(gè)百分比寬度，給個(gè)媒體查詢(xún)media當(dāng)小于一定程度，左右div寬度為100%ul中的li則設(shè)置寬度為50%，img設(shè)置100%就行了。

此外比較特殊的是彈性布局，彈性布局相對(duì)使用較少，需要根據(jù)項(xiàng)目的具體情況而定在網(wǎng)站開(kāi)發(fā)當(dāng)中，通常是需要結(jié)合多種布局去實(shí)現(xiàn)網(wǎng)頁(yè)布局的如果是在學(xué)習(xí)網(wǎng)頁(yè)布局的相關(guān)知識(shí)，可以弄本 HTML5布局之路 ，來(lái)輔助自己的學(xué)習(xí)。

剛才看錯(cuò)了 你這顏色選得，我辨色能力沒(méi)那么強(qiáng)左右布局的div兩個(gè)加一起的寬度不能大于父容器的寬度，要不然會(huì)出現(xiàn)換行的現(xiàn)象的div_aside float left width 20% height 100% backgroundcolor。

為什么每行都要獨(dú)立寫(xiě)一個(gè)css呢你每行都起相同的class名 ，統(tǒng)一寫(xiě)樣式就好了 ，至于左右布局的方法很多，浮動(dòng)，flex布局，都可以用。

這種情況應(yīng)該只能結(jié)合js來(lái)調(diào)整了吧分別獲取左右兩欄的高度，對(duì)比，得到最高的那欄，將低的一欄設(shè)定為高的那欄就好jsvar LH = documentgetElementById quotleftquot offsetHeightvar RH = documentgetElementById。

因此，做頁(yè)面布局，應(yīng)盡量減少使用固定值的布局方式下面介紹幾種頁(yè)元素居中的方法 1Div居中 11左右居中 在父窗口中設(shè)置textaligncenter，要注意的是，此方法只對(duì)內(nèi)聯(lián)元素起作用，所以要在居中的div中設(shè)置display。

三使用表格設(shè)計(jì)頁(yè)面布局 HTML中有多種安排頁(yè)面內(nèi)容設(shè)計(jì)頁(yè)面布局的方法，運(yùn)用表格就是方法之一如果將整個(gè)窗口或整個(gè)顯示的頁(yè)面定義為一個(gè)表格，但隱去表格線，則在每個(gè)單元格中可以安排不同的內(nèi)容文本或圖像甚至。

頁(yè)面布局是用HTML來(lái)實(shí)現(xiàn)的，CSS只是添加樣式，網(wǎng)站提倡的結(jié)構(gòu)和樣式相分離就是這個(gè)意思HTML實(shí)現(xiàn)的是骨架，css可以說(shuō)是實(shí)現(xiàn)了裝飾1用div來(lái)實(shí)現(xiàn)，css3之前常用2css3實(shí)現(xiàn)然后實(shí)現(xiàn)結(jié)構(gòu)的基礎(chǔ)上添加css樣式，希望對(duì)你有所。

在HTML中讓兩個(gè)div并排顯示，通常情況下有三種實(shí)現(xiàn)方式，包括1設(shè)置為行內(nèi)樣式，displayinlineblock 2設(shè)置float浮動(dòng) 3設(shè)置position定位屬性為absolute 以下為三種方式的具體實(shí)現(xiàn)代碼1設(shè)置每個(gè)div的展現(xiàn)屬性為。