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>
。