<div class="box">
<h2>新闻列表</h2>
<ul>
<li><a href="#">外交部:中医药抗疫获得越来越多国际认可</a></li>
<li><a href="#">外交部:中医药抗疫获得越来越多国际认可</a></li>
<li><a href="#">外交部:中医药抗疫获得越来越多国际认可</a></li>
<li><a href="#">外交部:中医药抗疫获得越来越多国际认可</a></li>
<li><a href="#">外交部:中医药抗疫获得越来越多国际认可</a></li>
<li><a href="#">外交部:中医药抗疫获得越来越多国际认可</a></li>
</ul>
</div>
<style type="text/css">e
body{
font-size: 14px;
color: #f90;
}
.box{
width: 400px;
border: 1px solid #ccc;
margin-left: auto;
margin-right: auto;
}
.box h2{
height: 40px;
line-height: 40px;
color: red;
}
.box ul li{
list-style: none;
border: 1px solid #ccc;
height: 30px;
line-height: 30px;
background-image: url(./images/jiantou.jpg);
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;/*盒子里面的内容到左边边框线的距离就称之为左内填充*/
}
/*对超级链接进行美化*/
a:link,a:visited{
color: #333;
text-decoration: none;
}
a:hover{
color: #f00;
}
</style>
转载请注明:大灰牛博客 » css背景样式属性综合案例