<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背景样式属性综合案例