上一节讲了《带图标的新闻列表制作》，站长地带继续加深学习，带日期的新闻列表制作，如下图：
和上一节最大的区别，就是新闻后面多了一个发布日期。这里考察的是前面的float属性的学习，请到如何学习CSS查看具体FLOAT教程
HTML代码：
| <div class="a1"> |
| |
<div class="a2"><span>热点教程</span></div> |
| |
<ul> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a> <span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="http://www.zzarea.com/css/">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></li> |
| |
<li><a href="#">CSS盒子模型：CSS盒子模型是什么意</a><span>11日</span></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:30px; |
| |
line-height:30px; |
| |
border-bottom:1px dashed #CCCCCC; |
| |
background:url(img/lzico.jpg) no-repeat 2px 10px; |
| |
padding-left:20px; |
| |
|
| |
|
| |
} |
| |
li a{ |
| |
color:#000000; |
| |
text-decoration:none; |
| |
|
| |
} |
| |
li a:hover{ |
| |
color:#FF0000; |
| |
} |
| |
li span{ |
| |
float:right; |
| |
color:#CCCCCC; |
| |
} |
| |
</style> |
|
站长地带（www。zzarea。com）原创教程，转载请注明出处
本文链接：
https://www.dnwfb.com/966.html，转载请注明出处。
评论0