本文小編為大家詳細介紹“css怎么實現(xiàn)圖文混排”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“css怎么實現(xiàn)圖文混排”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

站在用戶的角度思考問題，與客戶深入溝通，找到巴宜網(wǎng)站設(shè)計與巴宜網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋巴宜地區(qū)。

一款“圖文混排CSS列表”的制作。首先從分析一下此列表的特點，然后編寫HTML代碼，最終應(yīng)用CSS樣式實現(xiàn)最終的效果。

最頂部是欄目名稱“模板無憂 ”與欄目導(dǎo)航“CSS酷站欣賞 DivCSS教程 CSS模板下載”。欄目名稱用標(biāo)題元素Hx來表示，欄目導(dǎo)航可以用ul li的無序列表。

下部的三個鏈接區(qū)域形式基本雷同，左側(cè)是圖片鏈接，右側(cè)是文章列表元素。將左側(cè)的圖片與文字看成是一個段落，用p標(biāo)簽來表示，右側(cè)的文章列表用ul li的無序列表。

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

?Example Source Code

?

?將所有元素置入id為list_mb5u_com的層中，以便于進行整體布局的控制。在其內(nèi)部建立四個層，它們分別是：list_title、 l_showcase、l_article、l_templates。對于下部的三個內(nèi)容層，應(yīng)用同樣的class，為list_unit。

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

?在list_title層，置入h4元素作為欄目名稱，建立一個ul列表放置欄目導(dǎo)航。

下部的三個內(nèi)容層（list_unit），分別置入段落標(biāo)簽p，引入鏈接圖片與文字；建立一個ul放置文章列表。

在最底部，放置一個類為clear的層來清除浮動。

有了上面的基礎(chǔ)開始下面的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;}

整體布局聲明：

設(shè)置整個層的樣式，寬度為418px，上下外邊距為30px，左右為自動實現(xiàn)水平居中對齊。邊框設(shè)置為1px的灰色實線。

?Example Source Code

.list_title { width:418px; height:32px; border-bottom:1px solid #999; background:#f2f9fd; overflow:hidden;}

.list_title h4 { float:left; width:160px; line-height:32px; text-indent:15px;}

.list_title h4 a { color:#c00;}

.list_title h4 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;}

標(biāo)題區(qū)域list_title層的CSS樣式定義：

設(shè)置list_title層寬度與高度分別是：418px、32px；下邊框為1px的灰色實線；設(shè)置背景色及溢出隱藏。

欄目名稱h4元素向左浮動；寬度160px；行距32px實現(xiàn)文字垂直居中對齊；文本縮進為15px。緊接著設(shè)置欄目名稱h4鏈接的樣式。

欄目導(dǎo)航ul列表的CSS樣式，向右浮動；寬度為230px；設(shè)置列表項li向左浮動；行距為32px；上下內(nèi)邊距為0，左右內(nèi)邊距為5px；緊接著設(shè)置鏈接文字大小與顏色。

?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;}

內(nèi)容層（list_unit）整體樣式定義：

向左浮動；寬度為388px，左外邊距為15px，上內(nèi)邊距15px、下內(nèi)邊距8px；設(shè)置下邊框為淺藍色的虛線。

設(shè)置為內(nèi)聯(lián)是避免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;}

內(nèi)容層（list_unit）內(nèi)圖片鏈接樣式定義：

整個段落p，向左浮動，寬度為164px。

設(shè)置鏈接為塊元素；設(shè)置邊框為1px藍色實線。

鏈接懸念狀態(tài)下，邊框變?yōu)?px深藍色虛線。

鏈接元素內(nèi)的圖片定義，寬度與高度分別是：160px、120px；外邊距為1px；邊框為0（消除圖片鏈接瀏覽器的默認邊框）。

設(shè)置鏈接文字樣式，由于上面的設(shè)置是整體的，因而在下面的內(nèi)容中，注重將上面的一些內(nèi)容層疊掉。

將span轉(zhuǎn)換為塊元素。span內(nèi)的鏈接同樣轉(zhuǎn)換為塊元素，設(shè)置寬度與高度分別是164px、22px；設(shè)置邊框為0（層疊先前的設(shè)置）；行距設(shè)置為22px；文字水平居中對齊。

span內(nèi)的鏈接文字懸停狀態(tài)下，設(shè)置邊框為0；顏色設(shè)置為#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;}

內(nèi)容層（list_unit）內(nèi)文章列表樣式定義：

整個列表ul向右浮動；寬度為216px；上外邊距為-5px。

列表項li的CSS樣式設(shè)置，向左浮動，寬度為216px；行距為22px；顏色為#039；后面的三個屬性是實現(xiàn)“截字”效果，mb5u.com網(wǎng)站上有具體的介紹。（請注重此效果在FF下無效）

?Example Source Code

#l_templates { border-width:0;}

.clear { clear:both;}

最后的CSS設(shè)置：

最后一個內(nèi)容層（list_unit）是沒有下邊框的，此層的id為l_templates。因而在此進行層疊定義，消除此層的邊框即可。

清除浮動是必須的，否則在FF下可能會出現(xiàn)混亂。這是一個良好的編碼實踐。

讀到這里，這篇“css怎么實現(xiàn)圖文混排”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。