css 浮動(float)頁面布局(下)
css學習網(wǎng) 發(fā)布時間：2010-01-07 01:51:21 作者：佚名 
我要評論
我要評論我們接著上節(jié)課，繼續(xù)學習，我把頁面整體效果發(fā)出來，方便大家學習
【第七步 內(nèi)容左側(cè)板塊(ContentL)布局】
我們分析一下他的結(jié)構(gòu)，主要包括標題和文章內(nèi)容兩塊，并且標題和內(nèi)容之間有一條虛線，而第二篇文章的內(nèi)容部分是圖片和文字相結(jié)合且文字環(huán)繞圖片。
好~！既然搞清楚結(jié)構(gòu)了，后面我們布局就容易了
我打算標題用<h1>標簽，為什么這么用呢，原因如下
第一:<h1>標簽本身字體就是加粗的這樣CSS里面就不用再定義字體粗細
第二:如果標題用<h1>的話，搜索引擎會首先抓取<h1>里面的內(nèi)容，然后提取關(guān)鍵詞，這樣別人在搜索引擎中輸入關(guān)鍵詞，會更容易找到你的網(wǎng)站喲~然后流量就唰唰滴~^_^
對于文章內(nèi)容，我們就放到<p></p>中就OK了，相應的代碼如下：
HTML代碼：
<div id="ContentL">
<h1>CSS學習互動社區(qū)歡迎您！</h1>
<p>我們是一群熱愛頁面前端技術(shù)并熱衷于推廣W3C標準的熱心好友，如果您想學或者正在學DIV+CSS布局頁面，加入我們！您會很快馴服并駕馭這匹烈馬！雖然我們的論壇正在起步，但是這里的每個人都很熱愛頁面前端技術(shù)并熱衷于推廣W3C標準在中國的運用，只要你有問題就可以問，一定會有人幫你解答！我們可能不是高手，但是我們都是很樂于幫助，樂于鉆研。我們都很熱心！</p>
</div>
CSS代碼：
#Content #ContentL h1{
height:40px;
line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框為寬度1像素的虛線*/
margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p保持10像素的距離*/
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*這句話的目的就是為了讓文章第一行縮進兩個漢字，記住這句話就OK了*/
}
到這里我們第一篇文章已經(jīng)布局完畢，下面布局一下第二篇文章，估計大家早就注意到了，兩篇文章唯一區(qū)別就是第二篇文章的內(nèi)容的左側(cè)有一張圖片，哈哈，這就好辦了，把第一篇文章的代碼復制過來，替換標題和文章內(nèi)容，然后再文章內(nèi)容里面插入一張圖片就OK了，代碼如下：
HTML代碼：
<h1>跟KwooJan學習DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" _fcksavedurl=""Images/1.gif"" />群上很多朋友在剛接觸DIV+CSS的時候，很迷茫，不知道從何學起，看網(wǎng)上的教程吧，理論性的東西太多，越看越糊涂，再說時間上也不允許，也沒有那個耐心，其實KwooJan也不喜歡看這種視頻教程，很枯燥，很乏味，即使耐著性子看完收獲也不大，實用性不大，群上的一些朋友告訴我，他們學習DIV+CSS沒有思路，不知道怎么去學，如何去學，希望KwooJan能帶著他們一步一步走，從今天開始我將寫個教程，打算以例子為主，幫主大家更輕松的駕馭DIV+CSS。好了，在這里我必須要給大家糾正一個錯誤，我們平時說的DIV+CSS其實是一種錯誤的說法，是中國人自己發(fā)明的，并不準確，不能夠?qū)⑺^的頁面布局思想說的很確切，其實應該說XHTML+CSS才對。</p>
但是如果我們預覽效果的話，確是這樣子的
不但圖片沒有靠左邊，而且文字的上方還有一大片空白，應該怎么做呢？很容易，只要我們給圖片左側(cè)浮動(float:left;)就可以了,CSS代碼如下：
#Content #ContentL p img{
float:left;
}
效果如下，很接近了吧，只不過圖片的左側(cè)和文字靠的太接近了
這個很好解決，設(shè)置圖片的右外邊距(margin-right)嘛~,CSS代碼如下：
#Content #ContentL p img{
float:left;
margin-right:10px;
}
這下效果一樣了吧~！~！~！
OK！到這里ContentL板塊布局搞定！
【第八步 內(nèi)容右側(cè)板塊(ContentR)布局】
有了ContentL板塊布局的經(jīng)驗，右側(cè)就會很容易，標題“加入我們！”當然還是用<h1>標簽嘍,好~！開工！
標題區(qū)域代碼如下
HTML代碼：
<h1>加入我們！</h1>
CSS代碼：
#Content #ContentR h1{
height:40px;
line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框為寬度1像素的虛線*/
margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p保持10像素的距離*/
}
而內(nèi)容的第一句“CSS學習互動社區(qū)QQ群：”的代碼如下
HTML代碼：
<strong>CSS學習互動社區(qū)QQ群：</strong>
CSS代碼：
#Content #ContentR strong{
display:block;/*只有把strong標簽，轉(zhuǎn)化成塊狀元素，margin-bottom:5px;才會起作用，才能使<strong>與下面的元素維持一定距離*/
font-size:12px;
color:#333;
margin-bottom:5px;
}
好~！第一行搞定！
下面的兩行紅色的QQ群信息怎么做？其實這個有很多辦法
方法一：ul、li或者dl、dt、dd來布局
方法二：表格(Table)來布局
方法三：用單純的標簽來布局比如<p>、<span>、<div>等標簽
其實在這里，我最推薦第二種方法，可能大家看到這里挺想不透的，或者覺著用Table很丟人，好似沒有什么技術(shù)含量似的，其實這時候如果你不用Table，反而認為你的技術(shù)含量低，自己給自己找麻煩，為什么這么說呢
首先你必須知道DIV和Table的誕生目的不一樣，DIV的誕生就是用來布局頁面，而Table的誕生就是為了放數(shù)據(jù)，大家看KwooJan所有寫的代碼，只有布局頁面大板塊的時候才用，還記得上節(jié)課一開始布局頁面板塊的時候代碼么
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
整個頁面就這5個DIV，其他地方一般不用，因為DIV的使命就是布局頁面！
大家經(jīng)常會進入一個誤區(qū)，會認為在Web2.0時代，只要頁面中用了Table就是沒有技術(shù)含量，就是丟人，要是頁面中沒有一個table，所有元素全部用DIV做，那就是牛人！大家注意了，要是某人對你說，我的整個網(wǎng)站沒有應用一個Table，這時候你就可以認為這個人做頁面沒有什么技術(shù)含量，并且CSS代碼相當龐雜，根本不能算是一個高手，頂多是一個DIV的狂熱分子，做的頁面也能說是標準，很多用Table就可以簡簡單單實現(xiàn)的效果，非要用DIV去實現(xiàn)，不僅使CSS文件相當?shù)挠纺[，而且使頁面加載速度變慢。
所以在這里KwooJan提醒大家，一定一定要走出這個誤區(qū)！
好了說了這么多，這塊的代碼如下：
HTML代碼：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="36%" height="20">1群：5505810</td>
<td width="64%">2群：87951377</td>
</tr>
<tr>
<td height="20">3群：73513641</td>
<td>4群：72263578</td>
</tr>
</table>
CSS代碼：
#Content #ContentR table{
font-size:12px;
color:#900;
}
最后一句話就更簡單了，代碼如下
HTML代碼：
<span>希望有強烈進取精神和互助精神的朋友請加入！一塊探討一塊交流一塊學習！</span>
CSS代碼：
#Content #ContentR span{
font-size:12px;
}
至此我們每個版塊均以布局完畢，但是卻有兩點瑕疵：
1）IE6和FF中有一點卻顯示的卻不一樣，底部版權(quán)在FF中卻跑到了的右側(cè)ContentR的下面，如圖：
1）IE6和FF中有一點卻顯示的卻不一樣，底部版權(quán)在FF中卻跑到了的右側(cè)ContentR的下面，如圖：
產(chǎn)生原因：是因為id為Content的div，沒有自動適應里面ContentL的高度
解決方法：最簡便的方法是設(shè)置Content的CSS屬性overflow:hidden;
怎么樣問題解決了吧~
2）因為ContentR的高度沒有ContentL的高度高，所以在ContentR的下面留有一塊空白，如圖：
解決方法：只需要把Content的背景顏色設(shè)置成和ContentR背景顏色一樣就OK了
這個問題也解決了吧~
最終效果
至此，整個頁面算是布局完成了，感覺怎么樣？有不懂的就回復帖子告訴我
順便說一下：最終代碼其實還可以進行精簡，這個算是給大家一個思考題了
下節(jié)課，我們將要講講布局網(wǎng)頁的第二種方法---定位
我們分析一下他的結(jié)構(gòu)，主要包括標題和文章內(nèi)容兩塊，并且標題和內(nèi)容之間有一條虛線，而第二篇文章的內(nèi)容部分是圖片和文字相結(jié)合且文字環(huán)繞圖片。
好~！既然搞清楚結(jié)構(gòu)了，后面我們布局就容易了
我打算標題用<h1>標簽，為什么這么用呢，原因如下
第一:<h1>標簽本身字體就是加粗的這樣CSS里面就不用再定義字體粗細
第二:如果標題用<h1>的話，搜索引擎會首先抓取<h1>里面的內(nèi)容，然后提取關(guān)鍵詞，這樣別人在搜索引擎中輸入關(guān)鍵詞，會更容易找到你的網(wǎng)站喲~然后流量就唰唰滴~^_^
對于文章內(nèi)容，我們就放到<p></p>中就OK了，相應的代碼如下：
HTML代碼：
復制代碼
代碼如下:<div id="ContentL">
<h1>CSS學習互動社區(qū)歡迎您！</h1>
<p>我們是一群熱愛頁面前端技術(shù)并熱衷于推廣W3C標準的熱心好友，如果您想學或者正在學DIV+CSS布局頁面，加入我們！您會很快馴服并駕馭這匹烈馬！雖然我們的論壇正在起步，但是這里的每個人都很熱愛頁面前端技術(shù)并熱衷于推廣W3C標準在中國的運用，只要你有問題就可以問，一定會有人幫你解答！我們可能不是高手，但是我們都是很樂于幫助，樂于鉆研。我們都很熱心！</p>
</div>
CSS代碼：
復制代碼
代碼如下:#Content #ContentL h1{
height:40px;
line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框為寬度1像素的虛線*/
margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p保持10像素的距離*/
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*這句話的目的就是為了讓文章第一行縮進兩個漢字，記住這句話就OK了*/
}
到這里我們第一篇文章已經(jīng)布局完畢，下面布局一下第二篇文章，估計大家早就注意到了，兩篇文章唯一區(qū)別就是第二篇文章的內(nèi)容的左側(cè)有一張圖片，哈哈，這就好辦了，把第一篇文章的代碼復制過來，替換標題和文章內(nèi)容，然后再文章內(nèi)容里面插入一張圖片就OK了，代碼如下：
HTML代碼：
復制代碼
代碼如下:<h1>跟KwooJan學習DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" _fcksavedurl=""Images/1.gif"" />群上很多朋友在剛接觸DIV+CSS的時候，很迷茫，不知道從何學起，看網(wǎng)上的教程吧，理論性的東西太多，越看越糊涂，再說時間上也不允許，也沒有那個耐心，其實KwooJan也不喜歡看這種視頻教程，很枯燥，很乏味，即使耐著性子看完收獲也不大，實用性不大，群上的一些朋友告訴我，他們學習DIV+CSS沒有思路，不知道怎么去學，如何去學，希望KwooJan能帶著他們一步一步走，從今天開始我將寫個教程，打算以例子為主，幫主大家更輕松的駕馭DIV+CSS。好了，在這里我必須要給大家糾正一個錯誤，我們平時說的DIV+CSS其實是一種錯誤的說法，是中國人自己發(fā)明的，并不準確，不能夠?qū)⑺^的頁面布局思想說的很確切，其實應該說XHTML+CSS才對。</p>
但是如果我們預覽效果的話，確是這樣子的
不但圖片沒有靠左邊，而且文字的上方還有一大片空白，應該怎么做呢？很容易，只要我們給圖片左側(cè)浮動(float:left;)就可以了,CSS代碼如下：
復制代碼
代碼如下:#Content #ContentL p img{
float:left;
}
效果如下，很接近了吧，只不過圖片的左側(cè)和文字靠的太接近了
這個很好解決，設(shè)置圖片的右外邊距(margin-right)嘛~,CSS代碼如下：
復制代碼
代碼如下:#Content #ContentL p img{
float:left;
margin-right:10px;
}
這下效果一樣了吧~！~！~！
OK！到這里ContentL板塊布局搞定！
【第八步 內(nèi)容右側(cè)板塊(ContentR)布局】
有了ContentL板塊布局的經(jīng)驗，右側(cè)就會很容易，標題“加入我們！”當然還是用<h1>標簽嘍,好~！開工！
標題區(qū)域代碼如下
HTML代碼：
復制代碼
代碼如下:<h1>加入我們！</h1>
CSS代碼：
復制代碼
代碼如下:#Content #ContentR h1{
height:40px;
line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框為寬度1像素的虛線*/
margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p保持10像素的距離*/
}
而內(nèi)容的第一句“CSS學習互動社區(qū)QQ群：”的代碼如下
HTML代碼：
復制代碼
代碼如下:<strong>CSS學習互動社區(qū)QQ群：</strong>
CSS代碼：
復制代碼
代碼如下:#Content #ContentR strong{
display:block;/*只有把strong標簽，轉(zhuǎn)化成塊狀元素，margin-bottom:5px;才會起作用，才能使<strong>與下面的元素維持一定距離*/
font-size:12px;
color:#333;
margin-bottom:5px;
}
好~！第一行搞定！
下面的兩行紅色的QQ群信息怎么做？其實這個有很多辦法
方法一：ul、li或者dl、dt、dd來布局
方法二：表格(Table)來布局
方法三：用單純的標簽來布局比如<p>、<span>、<div>等標簽
其實在這里，我最推薦第二種方法，可能大家看到這里挺想不透的，或者覺著用Table很丟人，好似沒有什么技術(shù)含量似的，其實這時候如果你不用Table，反而認為你的技術(shù)含量低，自己給自己找麻煩，為什么這么說呢
首先你必須知道DIV和Table的誕生目的不一樣，DIV的誕生就是用來布局頁面，而Table的誕生就是為了放數(shù)據(jù)，大家看KwooJan所有寫的代碼，只有布局頁面大板塊的時候才用，還記得上節(jié)課一開始布局頁面板塊的時候代碼么
復制代碼
代碼如下:<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
整個頁面就這5個DIV，其他地方一般不用，因為DIV的使命就是布局頁面！
大家經(jīng)常會進入一個誤區(qū)，會認為在Web2.0時代，只要頁面中用了Table就是沒有技術(shù)含量，就是丟人，要是頁面中沒有一個table，所有元素全部用DIV做，那就是牛人！大家注意了，要是某人對你說，我的整個網(wǎng)站沒有應用一個Table，這時候你就可以認為這個人做頁面沒有什么技術(shù)含量，并且CSS代碼相當龐雜，根本不能算是一個高手，頂多是一個DIV的狂熱分子，做的頁面也能說是標準，很多用Table就可以簡簡單單實現(xiàn)的效果，非要用DIV去實現(xiàn)，不僅使CSS文件相當?shù)挠纺[，而且使頁面加載速度變慢。
所以在這里KwooJan提醒大家，一定一定要走出這個誤區(qū)！
好了說了這么多，這塊的代碼如下：
HTML代碼：
復制代碼
代碼如下:<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="36%" height="20">1群：5505810</td>
<td width="64%">2群：87951377</td>
</tr>
<tr>
<td height="20">3群：73513641</td>
<td>4群：72263578</td>
</tr>
</table>
CSS代碼：
復制代碼
代碼如下:#Content #ContentR table{
font-size:12px;
color:#900;
}
最后一句話就更簡單了，代碼如下
HTML代碼：
復制代碼
代碼如下:<span>希望有強烈進取精神和互助精神的朋友請加入！一塊探討一塊交流一塊學習！</span>
CSS代碼：
復制代碼
代碼如下:#Content #ContentR span{
font-size:12px;
}
至此我們每個版塊均以布局完畢，但是卻有兩點瑕疵：
1）IE6和FF中有一點卻顯示的卻不一樣，底部版權(quán)在FF中卻跑到了的右側(cè)ContentR的下面，如圖：
1）IE6和FF中有一點卻顯示的卻不一樣，底部版權(quán)在FF中卻跑到了的右側(cè)ContentR的下面，如圖：
產(chǎn)生原因：是因為id為Content的div，沒有自動適應里面ContentL的高度
解決方法：最簡便的方法是設(shè)置Content的CSS屬性overflow:hidden;
怎么樣問題解決了吧~
2）因為ContentR的高度沒有ContentL的高度高，所以在ContentR的下面留有一塊空白，如圖：
解決方法：只需要把Content的背景顏色設(shè)置成和ContentR背景顏色一樣就OK了
這個問題也解決了吧~
最終效果
至此，整個頁面算是布局完成了，感覺怎么樣？有不懂的就回復帖子告訴我
順便說一下：最終代碼其實還可以進行精簡，這個算是給大家一個思考題了
下節(jié)課，我們將要講講布局網(wǎng)頁的第二種方法---定位
相關(guān)文章
- 這篇文章主要為大家詳細介紹了CSS3定位和浮動的概念，以及實例代碼講解CSS3定位和浮動的使用方法，感興趣的小伙伴們可以參考一下2016-05-10
css的核心內(nèi)容 標準流、盒子模型、浮動、定位等分析
css的核心內(nèi)容：標準流、盒子模型、浮動、定位（可以說不理解這些概念絕做不出合適的網(wǎng)頁）2009-12-21- W3School 站點上的所有頁面都采用了這種技術(shù)，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。2009-10-15
純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說 《詳解定位與定位應用
關(guān)于在html中浮動層是眾多網(wǎng)頁愛好者剛開始的難點，主要在于定位。如果你對CSS定位還不夠了解 可以接著往下看，運行里面的內(nèi)容即可。 【需求】： 將一個網(wǎng)頁分成頭、身2009-07-01CSS實現(xiàn)網(wǎng)頁分欄布局的方法：絕對定位和浮動
網(wǎng)頁制作Webjx文章簡介：在CSS中，實現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項（absolute 、static、relative和fixed）中的絕對定位（absolute positioning2009-04-02- 前四節(jié)的大練習大家做的怎么樣？有沒有難度，如果你覺著有難度沒有關(guān)系，這節(jié)課，我?guī)е蠹易鲆幌逻@個練習！2010-01-07
- DIV+CSS網(wǎng)頁布局常用到浮動方案，但浮動并不像表格那樣好用，很多時候會出問題。同時設(shè)計不夠良好的浮動布局，在不同的瀏覽器下會有不同的表現(xiàn)，可能設(shè)計時照著常用的瀏覽2009-10-28
- 在CSS中，實現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項(absolute 、static、relative和fixed)中的絕對定位(absolute positioning)，它可以將文檔中的某個元素2009-07-01
網(wǎng)頁布局 CSS簡單實現(xiàn)垂直居中-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文譯文： http://www.12sui.cn/blog/71.html 本人英語還沒過四級，所以不2008-10-17