欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 浮動(dòng)(float)頁(yè)面布局(下)

css學(xué)習(xí)網(wǎng)   發(fā)布時(shí)間：2010-01-07 01:51:21   作者：佚名   我要評(píng)論
我們接著上節(jié)課，繼續(xù)學(xué)習(xí)，我把頁(yè)面整體效果發(fā)出來(lái)，方便大家學(xué)習(xí)
【第七步 內(nèi)容左側(cè)板塊(ContentL)布局】
我們分析一下他的結(jié)構(gòu)，主要包括標(biāo)題和文章內(nèi)容兩塊，并且標(biāo)題和內(nèi)容之間有一條虛線，而第二篇文章的內(nèi)容部分是圖片和文字相結(jié)合且文字環(huán)繞圖片。
好~！既然搞清楚結(jié)構(gòu)了，后面我們布局就容易了
我打算標(biāo)題用<h1>標(biāo)簽，為什么這么用呢，原因如下


第一:<h1>標(biāo)簽本身字體就是加粗的這樣CSS里面就不用再定義字體粗細(xì)
第二:如果標(biāo)題用<h1>的話，搜索引擎會(huì)首先抓取<h1>里面的內(nèi)容，然后提取關(guān)鍵詞，這樣別人在搜索引擎中輸入關(guān)鍵詞，會(huì)更容易找到你的網(wǎng)站喲~然后流量就唰唰滴~^_^


對(duì)于文章內(nèi)容，我們就放到<p></p>中就OK了，相應(yīng)的代碼如下：


HTML代碼：

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

<div id="ContentL">
<h1>CSS學(xué)習(xí)互動(dòng)社區(qū)歡迎您！</h1>
<p>我們是一群熱愛頁(yè)面前端技術(shù)并熱衷于推廣W3C標(biāo)準(zhǔn)的熱心好友，如果您想學(xué)或者正在學(xué)DIV+CSS布局頁(yè)面，加入我們！您會(huì)很快馴服并駕馭這匹烈馬！雖然我們的論壇正在起步，但是這里的每個(gè)人都很熱愛頁(yè)面前端技術(shù)并熱衷于推廣W3C標(biāo)準(zhǔn)在中國(guó)的運(yùn)用，只要你有問(wèn)題就可以問(wèn)，一定會(huì)有人幫你解答！我們可能不是高手，但是我們都是很樂(lè)于幫助，樂(lè)于鉆研。我們都很熱心！</p>
</div>

CSS代碼：

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

#Content #ContentL h1{
height:40px;
line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框?yàn)閷挾?像素的虛線*/
margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p保持10像素的距離*/
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*這句話的目的就是為了讓文章第一行縮進(jìn)兩個(gè)漢字，記住這句話就OK了*/
}


到這里我們第一篇文章已經(jīng)布局完畢，下面布局一下第二篇文章，估計(jì)大家早就注意到了，兩篇文章唯一區(qū)別就是第二篇文章的內(nèi)容的左側(cè)有一張圖片，哈哈，這就好辦了，把第一篇文章的代碼復(fù)制過(guò)來(lái)，替換標(biāo)題和文章內(nèi)容，然后再文章內(nèi)容里面插入一張圖片就OK了，代碼如下：


HTML代碼：

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

<h1>跟KwooJan學(xué)習(xí)DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" _fcksavedurl=""Images/1.gif"" />群上很多朋友在剛接觸DIV+CSS的時(shí)候，很迷茫，不知道從何學(xué)起，看網(wǎng)上的教程吧，理論性的東西太多，越看越糊涂，再說(shuō)時(shí)間上也不允許，也沒(méi)有那個(gè)耐心，其實(shí)KwooJan也不喜歡看這種視頻教程，很枯燥，很乏味，即使耐著性子看完收獲也不大，實(shí)用性不大，群上的一些朋友告訴我，他們學(xué)習(xí)DIV+CSS沒(méi)有思路，不知道怎么去學(xué)，如何去學(xué)，希望KwooJan能帶著他們一步一步走，從今天開始我將寫個(gè)教程，打算以例子為主，幫主大家更輕松的駕馭DIV+CSS。好了，在這里我必須要給大家糾正一個(gè)錯(cuò)誤，我們平時(shí)說(shuō)的DIV+CSS其實(shí)是一種錯(cuò)誤的說(shuō)法，是中國(guó)人自己發(fā)明的，并不準(zhǔn)確，不能夠?qū)⑺^的頁(yè)面布局思想說(shuō)的很確切，其實(shí)應(yīng)該說(shuō)XHTML+CSS才對(duì)。</p>

但是如果我們預(yù)覽效果的話，確是這樣子的

不但圖片沒(méi)有靠左邊，而且文字的上方還有一大片空白，應(yīng)該怎么做呢？很容易，只要我們給圖片左側(cè)浮動(dòng)(float:left;)就可以了,CSS代碼如下：

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

#Content #ContentL p img{
float:left;
}

效果如下，很接近了吧，只不過(guò)圖片的左側(cè)和文字靠的太接近了

這個(gè)很好解決，設(shè)置圖片的右外邊距(margin-right)嘛~,CSS代碼如下：

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

#Content #ContentL p img{
float:left;
margin-right:10px;
}

這下效果一樣了吧~！~！~！
OK！到這里ContentL板塊布局搞定！
【第八步 內(nèi)容右側(cè)板塊(ContentR)布局】
有了ContentL板塊布局的經(jīng)驗(yàn)，右側(cè)就會(huì)很容易，標(biāo)題“加入我們！”當(dāng)然還是用<h1>標(biāo)簽嘍,好~！開工！
標(biāo)題區(qū)域代碼如下

