<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻列表综合案例</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:298px;
height:228px;
border:1px solid #ccc;
margin:100px auto;
padding:15px;
}
.box h2{
font-size:18px;
padding:5px 0;
border-bottm:1px solid #ccc;
margin-bottom:10px;
}
li{
list-style:none;
}
.box ul li {
height:30px;
line-height:30px;
border-bottom:1px dashed #ccc;
background:url(插入图片的路径) no-repeat 5px center;
/**background-position: 5px center; padding-left:20px为消除文字压住图片的效果,因为该li没有宽度,所以不会让盒子塌陷*/
}
.box ul li a {
color:#333;
font-size:12px;
text-decoration:none;
margin-left: 20px;/**mardin padding-left: 20px;为消除文字压住图片的效果*/
}
.box ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h2>最新文章 New Articles</h2>
<ul>
<li><a href="#">1123456489</a></li>
<li><a href="#">2131469872</a></li>
<li><a href="#">31649+3158</a></li>
<li><a href="#">41649+3158</a></li>
<li><a href="#">51649+3158</a></li>
</ul>
</div>
</body>
</html>
CSS学习之新闻列表综合案例
最新推荐文章于 2023-03-10 18:27:01 发布