站长地带继续提供类似新闻列表的制作，并已经做成了专题。上一节站长地带主要讲了带日期的新闻列表，本节的效果图，这种图文效果在实战过程中，用到的还是比较多的，请同学们注意学习哦：
HTML代码：
| <div class="a1"> | | | <div class="a2"><span>热点教程</span></div> | | | <ul> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="http://www.zzarea.com/">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="http://bbs.zzarea.com">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | <li><img src="img/1.jpg" width="90" height="60px" /><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><p>这里是这篇文章的摘要区域,站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程站长地带原创教程</p></li> | | | | | | | | | </ul> | | | </div> | |
CSS代码：
| <style type="text/css"> | | | *{ | | | margin:0px; | | | padding:0px; | | | } | | | body{ | | | font-size:12px; | | | font-family:"微软雅黑"; | | | } | | | .a1{ | | | width:300px; | | | border:1px solid #CCCCCC; | | | margin:30px auto; | | | | | | } | | | | | | .a2{ | | | height:40px; | | | line-height:40px; | | | background-color:#f5f5f5; | | | border-top:2px solid #0066FF; | | | border-bottom:1px solid #CCCCCC; | | | } | | | .a2 span{ | | | font-size:16px; | | | font-weight:bold; | | | padding-left:18px; | | | } | | | ul{ | | | list-style:none; | | | padding:10px; | | | } | | | li{ | | | height:65px; | | | border-bottom:1px dashed #CCCCCC; | | | overflow:hidden; | | | padding-top:10px; | | | | | | | | | } | | | li a{ | | | color:#000000; | | | text-decoration:none; | | | | | | } | | | li a:hover{ | | | color:#FF0000; | | | } | | | li img{ | | | float:left; | | | margin-right:8px; | | | } | | | li a{ | | | | | | } | | | li p{ | | | color:#999999; | | | } | | | </style> | |
站长地带（www。zzarea。com）原创教程，转载请注明出处
