CSS-设置列表样式

最新推荐文章于 2024-06-11 16:06:12 发布

原创最新推荐文章于 2024-06-11 16:06:12 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

CSS基础专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用CSS来定制列表的符号，包括文字符号和图像符号，并展示了如何运用这些技巧创建一个简单的导航菜单，提供了运行效果示例。

1、设置列表的符号


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置列表的符号</title>
<style type="text/css">
	ul,ol{
		list-style-type: square;
	}
</style>
</head>
<body>
<ul>
	<li>主页</li>
	<li>我的博客</li>
	<li>我的相册</li>
	<li>留言</li>
	<li>关于我</li>
</ul>

<ol>
	<li>主页</li>
	<li style="list-style-type: circle;">我的博客</li>
	<li>我的相册</li>
	<li>留言</li>
	<li style="list-style-type: none;">关于我</li>
</ol>
</body>
</html>

运行结果：
在这里插入图片描述
2、设置列表图片符号


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置列表图片符号</title>
<style type="text/css">
	ul,ol{
		list-style-image: url("../li.png");
	}
</style>
</head>
<body>
<ul>
	<li>主页</li>
	<li>我的博客</li>
	<li style="list-style-image: url('../image.png');">我的相册</li>
	<li>留言</li>
	<li>关于我</li>
</ul>

<ol>
	<li>主页</li>
	<li>我的博客</li>
	<li>我的相册</li>
	<li>留言</li>
	<li>关于我</li>
</ol>
</body>
</html>

运行结果：
在这里插入图片描述
3、创建简单导航菜单


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建简单导航菜单</title>
<style type="text/css">
#navigation {
	width:120px;
	font-family:Arial;
	font-size:14px;
	text-align:right
}	

#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	border-bottom:1px solid #9F9FED;	/* 添加下划线 */
}
#navigation li a{
	display:block;
	height:1em;
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
	background-color:#1136c1;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#002099;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
	<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>
	</ul>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建简单导航菜单</title>
<style type="text/css">
#navigation {
	font-family:Arial;
	font-size:14px;
	text-align:center;
}	

#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	border-bottom:1px solid #9F9FED;	/* 添加下划线 */
	float: left;
}
#navigation li a{
	width:120px;
	display:block;
	height:1em;
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
	background-color:#1136c1;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#002099;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
	<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>
	</ul>
</div>
</body>
</html>

运行结果：
在这里插入图片描述