DivCSS布局執行個體:很實用的圖文混排CSS列表

來源:互聯網
上載者:User

一款“圖文混排CSS列表”的製作。首先從分析一下此列表的特點,然後編寫HTML代碼,最終應用CSS樣式實現最終的效果。

  最頂部是欄目名稱“模板無憂 ”與欄目導航“CSS酷站欣賞 DivCSS教程 CSS模板下載”。欄目名稱用標題元素Hx來表示,欄目導航可以用ul li的無序列表。
下部的三個連結地區形式基本雷同,左側是圖片連結,右側是文章列表元素。將左側的圖片與文字看成是一個段落,用p標籤來表示,右側的文章列表用ul li的無序列表。

有了上面的分析開始下面的HTML編碼:

 Example Source Code<div id="list_mb5u_com">
<div class="list_title"></div>
<div class="list_unit" id="l_showcase"></div>
<div class="list_unit" id="l_article"></div>
<div class="list_unit" id="l_templates"></div>

</div>

 

 將所有元素置入id為list_mb5u_com的層中,以便於進行整體布局的控制。在其內部建立四個層,它們分別是:list_title、 l_showcase、l_article、l_templates。對於下部的三個內容層,應用同樣的class,為list_unit。

下面開始具體深入的編寫HTML代碼:

<div id="list_mb">
<div class="list_title">
<h3><a href="" title="模板無憂">模板無憂</a></h3>
<ul>
<li><a href="#" title="CSS酷站欣賞">CSS酷站欣賞</a></li>
<li><a href="#" title="DivCSS教程">DivCSS教程</a></li>
<li><a href="#" title="CSS模板下載">CSS模板下載</a></li>
</ul>
</div>
<div class="list_unit" id="l_showcase">
<p>
<a href="#"><img src="1.jpg" alt="CSS酷站欣賞" /></a>
<span><a href="h#">CSS酷站欣賞</a></span>
</p>
<ul>
<li>·<a href="#">The Highland Fling</a></li>
<li>·<a href="#">We Make Merch We Sell Merch</a></li>
<li>·<a href="#">Kingsfield Church Connecting with God Each Other and the World</a></li>
<li>·<a href="#">Adventure Trekking in Nepal</a></li>
<li>·<a href="#">Web Design Hamilton - VO2 Studio</a></li>
<li>·<a href="#">We have been doing strategic consulting Digiwize</a></li>
<li>·<a href="#">Modern Arboricultural Services</a></li>
</ul>
</div>
<div class="list_unit" id="l_article">
<p>
<a href="http://www.mb5u.com/default.asp"><img src="2.jpg" alt="DivCSS教程" /></a>
<span><a href="#">Div CSS教程</a></span>
</p>
<ul>
<li>·<a href="#">CSS控制Table儲存格強制換行與強制不換行 </a></li>
<li>·<a href="#">DivCSS執行個體:CSS菜單Flash效果 用圖片類比實現 </a></li>
<li>·<a href="#">DivCSS布局執行個體 用dl dt dd來製作列表 </a></li>
<li>·<a href="#">符合web標準的嵌入Flash的方法-JS調用 </a></li>
<li>·<a href="#">CSS經驗:如何治理好樣式CSS? </a></li>
<li>·<a href="#">DIV CSS執行個體:橙藍互換的CSS翻頁效果 </a></li>
<li>·<a href="#">div css表單布局技巧及CSS Form表單設計技巧 </a></li>
</ul>
</div>
<div class="list_unit" id="l_templates">
<p>
<a href="http://www.mb5u.com/css_template/"><img src="3.jpg" alt="CSS模板下載" /></a>
<span><a href="http://www.mb5u.com/css_template/">CSS模板下載</a></span>
</p>
<ul>
<li>·<a href="#">CS模板下載 - Scuba Holding</a></li>
<li>·<a href="#">CS模板下載 - Keeping It Clean</a></li>
<li>·<a href="#">CS模板下載 - Culture Shock</a></li>
<li>·<a href="#">CS模板下載 - Simply CSS</a></li>
<li>·<a href="#">模板下載 - Doctors Office</a></li>
<li>·<a href="#">模板下載 - Mint Chocolate Chip</a></li>
<li>·<a href="#">CS模板下載 - Andrea Layout</a></li>
</ul>
</div>
<div class="clear"></div>

</div>

 在list_title層,置入h3元素作為欄目名稱,建立一個ul列表放置欄目導航。
