十天學會Div+CSS第三天之【二列和三列布局】

來源:互聯網
上載者:User

第三天 二列和三列布局  今天學習《十天學會web標準(div+css)》的二列和三列布局,將涉及到以下內容和知識點

  • 二列自適應寬度
  • 二列固定寬度
  • 二列固定寬度置中
  • xhtml的區塊層級元素(div)和內嵌元素(span)
  • float屬性
  • 三列自適應寬度
  • 三列固定寬度
  • 三列固定寬度置中
  • IE6的3像素bug
 一、兩列自適應寬度

  下面以常見的左列固定右列自適應為例,因為div為塊狀元素,預設情況下佔據一行的空間,要想讓下面的div跑到右側,就需要做助css的浮動來實現。首先建立html代碼如下:

 

此處顯示 id "side" 的內容

此處顯示 id "main" 的內容

  按照的建立方法,把兩個div都建立出來,或手工寫出代碼。div建立完成後,開始建立css樣式表,代碼如下:

#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

先建立#side的樣式,為了便於查看,設定了背景色。注意,side的浮動設定為向左浮動;

然後建立#main樣式,注意這裡設定#main的左邊距為120px。預覽結果如下:

當我們拖動瀏覽器視窗變大變小時,#main的寬度也會跟著改變。這裡設定margin-left:120px;正好讓出#side佔去的120px寬度,如果這裡設定為122px的話,中間將出現2px的空隙,大家可以試一下。

此處顯示 id "side" 的內容此處顯示 id "main" 的內容

提示:可以先修改部分代碼後再運行二、兩列固定寬度

有了前面的基礎,兩列固定寬度就容易多了,只需要把#main的寬度由百分比改為固定值,如:

三、兩列固定寬度置中

兩列固定寬度置中,需要在兩列固定寬度的基礎上改進,在學一列固定寬度置中時,我們知道讓它置中的方法,所以這裡需要在這兩個div之外再加一個父div:

 

此處顯示 id "side" 的內容

此處顯示 id "main" 的內容

操作方法:在原始碼裡選中這兩個div的代碼後,點擊工具列上插入div按鈕,填寫id後確定,得到如上的代碼

下面就需要設定#content的樣式了,我們知道,#side的寬度為120px,#main寬度為350px,那麼#content的寬度應該為這兩者之和,然後設定#content置中,那麼整體就置中了:

此處顯示 id "side" 的內容此處顯示 id "main" 的內容

提示:可以先修改部分代碼後再運行四、xhtml的區塊層級元素(div)和內嵌元素(span)

區塊層級元素:就是一個方塊,像段落一樣,預設佔據一行出現;

內嵌元素:又叫行內元素,顧名思義,只能放在行內,就像一個單詞,不會造成前後換行,起輔助作用。

一般的區塊層級元素諸如段落

、標題

