用DIV+CSS實現圖文混排與文字列表一起顯示

文章目錄

• CSS代碼
• HTML代碼

CSS代碼

<style>*{ padding:0px; margin:0px;}body{ font-size:12px; line-height:150%; color:#666666}a{ color:#003399; text-decoration:none}a:hover{ color:#999900;}div{ overflow:hidden}.box{ width:300px; margin:10PX auto;}img{ border:0px;}.p5{ padding:5px;}.cle{ clear:both; height:0px;}.m{ border:1px solid #ccc;}.m h2,.m ul li{ height:25px; line-height:25px;}.m h2{ font-size:12px; background:#f7f7f7; padding-left:5px;}.m ul li{ list-style:none; border-top:1px dotted #ddd;background:url(b1.gif) no-repeat 3px 50%; padding-left:20px;}.m .list_1{ margin-bottom:5px;}.m .list_1 span{ float:left; padding-right:8px;}.m .list_1 span img{ border:1px solid #eee;}.m .list_1 p{}</style>

HTML代碼

<div class="box"><div class="m"><h2>CSSBBS圖片+文字列表</h2><div class="p5"><div class="list_1"><span><a href="http://www.865171.cn"><img src="20007493_b.jpg" width="90" height="111" /></a></span><p><b><a href="http://www.865171.cn">CSS網站布局實錄(第二版)</a></b><br />本書是一本講述基於Web標準的應用CSS進行網站布局設計與重構的典範之作。 本書以執行個體為主，一步步地告訴大家如何進行符合Web 2.0標準的CSS布局設計...</p><div class="cle"></div></div><ul class="list_2"><li><a href="http://www.865171.cn" target="_blank">精通CSS+DIV網頁樣式布局(附光碟片)</a></li><li><a href="http://www.865171.cn" target="_blank">精通CSS：進階Web標準解決方案——圖靈...</a></li><li><a href="http://www.865171.cn" target="_blank">CSS禪意花園</a></li><li><a href="http://www.865171.cn" target="_blank">HTML XHTML CSS 基礎教程（第6版）</a></li><li><a href="http://www.865171.cn" target="_blank">詳解HTML&CSS&JavaScript 文法辭典（專...</a></li><li><a href="http://www.865171.cn" target="_blank">HTML與CSS入門經典（第7版）</a></li><li><a href="http://www.865171.cn" target="_blank">超越CSS：WEB設計藝術精髓</a></li></ul></div><h1>www.865171.cn</h1></div></div>