亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS網(wǎng)頁布局入門教程4:二列固定寬度

 更新時間:2007年09月13日 22:26:15   作者:  

有了一列固定寬度作為基礎(chǔ),二列固定寬度就非常簡單,我們知道div用于對某一個區(qū)域的標(biāo)識,而二列的布局,自然需要用到兩個div,XHTML代碼如下:

復(fù)制代碼 代碼如下:

<div id="left">左列</div> 
<div id="right">右列</div> 

新的代碼結(jié)構(gòu)中使用了兩個id,分別為left和right,表示兩個div的名稱,我們所需要做的是,首先為它們制定寬度,然后讓兩個div在水平行中并排顯示,從而形成二列式的布局,CSS代碼如下:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

left與right兩個div的代碼與前面類似,都使用相同寬高,本例中為了區(qū)分,左列和右列分別用了不同的邊框和背景色。而為了實現(xiàn)二列式布局,我們使用了一個全新的屬性——float。float屬性是CSS布局中非常重要的一個屬性,用于控制的浮動布局方式,我們的大部分div布局基本上都通過float的控制來實現(xiàn)布局,float的可選參數(shù)為:none/left/right。
float使用none值時表示對象不浮動,而使用left時,對象將向左浮動,例如本例中的div使用了float:left;之后,右側(cè)的內(nèi)容將流到當(dāng)前對象的右側(cè)。使用right時,對象將向右浮動,如果將left的float值設(shè)置為right,將使得left對象浮動到網(wǎng)頁右側(cè),而right對象則由于float:left;屬性浮動到網(wǎng)頁左側(cè)。
這樣,在動用了簡單的float屬性之后,二列固定寬度的而已就能夠完整的顯示出來。
具體操作步驟如下:
新建頁面,插入div可以參考:CSS網(wǎng)頁布局入門教程1:一列固定寬度
當(dāng)插入一個div后,接著插入第二個時,在插入div標(biāo)簽的插入會多出一個選項:在選定內(nèi)容旁換行,這樣插入就把這個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的邊框和背景色不同而已,可以參照left的自行設(shè)置。

相關(guān)文章

最新評論