...、列 表,
  1. 、表格、表單、DIV

    和BODY等元素。而內嵌元素 則如: 表單元素、超級連結、映像、
    ........ 塊級無素的顯著特點是:每個區塊層級元素都是從一個新行開始顯示,而且其後的無素也需另起一行進行顯示。

    從的例子可以看出,區塊層級元素預設佔據一行,相當於在它之前和之後各插入了一個換行;而內嵌元素span沒對顯示效果造成任何影響,事實也是如此;em只是讓字型變成了斜體,也沒有單獨佔據一行。這就是區塊層級元素和內嵌元素,正因為有了這些元素,才使我們的網頁變得豐富多彩。

    如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設配置模式,把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是說,可以用css的display:inline將區塊層級元素改變為內嵌元素,也可以用 display:block將內嵌元素改變為塊元素。

    五、float屬性

    回到我們的例子當中,理解了區塊層級元素和內嵌元素,對理解浮動就容易多了。float是個重點,希望大家都能理解。上例中用float讓元素向左浮動,在 CSS 中,任何元素都可以浮動。浮動元素會產生一個塊級框,而不論它本身是何種元素;且要指明一個寬度,否則它會儘可能地窄;另外當可供浮動的空間小於浮動元素時,它會跑到下一行,直到擁有足夠放下它的空間。

    想必大家都用過word排過版,當中有個圖文混排功能,如:

    這個功能非常類似於css中的浮動,下面我們用css來實現這一功能:

     

    標準之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標準,DIV+CSS布局入門教程,網頁布局執行個體,css布局執行個體,div+css模板,div+css執行個體解析,網站重構,網頁代碼,水晶表徵圖,幻燈廣告圖片.教程適合初學者循序漸進學習!

    建立完以上代碼後,在瀏覽器中預覽會顯示如下結果:

    下面用css讓side浮動,再看看效果

    body { font-size:18px; line-height:200%; }
    #side { float:left;}

    大家看看,是不是和word的效果已經很像相了,但這裡的文字和圖片右側貼的很近,怎麼辦呢?剛才已經說了,當元素浮動過之後,需要指定一個寬度,否則它會儘可能窄。那麼把side的寬度設定為大於圖片的寬度,它們中間應該就有空隙了。圖片的寬度是192px,設定side為202px,中間將會有 10px的空隙了。

    body { font-size:18px; line-height:200%; }
    #side { float:left; width:202px;}

    細心的朋友已經發現,上例中#main的div還定義了margin-left:120px;而這裡沒有定義,但它多出的文字卻跑到了圖片 (#side)的下方,是不是設定margin-left:後,它就不會跑到#side的本文呢?如果你能想到這一點,你的確是太聰明了,事實確實是這樣,在css樣式表中加上下面一行

    #main { margin-left:202px;}

    這就是如何應用浮動實現兩列布局的原理。那麼三列呢?

    六、三列自適應寬度

    三列自適應寬度,一般常用的結構是左列和右列固定,中間列根據瀏覽器寬度自適應。下面在二列自適應寬度基礎上修改一下

     

    此處顯示 id "side" 的內容

    此處顯示 id "side1" 的內容

    此處顯示 id "main" 的內容

    增加以下css樣式:

    #side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

    把原來#main樣式的width:70%去掉,然後設定左右外邊距各120px,讓出左右列的寬度

    #main { background: #99FFFF; height: 300px; margin:0 120px; }

    預覽一下效果如下:

    也許預覽出來的效果和我的不一樣,別急,還有一項設定,預設body是有外邊距的,所以這裡還得設定body的外邊距為0;點擊css面板上的建立按鈕,然後在建立面板中選擇:標籤(重定義標籤外觀),然後選擇body,設定body的邊界為0即可。

    此處顯示 id "side" 的內容此處顯示 id "side1" 的內容此處顯示 id "main" 的內容

    提示:可以先修改部分代碼後再運行七、三列固定寬度

    三列固定寬度可以在三列自適應基礎上添加一個父div,並設定這個div的寬度即可,如下,添加一個id為content的父容器。

    在原始碼裡選中這三個div,然後點擊工具列上的“插入div標籤”按鈕,這時彈出的視窗插入項會預設為:在選定的內容旁換行,輸入id為content,然後給這個div定義個寬度

    三列固定寬度出來了,要想實現三列固定寬度置中就更方便了,只需設定#content {margin:0 auto;}即可

    此處顯示 id "side" 的內容此處顯示 id "side1" 的內容此處顯示 id "main" 的內容

    提示:可以先修改部分代碼後再運行八、IE6的3像素bug

    3像素bug是IE6的一個著名的bug,當浮動元素與非浮動元素相鄰時,這個3像素的Bug就會出現。看下面這個左列固定,右列液態的例子,css代碼如下:

    body { margin:0;}
    #side { float: left; background:#99FF99; height: 300px; width: 120px;}
    #main { background: #99FFFF; height: 300px;}

    html代碼如下:

     

    此處顯示 id "side" 的內容

    此處顯示 id "main" 的內容

    下面看看IE6和IE7中的顯示效果:

    從中明顯看出,IE6會在兩個div中間加上3px的空隙,那麼要解決這個問題,請在#side上加上_margin-right:-3px;記住,前邊加上一底線,這樣這個樣式專門針對IE6生效。IE7和FF下還會正常顯示。

    body { margin:0;}
    #side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
    #main { background: #99FFFF; height: 300px; }

    看看,是不是問題已經解決了。但它不能通過W3C驗證。當兩列固定寬度時,最好把#main也固定寬度且向右浮動,這樣就可以避免IE6的3像素bug了。

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。