|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>用CSS实现图文混排的布局实例_网页代码站(www.)</title> <style type="text/css"> .news{width:250px;line-height:21px;} .imgText .img{float:left;width:100px;} .imgText .img img{width:90px;height:90px;border:#ddd 1px solid;} .imgText .text{float:left;width:145px;} .imgText .text h3{font-size:12px;height:24px;overflow:hidden;} .imgText .text h3 a{color:#000;} .imgText .text h3 a:hover{color:#BA2636;} .imgText .text p{text-indent:24px;} .imgText .text p a{color:#BA2636;} .textList{clear:both;font-size:14px;} .textList li{height:25px;line-height:25px;overflow:hidden;} .textList li a{margin-right:5px;} @charset "utf-8"; body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} </style> </head> <body> <div class="news"> <ul class="imgText"> <li class="img"><a href="#"><img src="http://www./images/wall2_s.jpg" /></a></li> <li class="text"> <h3><a href="#">今天夜里到明天阴有太阳</a></h3> <p>据中央气象台消息，今天夜里到明天，华北大部有强降水，同时伴随艳阳高照<a href="#">[详细]</a></p> </li> </ul> <ul class="textList"> <li><a href="#">[历史]</a><a href="#">陶短房：曹操墓怎么能是假的</a></li> <li><a href="#">[历史]</a><a href="#">陶短房：曹操墓有可能是假的</a></li> <li><a href="#">[历史]</a><a href="#">陶短房：曹操墓不一定是假的</a></li> </ul> </div> <br /> <p><a href="http://www.">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> </body> </html>
|
|
|
来自： 悟静 > 《.net和asp.net》