下部的三個內容層(list_unit),分別置入段落標籤p,引入連結圖片與文字;建立一個ul放置文章列表。
在最底部,放置一個類為clear的層來清除浮動。

有了上面的基礎開始下面的CSS編碼:

 Example Source Code* { margin:0; padding:0; font-size:13px; color:#000; list-style:none;}
a { color:#03c; text-decoration:none;}
a:hover { text-decoration:underline;}
#list_mb5u_com { width:418px; margin:30px auto; border:1px solid #999;}

整體布局聲明:
設定整個層的樣式,寬度為418px,上下外邊距為30px,左右為自動實現水平置中對齊。邊框設定為1px的灰色實線。

 Example Source Code.list_title { width:418px; height:32px; border-bottom:1px solid #999; background:#f2f9fd; overflow:hidden;}
.list_title h3 { float:left; width:160px; line-height:32px; text-indent:15px;}
.list_title h3 a { color:#c00;}
.list_title h3 a:hover { color:#03c;}
.list_title ul { float:right; width:230px;}
.list_title ul li { float:left; line-height:32px; padding:0 5px;}
.list_title ul li a { font-size:12px; color:#333;}

標題區list_title層的CSS樣式定義:
設定list_title層寬度與高度分別是:418px、32px;下邊框為1px的灰色實線;設定背景色及溢出隱藏。
欄目名稱h3元素向左浮動;寬度160px;行距32px實現文字垂直置中對齊;文本縮排為15px。緊接著設定欄目名稱h3連結的樣式。
欄目導航ul列表的CSS樣式,向右浮動;寬度為230px;設定清單項目li向左浮動;行距為32px;上下內邊距為0,左右內邊距為5px;緊接著設定連結文字大小與顏色。

 Example Source Code.list_unit { float:left; width:388px; margin-left:15px; padding:15px 0 8px 0; border-bottom:1px dotted #9AC4E9;}
.list_unit { display:inline;}

內容層(list_unit)整體樣式定義:
向左浮動;寬度為388px,左外邊距為15px,上內邊距15px、下內邊距8px;設定下邊框為淺藍色的虛線。
設定為內聯是避免IE的雙邊距BUG。

 Example Source Code.list_unit p { float:left; width:164px;}
.list_unit p a { display:block; border:1px solid #03c;}
.list_unit p a:hover { border:1px dashed #00f;}
.list_unit p a img { width:160px; height:120px; margin:1px; border:0;}
.list_unit span { display:block;}
.list_unit span a { display:block; width:164px; height:22px; border:0; line-height:22px; text-align:center;}
.list_unit span a:hover { border:0; color:#c00;}

內容層(list_unit)內圖片連結樣式定義:
整個段落p,向左浮動,寬度為164px。
設定連結為塊元素;設定邊框為1px藍色實線。
連結懸念狀態下,邊框變為1px深藍色虛線。
連結元素內的圖片定義,寬度與高度分別是:160px、120px;外邊距為1px;邊框為0(消除圖片連結瀏覽器的預設邊框)。
設定連結文字樣式,由於上面的設定是整體的,因而在下面的內容中,注重將上面的一些內容層疊掉。
將span轉換為塊元素。span內的連結同樣轉換為塊元素,設定寬度與高度分別是164px、22px;設定邊框為0(層疊先前的設定);行距設定為22px;文字水平置中對齊。
span內的連結文字懸停狀態下,設定邊框為0;顏色設定為#c00;顯示底線。

Example Source Code .list_unit ul { float:right; width:216px; margin-top:-5px;}
.list_unit ul li { float:left; width:216px; line-height:22px; color:#039; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

內容層(list_unit)內文章列表樣式定義:
整個列表ul向右浮動;寬度為216px;上外邊距為-5px。
清單項目li的CSS樣式設定,向左浮動,寬度為216px;行距為22px;顏色為#039;後面的三個屬性是實現“截字”效果,mb5u.com網站上有具體的介紹。(請注重此效果在FF下無效)

 Example Source Code#l_templates { border-width:0;}
.clear { clear:both;}

最後的CSS設定:
最後一個內容層(list_unit)是沒有下邊框的,此層的id為l_templates。因而在此進行層疊定義,消除此層的邊框即可。
清除浮動是必須的,否則在FF下可能會出現混亂。這是一個良好的編碼實踐。

 

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。