時間：2023-03-01 16:30:01 | 來源：建站知識
時間：2023-03-01 16:30:01 來源：建站知識
div+css網(wǎng)頁布局教程(1)：float屬性介紹： 大家好，我是毛仔，從今天開始毛仔和大家一起學(xué)習(xí)div+css頁面布局。從2008年7月份開始，毛仔辭去了原來的工作，和ofseo老兄一起“網(wǎng)絡(luò)創(chuàng)業(yè)”。在那半年時間里學(xué)習(xí)了不少東西，包括div+css網(wǎng)頁設(shè)計，seo相關(guān)知識，單頁面做google adsense，玩熟了dedecms等各大cms和論壇系統(tǒng)……
通過幾個月的學(xué)習(xí)和摸索，毛仔也是有很多心得，也通過做單頁面賺了一點點上網(wǎng)費，本來很想把自己的學(xué)習(xí)心得也想給網(wǎng)絡(luò)菜鳥們分享分享，使得和我一樣的網(wǎng)絡(luò)菜鳥們能早點掌握一些搞網(wǎng)絡(luò)的基本技術(shù)，使大家的站都能快速發(fā)展起來。但是毛仔太懶，不喜歡寫東西，前段時間也忙，所以雖然有這份心思，但一直沒有動手，這段時間毛仔在找工作階段，所以閑余時間比較多，就想寫點東西和大家一起分享分享。其實，還有個原因，大家可能不相信，毛仔摸電腦摸了這么長時間了，做網(wǎng)站也起碼有100個了，但是打字速度超級慢，至今還不會盲打，更不會五筆這種高深的打字法，所以寫東西對我來說是一個浩大的工程。
好了，閑話先不說了，先開始我們的div+css教程。
關(guān)于這個教程，我主要是講div+css頁面布局，所以最基本的html和css基本知識我就不多講了，如果一點都不會的話可以自己去看看基本教程。
怎么樣用div+css來實現(xiàn)頁面布局：
把div看成一個容器，網(wǎng)頁上的內(nèi)容就包含在一個個的容器里面，我們可以像使用表格(table)一樣來使用div，能夠像table套table一樣來套div。對于熟悉使用table來布局的朋友，學(xué)習(xí)初期可以按照使用table的思路來使用div。
對于div的橫向排列各位朋友很容易理解，這里要說的div的豎向排列問題。
先來看看一個例子：
有個頁面左右兩欄，如果用傳統(tǒng)的table結(jié)構(gòu)來布局代碼如下：
<head>
<title>無標(biāo)題文檔</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>容器一</td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">容器二</td>
<td width="50%">容器三</td>
</tr>
</table>
</body>
</html>
那么這個效果用div+css怎么實現(xiàn)那，我們來看看代碼：
<head>
<title>無標(biāo)題文檔</title>
</head>
<style>
.div1{ width:100%}
.div2{ float:left; width:50%}
.div3{ float:right; width:50%}
</style>
<body>
<div class="div1">容器一</div>
<div class="div2">容器二</div>
<div class="div3">容器三</div>
</body>
</html>
大家看看簡單吧!這里用到了一個div+css里面最重要的一個css屬性float.
語法：
float : none | left | right
取值：
none :? 默認(rèn)值。對象不飄浮
left :? 文本流向?qū)ο蟮挠疫?/p>
right :? 文本流向?qū)ο蟮淖筮?/p>
說明：
該屬性的值指出了對象是否及如何浮動。
跟隨浮動對象的對象將移動到浮動對象的位置。浮動對象會向左或向右移動直到遇到邊框( border 、內(nèi)補(bǔ)丁( padding 、外補(bǔ)丁( margin 或者另一個塊對象( block-level )為止。
示例：
div { clear : left }
img { float: right }
所以我們要設(shè)置兩個并列的容器，只需要給這兩個容器設(shè)置float屬性就可以，左邊的容器設(shè)置float:left，右邊的容器設(shè)置float:rigeht。特別需要的注意的是兩個并列容器的總寬度不能超過父容器，否則可能顯示的不是并列的，而是有一個容器會顯示到某一個的下方去。
說到這里有朋友會問，兩個容器可以這樣排列，那么三個或更多并列容器怎么樣排列?因為float屬性只有三個值float : none | left | right ，也就是只能向左邊或右邊浮動，所以要設(shè)置多個并列容器完全可以借鑒套table一樣的思路。我們可以先設(shè)置兩個并列的大容器，然后再在個個大容器里面再套兩個并列小容器，以此類推，只要你想要，可以設(shè)置n個并列的容器。
我們來看下面的例子：
簡略代碼如下：
<head>
<title>無標(biāo)題文檔</title>
</head>
<style>
.div1{ width:100%}
.div2{ float:left; width:50%}
.div3{ float:right; width:50%}
.div4{ float:left; width:50%}
.div5{ float:right; width:50%}
</style>
<body> <div class="div1">容器一</div>
<div class="div2">
<div class="div4">容器四</div>
<div class="div5">容器五</div>
</div>
<div class="div3">容器三</div>
</body>
</html>
大家可以看到用div和table的思路有很多相似之處，但是代碼卻簡潔的多，并且實際中頁面加載速度比table結(jié)構(gòu)要快的多。
好，第一講就到這里，請繼續(xù)關(guān)注下一講。
作者：毛仔
來源：
原創(chuàng)文章，轉(zhuǎn)載請保留出處。
關(guān)鍵詞：屬性,教程,布局
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
在線咨詢