继续上一节《纯文字的新闻列表制作》,本节站长地带(www.zzarea.com)主要是对做一个带背景图标的新闻列表,请看:
本节主要考察的是背景图片的定位问题,用的是background-position,复习请看:http://www.zzarea.com/css/37.html
HTML代码:
<div class="a1"> |
|
<div class="a2"><span>热点教程</span></div> |
|
<ul> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="http://www.zzarea.com/css">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
<li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li> |
|
|
|
</ul> |
|
</div> |
|
这一点和上一节无图标的新闻列表是一样的,具体可以看:http://www.zzarea.com/css/42.html
CSS代码:
<style type="text/css"> |
|
*{ |
|
margin:0px; |
|
padding:0px; |
|
} |
|
body{ |
|
font-size:12px; |
|
font-family:"微软雅黑"; |
|
} |
|
.a1{ |
|
width:280px; |
|
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; |
|
} |
|
</style> |
|
红色部分就是本节的重点位置,就是背景图片的定位问题,因为有了背景,所以盖住了部分文字,故使用padding-left将文字往右移动了点。站长地带(www。zzarea。com)原创教程,转载请注明出处
本文链接:
https://www.dnwfb.com/970.html,转载请注明出处。
评论0