<!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> <title>用CSS實(shí)現(xiàn)圖文混排的布局實(shí)例_網(wǎng)頁(yè)代碼站(www.webdm.cn)</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.webdm.cn/images/wall2_s.jpg" /></a></li> <li class="text"> <h3><a href="#">今天夜里到明天陰有太陽(yáng)</a></h3> <p>據(jù)中央氣象臺(tái)消息，今天夜里到明天，華北大部有強(qiáng)降水，同時(shí)伴隨艷陽(yáng)高照<a href="#">[詳細(xì)]</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 >網(wǎng)頁(yè)代碼站</a> - 最專業(yè)的網(wǎng)頁(yè)代碼下載網(wǎng)站 - 致力為中國(guó)站長(zhǎng)提供有質(zhì)量的網(wǎng)頁(yè)代碼！</p> </body> </html>
聯(lián)系客服
