DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表 - 富有語(yǔ)義
CSS網(wǎng)頁(yè)布局的一大特點(diǎn)就是列表元素的應(yīng)用,在傳統(tǒng)的表格布局中往往將列表元素作為表格來(lái)處理,這樣的方式非但不具有語(yǔ)義還產(chǎn)生了許多不必要的代碼。
今天我們共同學(xué)習(xí)一款“圖文混排CSS列表”的制作。首先從分析一下此列表的特點(diǎn),然后編寫(xiě)HTML代碼,最終應(yīng)用CSS樣式實(shí)現(xiàn)最終的效果。
列表的效果如圖所示:
最頂部是欄目名稱“模板無(wú)憂 MB5U.com ”與欄目導(dǎo)航“CSS酷站欣賞 DivCSS教程 CSS模板下載”。欄目名稱用標(biāo)題元素Hx來(lái)表示,欄目導(dǎo)航可以用ul li的無(wú)序列表。
下部的三個(gè)鏈接區(qū)域形式基本雷同,左側(cè)是圖片鏈接,右側(cè)是文章列表元素。將左側(cè)的圖片與文字看成是一個(gè)段落,用p標(biāo)簽來(lái)表示,右側(cè)的文章列表用ul li的無(wú)序列表。
有了上面的分析開(kāi)始下面的HTML編碼:
將所有元素置入id為list_mb5u_com的層中,以便于進(jìn)行整體布局的控制。在其內(nèi)部建立四個(gè)層,它們分別是:list_title、l_showcase、l_article、l_templates。對(duì)于下部的三個(gè)內(nèi)容層,應(yīng)用同樣的class,為list_unit。
下面開(kāi)始具體深入的編寫(xiě)HTML代碼:
在list_title層,置入h3元素作為欄目名稱,建立一個(gè)ul列表放置欄目導(dǎo)航。
下部的三個(gè)內(nèi)容層(list_unit),分別置入段落標(biāo)簽p,引入鏈接圖片與文字;建立一個(gè)ul放置文章列表。
在最底部,放置一個(gè)類(lèi)為clear的層來(lái)清除浮動(dòng)。
有了上面的基礎(chǔ)開(kāi)始下面的CSS編碼:
整體布局聲明:
設(shè)置整個(gè)層的樣式,寬度為418px,上下外邊距為30px,左右為自動(dòng)實(shí)現(xiàn)水平居中對(duì)齊。邊框設(shè)置為1px的灰色實(shí)線。
標(biāo)題區(qū)域list_title層的CSS樣式定義:
設(shè)置list_title層寬度與高度分別是:418px、32px;下邊框?yàn)?px的灰色實(shí)線;設(shè)置背景色及溢出隱藏。
欄目名稱h3元素向左浮動(dòng);寬度160px;行距32px實(shí)現(xiàn)文字垂直居中對(duì)齊;文本縮進(jìn)為15px。緊接著設(shè)置欄目名稱h3鏈接的樣式。
欄目導(dǎo)航ul列表的CSS樣式,向右浮動(dòng);寬度為230px;設(shè)置列表項(xiàng)li向左浮動(dòng);行距為32px;上下內(nèi)邊距為0,左右內(nèi)邊距為5px;緊接著設(shè)置鏈接文字大小與顏色。
內(nèi)容層(list_unit)整體樣式定義:
向左浮動(dòng);寬度為388px,左外邊距為15px,上內(nèi)邊距15px、下內(nèi)邊距8px;設(shè)置下邊框?yàn)闇\藍(lán)色的虛線。
設(shè)置為內(nèi)聯(lián)是避免IE的雙邊距BUG。
內(nèi)容層(list_unit)內(nèi)圖片鏈接樣式定義:
整個(gè)段落p,向左浮動(dòng),寬度為164px。
設(shè)置鏈接為塊元素;設(shè)置邊框?yàn)?px藍(lán)色實(shí)線。
鏈接懸念狀態(tài)下,邊框變?yōu)?px深藍(lán)色虛線。
鏈接元素內(nèi)的圖片定義,寬度與高度分別是:160px、120px;外邊距為1px;邊框?yàn)?(消除圖片鏈接瀏覽器的默認(rèn)邊框)。
設(shè)置鏈接文字樣式,由于上面的設(shè)置是整體的,因而在下面的內(nèi)容中,注重將上面的一些內(nèi)容層疊掉。
將span轉(zhuǎn)換為塊元素。span內(nèi)的鏈接同樣轉(zhuǎn)換為塊元素,設(shè)置寬度與高度分別是164px、22px;設(shè)置邊框?yàn)?(層疊先前的設(shè)置);行距設(shè)置為22px;文字水平居中對(duì)齊。
span內(nèi)的鏈接文字懸停狀態(tài)下,設(shè)置邊框?yàn)?;顏色設(shè)置為#c00;顯示下劃線。
內(nèi)容層(list_unit)內(nèi)文章列表樣式定義:
整個(gè)列表ul向右浮動(dòng);寬度為216px;上外邊距為-5px。
列表項(xiàng)li的CSS樣式設(shè)置,向左浮動(dòng),寬度為216px;行距為22px;顏色為#039;后面的三個(gè)屬性是實(shí)現(xiàn)“截字”效果,mb5u.com網(wǎng)站上有具體的介紹。(請(qǐng)注重此效果在FF下無(wú)效)
最后的CSS設(shè)置:
最后一個(gè)內(nèi)容層(list_unit)是沒(méi)有下邊框的,此層的id為l_templates。因而在此進(jìn)行層疊定義,消除此層的邊框即可。
清除浮動(dòng)是必須的,否則在FF下可能會(huì)出現(xiàn)混亂。這是一個(gè)良好的編碼實(shí)踐。
CSS網(wǎng)頁(yè)布局的一大特點(diǎn)就是列表元素的應(yīng)用,在傳統(tǒng)的表格布局中往往將列表元素作為表格來(lái)處理,這樣的方式非但不具有語(yǔ)義還產(chǎn)生了許多不必要的代碼。
今天我們共同學(xué)習(xí)一款“圖文混排CSS列表”的制作。首先從分析一下此列表的特點(diǎn),然后編寫(xiě)HTML代碼,最終應(yīng)用CSS樣式實(shí)現(xiàn)最終的效果。
列表的效果如圖所示:
最頂部是欄目名稱“模板無(wú)憂 MB5U.com ”與欄目導(dǎo)航“CSS酷站欣賞 DivCSS教程 CSS模板下載”。欄目名稱用標(biāo)題元素Hx來(lái)表示,欄目導(dǎo)航可以用ul li的無(wú)序列表。
下部的三個(gè)鏈接區(qū)域形式基本雷同,左側(cè)是圖片鏈接,右側(cè)是文章列表元素。將左側(cè)的圖片與文字看成是一個(gè)段落,用p標(biāo)簽來(lái)表示,右側(cè)的文章列表用ul li的無(wú)序列表。
有了上面的分析開(kāi)始下面的HTML編碼:
示例代碼 [m.dounai2.com]
<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>
<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的層中,以便于進(jìn)行整體布局的控制。在其內(nèi)部建立四個(gè)層,它們分別是:list_title、l_showcase、l_article、l_templates。對(duì)于下部的三個(gè)內(nèi)容層,應(yīng)用同樣的class,為list_unit。
下面開(kāi)始具體深入的編寫(xiě)HTML代碼:
示例代碼 [m.dounai2.com]
<div id="list_mb5u_com">
<div class="list_title">
<h3><a href="http://m.dounai2.com/" title="模板無(wú)憂">模板無(wú)憂 MB5U.com</a></h3>
<ul>
<li><a href="http://m.dounai2.com/css_websites_showcase/" title="CSS酷站欣賞">CSS酷站欣賞</a></li>
<li><a href="http://m.dounai2.com/default.asp" title="DivCSS教程">DivCSS教程</a></li>
<li><a href="http://m.dounai2.com/css_template/" title="CSS模板下載">CSS模板下載</a></li>
</ul>
</div>
<div class="list_unit" id="l_showcase">
<p>
<a href="http://m.dounai2.com/css_websites_showcase/"><img src="1.jpg" alt="CSS酷站欣賞" /></a>
<span><a href="http://m.dounai2.com/css_websites_showcase/">CSS酷站欣賞</a></span>
</p>
<ul>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=100">The Highland Fling</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=99">We Make Merch We Sell Merch</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=98">Kingsfield Church Connecting with God Each Other and the World</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=97">Adventure Trekking in Nepal</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=96">Web Design Hamilton - VO2 Studio</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=95">We have been doing strategic consulting Digiwize</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=94">Modern Arboricultural Services</a></li>
</ul>
</div>
<div class="list_unit" id="l_article">
<p>
<a href="http://m.dounai2.com/default.asp"><img src="2.jpg" alt="DivCSS教程" /></a>
<span><a href="http://m.dounai2.com/default.asp">Div CSS教程</a></span>
</p>
<ul>
<li>·<a href="http://m.dounai2.com/article.asp?id=668">CSS控制Table單元格強(qiáng)制換行與強(qiáng)制不換行 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=667">DivCSS實(shí)例:CSS菜單Flash效果 用圖片模擬實(shí)現(xiàn) </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=666">DivCSS布局實(shí)例 用dl dt dd來(lái)制作列表 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=660">符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=656">CSS經(jīng)驗(yàn):如何治理好樣式CSS? </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=655">DIV CSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=650">div css表單布局技巧及CSS Form表單設(shè)計(jì)技巧 </a></li>
</ul>
</div>
<div class="list_unit" id="l_templates">
<p>
<a href="http://m.dounai2.com/css_template/"><img src="3.jpg" alt="CSS模板下載" /></a>
<span><a href="http://m.dounai2.com/css_template/">CSS模板下載</a></span>
</p>
<ul>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=100">CS模板下載 - Scuba Holding</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=99">CS模板下載 - Keeping It Clean</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=98">CS模板下載 - Culture Shock</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=97">CS模板下載 - Simply CSS</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=96">CS模板下載 - Doctors Office</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=95">CS模板下載 - Mint Chocolate Chip</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=94">CS模板下載 - Andrea Layout</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="list_title">
<h3><a href="http://m.dounai2.com/" title="模板無(wú)憂">模板無(wú)憂 MB5U.com</a></h3>
<ul>
<li><a href="http://m.dounai2.com/css_websites_showcase/" title="CSS酷站欣賞">CSS酷站欣賞</a></li>
<li><a href="http://m.dounai2.com/default.asp" title="DivCSS教程">DivCSS教程</a></li>
<li><a href="http://m.dounai2.com/css_template/" title="CSS模板下載">CSS模板下載</a></li>
</ul>
</div>
<div class="list_unit" id="l_showcase">
<p>
<a href="http://m.dounai2.com/css_websites_showcase/"><img src="1.jpg" alt="CSS酷站欣賞" /></a>
<span><a href="http://m.dounai2.com/css_websites_showcase/">CSS酷站欣賞</a></span>
</p>
<ul>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=100">The Highland Fling</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=99">We Make Merch We Sell Merch</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=98">Kingsfield Church Connecting with God Each Other and the World</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=97">Adventure Trekking in Nepal</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=96">Web Design Hamilton - VO2 Studio</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=95">We have been doing strategic consulting Digiwize</a></li>
<li>·<a href="http://m.dounai2.com/css_websites_showcase/view.asp?id=94">Modern Arboricultural Services</a></li>
</ul>
</div>
<div class="list_unit" id="l_article">
<p>
<a href="http://m.dounai2.com/default.asp"><img src="2.jpg" alt="DivCSS教程" /></a>
<span><a href="http://m.dounai2.com/default.asp">Div CSS教程</a></span>
</p>
<ul>
<li>·<a href="http://m.dounai2.com/article.asp?id=668">CSS控制Table單元格強(qiáng)制換行與強(qiáng)制不換行 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=667">DivCSS實(shí)例:CSS菜單Flash效果 用圖片模擬實(shí)現(xiàn) </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=666">DivCSS布局實(shí)例 用dl dt dd來(lái)制作列表 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=660">符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=656">CSS經(jīng)驗(yàn):如何治理好樣式CSS? </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=655">DIV CSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果 </a></li>
<li>·<a href="http://m.dounai2.com/article.asp?id=650">div css表單布局技巧及CSS Form表單設(shè)計(jì)技巧 </a></li>
</ul>
</div>
<div class="list_unit" id="l_templates">
<p>
<a href="http://m.dounai2.com/css_template/"><img src="3.jpg" alt="CSS模板下載" /></a>
<span><a href="http://m.dounai2.com/css_template/">CSS模板下載</a></span>
</p>
<ul>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=100">CS模板下載 - Scuba Holding</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=99">CS模板下載 - Keeping It Clean</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=98">CS模板下載 - Culture Shock</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=97">CS模板下載 - Simply CSS</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=96">CS模板下載 - Doctors Office</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=95">CS模板下載 - Mint Chocolate Chip</a></li>
<li>·<a href="http://m.dounai2.com/css_template/view.asp?id=94">CS模板下載 - Andrea Layout</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
在list_title層,置入h3元素作為欄目名稱,建立一個(gè)ul列表放置欄目導(dǎo)航。
下部的三個(gè)內(nèi)容層(list_unit),分別置入段落標(biāo)簽p,引入鏈接圖片與文字;建立一個(gè)ul放置文章列表。
在最底部,放置一個(gè)類(lèi)為clear的層來(lái)清除浮動(dòng)。
有了上面的基礎(chǔ)開(kāi)始下面的CSS編碼:
示例代碼 [m.dounai2.com]
* { 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;}
a { color:#03c; text-decoration:none;}
a:hover { text-decoration:underline;}
#list_mb5u_com { width:418px; margin:30px auto; border:1px solid #999;}
整體布局聲明:
設(shè)置整個(gè)層的樣式,寬度為418px,上下外邊距為30px,左右為自動(dòng)實(shí)現(xiàn)水平居中對(duì)齊。邊框設(shè)置為1px的灰色實(shí)線。
示例代碼 [m.dounai2.com]
.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 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;}
標(biāo)題區(qū)域list_title層的CSS樣式定義:
設(shè)置list_title層寬度與高度分別是:418px、32px;下邊框?yàn)?px的灰色實(shí)線;設(shè)置背景色及溢出隱藏。
欄目名稱h3元素向左浮動(dòng);寬度160px;行距32px實(shí)現(xiàn)文字垂直居中對(duì)齊;文本縮進(jìn)為15px。緊接著設(shè)置欄目名稱h3鏈接的樣式。
欄目導(dǎo)航ul列表的CSS樣式,向右浮動(dòng);寬度為230px;設(shè)置列表項(xiàng)li向左浮動(dòng);行距為32px;上下內(nèi)邊距為0,左右內(nèi)邊距為5px;緊接著設(shè)置鏈接文字大小與顏色。
示例代碼 [m.dounai2.com]
.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 { display:inline;}
內(nèi)容層(list_unit)整體樣式定義:
向左浮動(dòng);寬度為388px,左外邊距為15px,上內(nèi)邊距15px、下內(nèi)邊距8px;設(shè)置下邊框?yàn)闇\藍(lán)色的虛線。
設(shè)置為內(nèi)聯(lián)是避免IE的雙邊距BUG。
示例代碼 [m.dounai2.com]
.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 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)圖片鏈接樣式定義:
整個(gè)段落p,向左浮動(dòng),寬度為164px。
設(shè)置鏈接為塊元素;設(shè)置邊框?yàn)?px藍(lán)色實(shí)線。
鏈接懸念狀態(tài)下,邊框變?yōu)?px深藍(lán)色虛線。
鏈接元素內(nèi)的圖片定義,寬度與高度分別是:160px、120px;外邊距為1px;邊框?yàn)?(消除圖片鏈接瀏覽器的默認(rèn)邊框)。
設(shè)置鏈接文字樣式,由于上面的設(shè)置是整體的,因而在下面的內(nèi)容中,注重將上面的一些內(nèi)容層疊掉。
將span轉(zhuǎn)換為塊元素。span內(nèi)的鏈接同樣轉(zhuǎn)換為塊元素,設(shè)置寬度與高度分別是164px、22px;設(shè)置邊框?yàn)?(層疊先前的設(shè)置);行距設(shè)置為22px;文字水平居中對(duì)齊。
span內(nèi)的鏈接文字懸停狀態(tài)下,設(shè)置邊框?yàn)?;顏色設(shè)置為#c00;顯示下劃線。
示例代碼 [m.dounai2.com]
.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 li { float:left; width:216px; line-height:22px; color:#039; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
內(nèi)容層(list_unit)內(nèi)文章列表樣式定義:
整個(gè)列表ul向右浮動(dòng);寬度為216px;上外邊距為-5px。
列表項(xiàng)li的CSS樣式設(shè)置,向左浮動(dòng),寬度為216px;行距為22px;顏色為#039;后面的三個(gè)屬性是實(shí)現(xiàn)“截字”效果,mb5u.com網(wǎng)站上有具體的介紹。(請(qǐng)注重此效果在FF下無(wú)效)
示例代碼 [m.dounai2.com]
#l_templates { border-width:0;}
.clear { clear:both;}
.clear { clear:both;}
最后的CSS設(shè)置:
最后一個(gè)內(nèi)容層(list_unit)是沒(méi)有下邊框的,此層的id為l_templates。因而在此進(jìn)行層疊定義,消除此層的邊框即可。
清除浮動(dòng)是必須的,否則在FF下可能會(huì)出現(xiàn)混亂。這是一個(gè)良好的編碼實(shí)踐。
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
- DivCSS實(shí)例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DIVCSS布局實(shí)例:DIV CSS新聞列表制作
- CSS菜單:基本橫向菜單效果超炫
- IE6、IE7絕對(duì)定位與鏈接問(wèn)題研究
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- CSS菜單實(shí)例:極致而簡(jiǎn)約的風(fēng)格
- 一個(gè)非常棒的DIV CSS導(dǎo)航條效果!
- CSS布局中常用的CSS圖像置換、圖片替代的方法舉例
- CSS實(shí)例教程:UL制作CSS橫向菜單藍(lán)綠色調(diào)
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- DIV CSS布局入門(mén)示例(一)頁(yè)面布局與規(guī)劃
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- 教程說(shuō)明:
DIV+CSS實(shí)例-DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義。