欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論