css 浮動(float)頁面布局(下)

2024-07-11 08:26:54

字體：大中小

來源：轉載

供稿：網友

【第七步內容左側板塊(ContentL)布局】
我們分析一下他的結構，主要包括標題和文章內容兩塊，并且標題和內容之間有一條虛線，而第二篇文章的內容部分是圖片和文字相結合且文字環繞圖片。
好~！既然搞清楚結構了，后面我們布局就容易了
我打算標題用<h1>標簽，為什么這么用呢，原因如下

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

對于文章內容，我們就放到<p></p>中就OK了，相應的代碼如下：

HTML代碼：

復制代碼

代碼如下:
<div id="ContentL">
<h1>CSS學習互動社區歡迎您！</h1>
<p>我們是一群熱愛頁面前端技術并熱衷于推廣W3C標準的熱心好友，如果您想學或者正在學DIV+CSS布局頁面，加入我們！您會很快馴服并駕馭這匹烈馬！雖然我們的論壇正在起步，但是這里的每個人都很熱愛頁面前端技術并熱衷于推廣W3C標準在中國的運用，只要你有問題就可以問，一定會有人幫你解答！我們可能不是高手，但是我們都是很樂于幫助，樂于鉆研。我們都很熱心！</p>
</div>

CSS代碼：

復制代碼

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

到這里我們第一篇文章已經布局完畢，下面布局一下第二篇文章，估計大家早就注意到了，兩篇文章唯一區別就是第二篇文章的內容的左側有一張圖片，哈哈，這就好辦了，把第一篇文章的代碼復制過來，替換標題和文章內容，然后再文章內容里面插入一張圖片就OK了，代碼如下：

HTML代碼：

復制代碼

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

上一篇：CSS 選擇器命名規范化

下一篇：CSS教程 CSS選擇器

發表評論

共有條評論