css---使用列表和列表属性创建纵向菜单

最新推荐文章于 2022-06-30 19:32:56 发布

chen_zan_yu_

最新推荐文章于 2022-06-30 19:32:56 发布

阅读量2.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/90515213

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用列表及css属性创建纵向菜单</title>
		<style type="text/css">
			body{
				margin: 10px;
				font-size: 12px;
				text-align: center;
				font-family: verdana,geneva,sans-serif;
				
			}
			#menu{
				width: 100px;
				border: 1px solid #ccc/*设置菜单得边框
				                        */
			}
			#menu ul{
				margin: 0px;/*ul上下外边框默认为12px，重置ul的默认外边框样式*/
				padding: 0px;/*ul的左内边距默认为40px，重置ul的默认内边框样式*/
				list-style-type: none;/*设置列表的项目符号*/
			}
			#menu ul li{
				padding: 12px 0px;
				background:#eee;
				border-bottom: 1px solid #ccc;
				
			}
			#menu ul li.last{
				border-bottom: 0px;/*将最后一个列表项的下边框取消*/
			}
			a:link{
				/*
				 * 使用伪代码设置未访问状态
				 */
				color: #000;
				text-decoration: none;
			}
			a:hover{
				/*使用伪类设置鼠标选停状态样式*/
				color: #f00;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a href="#">菜单项1</a></li>
				<li><a href="#">菜单项2</a></li>
				<li><a href="#">菜单项3</a></li>
				<li><a href="#">菜单项4</a></li>
				<li><a href="#">菜单项5</a></li>
				<li class="last"><a href="#">菜单项6</a></li>
			</ul>
		</div>

	</body>
</html>

效果：

chen_zan_yu_

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css---使用列表和列表属性创建纵向菜单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用列表及css属性创建纵向菜单</title> <style type="text/css"> body{ margin: 10px; font-size:...
复制链接

扫一扫