CSS網(wǎng)頁(yè)布局入門教程4:二列固定寬度
更新時(shí)間:2007年09月13日 22:26:15 作者:
有了一列固定寬度作為基礎(chǔ),二列固定寬度就非常簡(jiǎn)單,我們知道div用于對(duì)某一個(gè)區(qū)域的標(biāo)識(shí),而二列的布局,自然需要用到兩個(gè)div,XHTML代碼如下:
復(fù)制代碼 代碼如下:
<div id="left">左列</div>
<div id="right">右列</div>
新的代碼結(jié)構(gòu)中使用了兩個(gè)id,分別為left和right,表示兩個(gè)div的名稱,我們所需要做的是,首先為它們制定寬度,然后讓兩個(gè)div在水平行中并排顯示,從而形成二列式的布局,CSS代碼如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
left與right兩個(gè)div的代碼與前面類似,都使用相同寬高,本例中為了區(qū)分,左列和右列分別用了不同的邊框和背景色。而為了實(shí)現(xiàn)二列式布局,我們使用了一個(gè)全新的屬性——float。float屬性是CSS布局中非常重要的一個(gè)屬性,用于控制的浮動(dòng)布局方式,我們的大部分div布局基本上都通過(guò)float的控制來(lái)實(shí)現(xiàn)布局,float的可選參數(shù)為:none/left/right。
float使用none值時(shí)表示對(duì)象不浮動(dòng),而使用left時(shí),對(duì)象將向左浮動(dòng),例如本例中的div使用了float:left;之后,右側(cè)的內(nèi)容將流到當(dāng)前對(duì)象的右側(cè)。使用right時(shí),對(duì)象將向右浮動(dòng),如果將left的float值設(shè)置為right,將使得left對(duì)象浮動(dòng)到網(wǎng)頁(yè)右側(cè),而right對(duì)象則由于float:left;屬性浮動(dòng)到網(wǎng)頁(yè)左側(cè)。
這樣,在動(dòng)用了簡(jiǎn)單的float屬性之后,二列固定寬度的而已就能夠完整的顯示出來(lái)。
具體操作步驟如下:
新建頁(yè)面,插入div可以參考:CSS網(wǎng)頁(yè)布局入門教程1:一列固定寬度
當(dāng)插入一個(gè)div后,接著插入第二個(gè)時(shí),在插入div標(biāo)簽的插入會(huì)多出一個(gè)選項(xiàng):在選定內(nèi)容旁換行,這樣插入就把這個(gè)div標(biāo)簽插入到了id為left的div之內(nèi),這并不是本例所要的結(jié)果,所以我們選擇在標(biāo)簽之后,然后在右側(cè)激活的下拉列表中找到<div id="#left">,這樣我們插入的id為right的div就插入到了left的后邊。如下圖所示:

left的css設(shè)置如下:



right的設(shè)置只有與left的邊框和背景色不同而已,可以參照l(shuí)eft的自行設(shè)置。
相關(guān)文章
資料:Unicode 漢字內(nèi)碼對(duì)應(yīng)表
資料:Unicode 漢字內(nèi)碼對(duì)應(yīng)表...2007-03-03FIF互動(dòng)幫助手冊(cè)系列-HTML手冊(cè) flash版
FIF互動(dòng)幫助手冊(cè)系列-HTML手冊(cè) flash版...2007-03-03CSS網(wǎng)頁(yè)布局入門教程14:縱向下拉及多級(jí)彈出式菜單
CSS網(wǎng)頁(yè)布局入門教程14:縱向下拉及多級(jí)彈出式菜單...2007-09-09