CSS学习笔记-----简单的列表和背景图片

最新推荐文章于 2024-05-23 17:56:03 发布

庄公梦蝶

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量457

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u014548034/article/details/40889929

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<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>

庄公梦蝶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记-----简单的列表和背景图片

简单列表和背景图片 *{ margin:0px; padding:0px; } ul.topic_show{ list-style:none; border:#999 1px solid; width:250px; } ul.topic_show li{ /*第一个值表示上下间距，第二个值表示左右间距，不过建议用span*/ /*
复制链接

扫一扫