CSS圖片+文字的圖文混排效果_層和布局特效
一個(gè)常用的CSS圖片+文字的布局，圖文混排，非常不錯(cuò)，這只是一個(gè)區(qū)域的布局，你可以直接復(fù)制若干個(gè)，一般用在首頁(yè)或二級(jí)欄目著首頁(yè)作為板塊導(dǎo)航，代碼經(jīng)測(cè)試兼容性非常好，而且高度是自適應(yīng)的。<!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>一個(gè)常用的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">關(guān)于模板無(wú)憂網(wǎng)站</a></b><br /> mb5u.com提供各類網(wǎng)頁(yè)模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站，第天都有新內(nèi)容奉獻(xiàn)給大家，希望經(jīng)常來(lái)坐坐哦。</p> <div class="cle"></div> </div> <ul class="list_2"> <li><a href="/soft/1313.shtml" target="_blank">經(jīng)典50個(gè)Java手機(jī)游戲源碼打包下載</a></li><li><a href="/soft/2880.shtml" target="_blank">css+js網(wǎng)頁(yè)顏色、皮膚多風(fēng)格切換演示</a></li><li><a href="/soft/1764.shtml" target="_blank">《C# 設(shè)計(jì)模式》全書(shū) PDG附書(shū)籍源碼</a></li><li><a href="/soft/3959.shtml" target="_blank">很可怕的一個(gè)C#2008惡搞程序</a></li><li><a href="/soft/3069.shtml" target="_blank">25175 單項(xiàng)選擇考試系統(tǒng)ASP.net版 v1.0</a></li><li><a href="/soft/2062.shtml" target="_blank">C#圖片/相冊(cè)管理程序代碼</a></li> </ul> </div> </div> </div> </body> </html>
。