css 浮動(dòng)(float)頁(yè)面布局
發(fā)布時(shí)間：2010-01-07 01:40:17 作者：佚名 
我要評(píng)論
我要評(píng)論前四節(jié)的大練習(xí)大家做的怎么樣？有沒(méi)有難度，如果你覺(jué)著有難度沒(méi)有關(guān)系，這節(jié)課，我?guī)е蠹易鲆幌逻@個(gè)練習(xí)！
【第一步 整體布局與公共CSS定義】
我們先來(lái)分析一下這個(gè)頁(yè)面
頁(yè)面主要分5大塊，頂部的Logo、導(dǎo)航條Nav、Banner、Content、Footer，如下圖
這樣HTML就很容易寫(xiě)出來(lái)了
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
因?yàn)檫@5塊的寬度都是900像素，并且都是水平居中的，所以相應(yīng)CSS代碼如下
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*為什么寫(xiě)這段代碼沒(méi)有忘記吧，作用就是重置可能用到的標(biāo)簽，不明白的去看第四節(jié)的課程關(guān)鍵詞*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
【第二步 布局Logo欄】
首先我們需要把頁(yè)面上的logo給切割出來(lái)，其大小為173*46,名字為：logo.gif
一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了，代碼一般會(huì)這么寫(xiě)
<a href="#" id="logoLink"><img src="#" /></a>
不過(guò)KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達(dá)到上面說(shuō)的效果，并且HTML代碼就會(huì)更精簡(jiǎn)，少了<img...>，看看下面Logo欄的頁(yè)面代碼，紅色的為將logo.gif作為背景的鏈接
HTML代碼：
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
CSS代碼
#Logo{
height:80px;/*公共代碼中沒(méi)有定義高度，在這里定義*/
}
#logoLink{
display:block;/*將鏈接a轉(zhuǎn)化成塊狀元素，這樣才能顯示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，后面的margin-top:20px;兩個(gè)瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;/*設(shè)置a的頂部外邊距為20像素，這樣才能和瀏覽器頂部有段距離，才能和圖片中做的一樣*/
}
好到這里，頭部含有l(wèi)ogo的區(qū)域已經(jīng)寫(xiě)完，如果自己做不出來(lái)，就來(lái)下載源代碼
float1.rar
【第三步 布局導(dǎo)航欄Nav】
頁(yè)面上的導(dǎo)航欄和第四節(jié)講的幾乎是一樣的，并且更簡(jiǎn)單些，這里我就不再給大家一步一步做，不會(huì)做的就去看第四節(jié)，這里我就直接把代碼發(fā)出來(lái)供大家學(xué)習(xí)
HTML代碼：
<div id="Nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS代碼
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*轉(zhuǎn)化成塊狀元素，因鏈接是內(nèi)鏈元素，若想給它定義下面的屬性，必須將它轉(zhuǎn)化成塊狀元素，*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除鏈接樣式，默認(rèn)是有下劃線的，加上這句就沒(méi)有任何樣式，下劃線也沒(méi)有了*/
float:left;/*這句一定要加，不然在IE6中會(huì)出現(xiàn)，這種效果*/
}
#Nav ul li a:hover{background:#68acd3;}
float2.rar
【第四步 Banner布局】
這個(gè)就更簡(jiǎn)單了，有兩種方法
第一種：將圖片作為<div id="Banner"></div>背景
第二種：直接將圖片插入<div id="Banner"></div>之間，代碼：<div id="Banner"><img src="" /></div>
大家可以根據(jù)需求和實(shí)際情況選擇用哪一種，在這里我們用第一種
HTML代碼沒(méi)有什么變化，只需要在CSS里面定義一下就OK了
CSS代碼：
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
源代碼下載： float3.rar (73.79 KB)
怎么樣做到這里比較簡(jiǎn)單吧，好，接著來(lái)
【第五步 內(nèi)容Content板塊布局】
從圖片上我們看到，內(nèi)容板塊分為左右兩個(gè)區(qū)域，左邊ContentL寬度是600px，右邊ContentR寬度是300px，但是由于我們要將內(nèi)邊距設(shè)置成15px(這樣才會(huì)好看)，所以ContentL的寬度在CSS中就要設(shè)置成600-15*2=570px,而右側(cè)的ContentR則需要設(shè)置成300-15*2=270px；
HTML代碼：
<div id="Content">
<div id="ContentL">此處為左邊ContentL</div>
<div id="ContentR">此處為左邊ContentR</div>
</div>
CSS代碼:
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*為什么都要左側(cè)浮動(dòng)，如果不明白就去看第二節(jié)*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}
頁(yè)面效果：
內(nèi)容部分我們就先做到這里，最后我們?cè)俨季掷锩娴木唧w元素，下面接著來(lái)布局版權(quán)模塊(Footer)
【第六步 Footer布局】
這部分結(jié)構(gòu)比較簡(jiǎn)單，大家只需要知道怎么布局就OK了
HTML代碼：
<div id="Footer">
<p>版權(quán)歸CSS學(xué)習(xí)(www.cssxuexi.cn)所有</p>
<p>CSS交流QQ群:5505810/87951377/73513641/72263578</p>
</div>
CSS代碼：
#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
目前效果如下：
就這樣我們頁(yè)面的整體結(jié)構(gòu)基本出來(lái)了，剩下的工作就是內(nèi)容板塊內(nèi)部元素的具體布局了，我將在下節(jié)課接著講~
float4.rar
以上代碼打包下載
我們先來(lái)分析一下這個(gè)頁(yè)面
頁(yè)面主要分5大塊，頂部的Logo、導(dǎo)航條Nav、Banner、Content、Footer，如下圖
下載 (116.12 KB)
2009-6-1 09:22
這樣HTML就很容易寫(xiě)出來(lái)了
復(fù)制代碼
代碼如下:<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
因?yàn)檫@5塊的寬度都是900像素，并且都是水平居中的，所以相應(yīng)CSS代碼如下
復(fù)制代碼
代碼如下:body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*為什么寫(xiě)這段代碼沒(méi)有忘記吧，作用就是重置可能用到的標(biāo)簽，不明白的去看第四節(jié)的課程關(guān)鍵詞*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
【第二步 布局Logo欄】
首先我們需要把頁(yè)面上的logo給切割出來(lái)，其大小為173*46,名字為：logo.gif
一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了，代碼一般會(huì)這么寫(xiě)
<a href="#" id="logoLink"><img src="#" /></a>
不過(guò)KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達(dá)到上面說(shuō)的效果，并且HTML代碼就會(huì)更精簡(jiǎn)，少了<img...>，看看下面Logo欄的頁(yè)面代碼，紅色的為將logo.gif作為背景的鏈接
HTML代碼：
復(fù)制代碼
代碼如下:<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
CSS代碼
復(fù)制代碼
代碼如下:#Logo{
height:80px;/*公共代碼中沒(méi)有定義高度，在這里定義*/
}
#logoLink{
display:block;/*將鏈接a轉(zhuǎn)化成塊狀元素，這樣才能顯示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，后面的margin-top:20px;兩個(gè)瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;/*設(shè)置a的頂部外邊距為20像素，這樣才能和瀏覽器頂部有段距離，才能和圖片中做的一樣*/
}
好到這里，頭部含有l(wèi)ogo的區(qū)域已經(jīng)寫(xiě)完，如果自己做不出來(lái)，就來(lái)下載源代碼
float1.rar
【第三步 布局導(dǎo)航欄Nav】
頁(yè)面上的導(dǎo)航欄和第四節(jié)講的幾乎是一樣的，并且更簡(jiǎn)單些，這里我就不再給大家一步一步做，不會(huì)做的就去看第四節(jié)，這里我就直接把代碼發(fā)出來(lái)供大家學(xué)習(xí)
HTML代碼：
復(fù)制代碼
代碼如下:<div id="Nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS代碼
復(fù)制代碼
代碼如下:#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*轉(zhuǎn)化成塊狀元素，因鏈接是內(nèi)鏈元素，若想給它定義下面的屬性，必須將它轉(zhuǎn)化成塊狀元素，*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除鏈接樣式，默認(rèn)是有下劃線的，加上這句就沒(méi)有任何樣式，下劃線也沒(méi)有了*/
float:left;/*這句一定要加，不然在IE6中會(huì)出現(xiàn)，這種效果*/
}
#Nav ul li a:hover{background:#68acd3;}
float2.rar
【第四步 Banner布局】
這個(gè)就更簡(jiǎn)單了，有兩種方法
第一種：將圖片作為<div id="Banner"></div>背景
第二種：直接將圖片插入<div id="Banner"></div>之間，代碼：<div id="Banner"><img src="" /></div>
大家可以根據(jù)需求和實(shí)際情況選擇用哪一種，在這里我們用第一種
HTML代碼沒(méi)有什么變化，只需要在CSS里面定義一下就OK了
CSS代碼：
復(fù)制代碼
代碼如下:#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
源代碼下載： float3.rar (73.79 KB)
怎么樣做到這里比較簡(jiǎn)單吧，好，接著來(lái)
【第五步 內(nèi)容Content板塊布局】
從圖片上我們看到，內(nèi)容板塊分為左右兩個(gè)區(qū)域，左邊ContentL寬度是600px，右邊ContentR寬度是300px，但是由于我們要將內(nèi)邊距設(shè)置成15px(這樣才會(huì)好看)，所以ContentL的寬度在CSS中就要設(shè)置成600-15*2=570px,而右側(cè)的ContentR則需要設(shè)置成300-15*2=270px；
HTML代碼：
復(fù)制代碼
代碼如下:<div id="Content">
<div id="ContentL">此處為左邊ContentL</div>
<div id="ContentR">此處為左邊ContentR</div>
</div>
CSS代碼:
復(fù)制代碼
代碼如下:#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*為什么都要左側(cè)浮動(dòng)，如果不明白就去看第二節(jié)*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}
頁(yè)面效果：
內(nèi)容部分我們就先做到這里，最后我們?cè)俨季掷锩娴木唧w元素，下面接著來(lái)布局版權(quán)模塊(Footer)
【第六步 Footer布局】
這部分結(jié)構(gòu)比較簡(jiǎn)單，大家只需要知道怎么布局就OK了
HTML代碼：
復(fù)制代碼
代碼如下:<div id="Footer">
<p>版權(quán)歸CSS學(xué)習(xí)(www.cssxuexi.cn)所有</p>
<p>CSS交流QQ群:5505810/87951377/73513641/72263578</p>
</div>
CSS代碼：
復(fù)制代碼
代碼如下:#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
目前效果如下：
就這樣我們頁(yè)面的整體結(jié)構(gòu)基本出來(lái)了，剩下的工作就是內(nèi)容板塊內(nèi)部元素的具體布局了，我將在下節(jié)課接著講~
float4.rar
以上代碼打包下載
相關(guān)文章
- 這篇文章主要為大家詳細(xì)介紹了CSS3定位和浮動(dòng)的概念，以及實(shí)例代碼講解CSS3定位和浮動(dòng)的使用方法，感興趣的小伙伴們可以參考一下2016-05-10
css的核心內(nèi)容 標(biāo)準(zhǔn)流、盒子模型、浮動(dòng)、定位等分析
css的核心內(nèi)容：標(biāo)準(zhǔn)流、盒子模型、浮動(dòng)、定位（可以說(shuō)不理解這些概念絕做不出合適的網(wǎng)頁(yè)）2009-12-21css 相對(duì)定位 絕對(duì)定位 浮動(dòng) 分析
W3School 站點(diǎn)上的所有頁(yè)面都采用了這種技術(shù)，如果您打開(kāi)我們使用 CSS 文件，您會(huì)看到我們對(duì)頁(yè)腳的 div 進(jìn)行了清理，而頁(yè)腳上面的三個(gè) div 都向左浮動(dòng)。2009-10-15純CSS定位的固定垂直居中浮動(dòng)層代碼，附經(jīng)典解說(shuō) 《詳解定位與定位應(yīng)用
關(guān)于在html中浮動(dòng)層是眾多網(wǎng)頁(yè)愛(ài)好者剛開(kāi)始的難點(diǎn)，主要在于定位。如果你對(duì)CSS定位還不夠了解 可以接著往下看，運(yùn)行里面的內(nèi)容即可。 【需求】： 將一個(gè)網(wǎng)頁(yè)分成頭、身2009-07-01CSS實(shí)現(xiàn)網(wǎng)頁(yè)分欄布局的方法：絕對(duì)定位和浮動(dòng)
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：在CSS中，實(shí)現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項(xiàng)（absolute 、static、relative和fixed）中的絕對(duì)定位（absolute positioning2009-04-02css 浮動(dòng)(float)頁(yè)面布局(下)
我們接著上節(jié)課，繼續(xù)學(xué)習(xí)，我把頁(yè)面整體效果發(fā)出來(lái)，方便大家學(xué)習(xí)2010-01-07- DIV+CSS網(wǎng)頁(yè)布局常用到浮動(dòng)方案，但浮動(dòng)并不像表格那樣好用，很多時(shí)候會(huì)出問(wèn)題。同時(shí)設(shè)計(jì)不夠良好的浮動(dòng)布局，在不同的瀏覽器下會(huì)有不同的表現(xiàn)，可能設(shè)計(jì)時(shí)照著常用的瀏覽2009-10-28
- 在CSS中，實(shí)現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項(xiàng)(absolute 、static、relative和fixed)中的絕對(duì)定位(absolute positioning)，它可以將文檔中的某個(gè)元素2009-07-01
網(wǎng)頁(yè)布局 CSS簡(jiǎn)單實(shí)現(xiàn)垂直居中-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文譯文： http://www.12sui.cn/blog/71.html 本人英語(yǔ)還沒(méi)過(guò)四級(jí)，所以不2008-10-17