HTML代碼：

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

<h1>加入我們！</h1>

CSS代碼：

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

#Content #ContentR h1{
height:40px;
line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框?yàn)閷挾?像素的虛線*/
margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p保持10像素的距離*/
}

而內(nèi)容的第一句“CSS學(xué)習(xí)互動(dòng)社區(qū)QQ群：”的代碼如下

HTML代碼：

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

<strong>CSS學(xué)習(xí)互動(dòng)社區(qū)QQ群：</strong>

CSS代碼：

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

#Content #ContentR strong{
display:block;/*只有把strong標(biāo)簽，轉(zhuǎn)化成塊狀元素，margin-bottom:5px;才會(huì)起作用，才能使<strong>與下面的元素維持一定距離*/
font-size:12px;
color:#333;
margin-bottom:5px;
}

好~！第一行搞定！
下面的兩行紅色的QQ群信息怎么做？其實(shí)這個(gè)有很多辦法

方法一：ul、li或者dl、dt、dd來(lái)布局
方法二：表格(Table)來(lái)布局
方法三：用單純的標(biāo)簽來(lái)布局比如<p>、<span>、<div>等標(biāo)簽
其實(shí)在這里，我最推薦第二種方法，可能大家看到這里挺想不透的，或者覺(jué)著用Table很丟人，好似沒(méi)有什么技術(shù)含量似的，其實(shí)這時(shí)候如果你不用Table，反而認(rèn)為你的技術(shù)含量低，自己給自己找麻煩，為什么這么說(shuō)呢
首先你必須知道DIV和Table的誕生目的不一樣，DIV的誕生就是用來(lái)布局頁(yè)面，而Table的誕生就是為了放數(shù)據(jù)，大家看KwooJan所有寫的代碼，只有布局頁(yè)面大板塊的時(shí)候才用，還記得上節(jié)課一開始布局頁(yè)面板塊的時(shí)候代碼么

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

<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>

整個(gè)頁(yè)面就這5個(gè)DIV，其他地方一般不用，因?yàn)镈IV的使命就是布局頁(yè)面！
大家經(jīng)常會(huì)進(jìn)入一個(gè)誤區(qū)，會(huì)認(rèn)為在Web2.0時(shí)代，只要頁(yè)面中用了Table就是沒(méi)有技術(shù)含量，就是丟人，要是頁(yè)面中沒(méi)有一個(gè)table，所有元素全部用DIV做，那就是牛人！大家注意了，要是某人對(duì)你說(shuō)，我的整個(gè)網(wǎng)站沒(méi)有應(yīng)用一個(gè)Table，這時(shí)候你就可以認(rèn)為這個(gè)人做頁(yè)面沒(méi)有什么技術(shù)含量，并且CSS代碼相當(dāng)龐雜，根本不能算是一個(gè)高手，頂多是一個(gè)DIV的狂熱分子，做的頁(yè)面也能說(shuō)是標(biāo)準(zhǔn)，很多用Table就可以簡(jiǎn)簡(jiǎn)單單實(shí)現(xiàn)的效果，非要用DIV去實(shí)現(xiàn)，不僅使CSS文件相當(dāng)?shù)挠纺[，而且使頁(yè)面加載速度變慢。
所以在這里KwooJan提醒大家，一定一定要走出這個(gè)誤區(qū)！
好了說(shuō)了這么多，這塊的代碼如下：

HTML代碼：

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

<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代碼：

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

#Content #ContentR table{
font-size:12px;
color:#900;
}

最后一句話就更簡(jiǎn)單了，代碼如下

HTML代碼：

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

<span>希望有強(qiáng)烈進(jìn)取精神和互助精神的朋友請(qǐng)加入！一塊探討一塊交流一塊學(xué)習(xí)！</span>

CSS代碼：

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

#Content #ContentR span{
font-size:12px;
}

至此我們每個(gè)版塊均以布局完畢，但是卻有兩點(diǎn)瑕疵：
1）IE6和FF中有一點(diǎn)卻顯示的卻不一樣，底部版權(quán)在FF中卻跑到了的右側(cè)ContentR的下面，如圖：
1）IE6和FF中有一點(diǎn)卻顯示的卻不一樣，底部版權(quán)在FF中卻跑到了的右側(cè)ContentR的下面，如圖：

產(chǎn)生原因：是因?yàn)閕d為Content的div，沒(méi)有自動(dòng)適應(yīng)里面ContentL的高度
解決方法：最簡(jiǎn)便的方法是設(shè)置Content的CSS屬性overflow:hidden;
怎么樣問(wèn)題解決了吧~
2）因?yàn)镃ontentR的高度沒(méi)有ContentL的高度高，所以在ContentR的下面留有一塊空白，如圖：

解決方法：只需要把Content的背景顏色設(shè)置成和ContentR背景顏色一樣就OK了
這個(gè)問(wèn)題也解決了吧~
最終效果

至此，整個(gè)頁(yè)面算是布局完成了，感覺(jué)怎么樣？有不懂的就回復(fù)帖子告訴我

順便說(shuō)一下：最終代碼其實(shí)還可以進(jìn)行精簡(jiǎn)，這個(gè)算是給大家一個(gè)思考題了
下節(jié)課，我們將要講講布局網(wǎng)頁(yè)的第二種方法---定位

相關(guān)文章

最新評(píng)論