CSS圖片+文字的圖文混排效果_層和布局特效
一個常用的CSS圖片+文字的布局，圖文混排，非常不錯，這只是一個區域的布局，你可以直接復制若干個，一般用在首頁或二級欄目著首頁作為板塊導航，代碼經測試兼容性非常好，而且高度是自適應的。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>CSS常用的圖文布局列表</title> <style> *{ padding:0px; margin:0px;} body{ font-size:12px; line-height:150%; color:#454545} a{ color:#0066CC; 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; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231305308.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231305308.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231305308.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{float:right;} </style> </head> <body> <div class="box"> <div class="m"> <h2>一個常用的CSS圖片+文字的布局</h2> <div class="p5"> <div class="list_1"> <span><a href="/"><img src="/jscss/demoimg/wall_s8.jpg" width="90" height="111" /></a></span> <p><b><a href="http://mb5u.com">關于模板無憂網站</a></b><br /> mb5u.com提供各類網頁模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質量的學習型源碼下載站，第天都有新內容奉獻給大家，希望經常來坐坐哦。</p> <div class="cle"></div> </div> <ul class="list_2"> <li><a href="/soft/1313.shtml" target="_blank">經典50個Java手機游戲源碼打包下載</a></li><li><a href="/soft/2880.shtml" target="_blank">css+js網頁顏色、皮膚多風格切換演示</a></li><li><a href="/soft/1764.shtml" target="_blank">《C# 設計模式》全書 PDG附書籍源碼</a></li><li><a href="/soft/3959.shtml" target="_blank">很可怕的一個C#2008惡搞程序</a></li><li><a href="/soft/3069.shtml" target="_blank">25175 單項選擇考試系統ASP.net版 v1.0</a></li><li><a href="/soft/2062.shtml" target="_blank">C#圖片/相冊管理程序代碼</a></li> </ul> </div> </div> </div> </body> </html>
。