CSS之——设置列表样式和创建导航菜单

最新推荐文章于 2024-05-06 00:47:49 发布

尘小新

最新推荐文章于 2024-05-06 00:47:49 发布

阅读量3k

点赞数

分类专栏： CSS HTML 文章标签： CSS 列表样式导航菜单

本文链接：https://blog.csdn.net/weixin_39941298/article/details/81180581

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

一、设置列表的符号

list-style-type: 属性；//设置列表样式

list-style-type: none; //清楚样式

属性有很多可以自己去试：circle，disc,decimal。。。。

二、设置列表图片符号

为ul,ol设置图片符号

ul,ol{
list-style-image: url("li.png")
}

代码：

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

显示效果：

三、创建简单导航菜单

<!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: center;
}
#navigation ul{
	list-style-type: none;
	margin:0px;
	padding:0px;
}

#navigation li{
	border-bottom:1px solid #9F9FED;   /* 添加下划线 */ 
	float: left;   /* 横向排列 */
} 
#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: #FFF;
}
#navigation li a:hover{				/* 鼠标经过时 */
	background-color: #002099;		/* 改变背景 */
	color: #ff0;					/* 改变文字颜色 */
}
</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>

尘小新

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS之——设置列表样式和创建导航菜单

一、设置列表的符号 list-style-type: 属性；//设置列表样式list-style-type: none; //清楚样式属性有很多可以自己去试：circle，disc,decimal。。。。二、设置列表图片符号为ul,ol设置图片符号ul,ol{ list-style-image: url("li.png")}代码：&l...
复制链接

扫一扫

专栏目录