<html>
<head>
<title>简单列表和背景图片</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul.topic_show{
list-style:none;
border:#999 1px solid;
width:250px;
}
ul.topic_show li{
/*第一个值表示上下间距,第二个值表示左右间距,不过建议用span*/
/* padding:9px 0px; */
font-size:12px;
color:#555;
height:25px;
background:url("3.jpg") no-repeat;/*no-repeat表示不填充,还有repeat-x,和repeat-y*/
background-position:10px 9px; /*第一个值是左右,第二个值是上下*/
}
ul.topic_show li span{
position:relative;
top:5px;
left:20px;
}
ul.topic_show h3{
background:#111155;
height:30px;
font-size:14px;
color:#fff;
}
ul.topic_show h3 span{
position:relative;
top:8px;
left:10px;
}
</style>
<body>
<div style="margin:50px">
<ul class="topic_show">
<h3><span>通知公告</span></h3>
<li><span>关于房屋住房问题改革的若干意见</span></li>
<li><span>关于房屋住房问题改革的若干意见</span></li>
<li><span>关于房屋住房问题改革的若干意见</span></li>
<li><span>关于房屋住房问题改革的若干意见</span></li>
<li><span>关于房屋住房问题改革的若干意见</span></li>
<li><span>关于房屋住房问题改革的若干意见</span></li>
<li><span>关于房屋住房问题改革的若干意见</span></li>
</ul>
</div>
</body>
</html>
CSS学习笔记-----简单的列表和背景图片
最新推荐文章于 2024-10-01 23:20:42 发布