菜单栏

最新推荐文章于 2023-04-16 22:48:03 发布

hoho_12

最新推荐文章于 2023-04-16 22:48:03 发布

阅读量371

点赞数

分类专栏：网页设计与制作文章标签： html 布局

本文链接：https://blog.csdn.net/hoho_12/article/details/52130759

版权

网页设计与制作专栏收录该内容

13 篇文章 1 订阅

订阅专栏

纵向菜单效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/zujian.css" />
	<body>
		<nav class="list1">
			<ul>
				<li><a href="#">shift</a></li>
<span style="white-space:pre">				</span><li><a href="#">color</a></li><span style="white-space:pre">	</span>
<span style="white-space:pre">				</span><li><a href="#">apple</a></li><span style="white-space:pre">	</span>
<span style="white-space:pre">				</span><li><a href="#">orange</a></li><span style="white-space:pre">	</span>
<span style="white-space:pre">				</span><li><a href="#">prosecute</a></li>					
			</ul>			
		</nav>		
	</body>
</html>

css

*{
	margin: 0;
	padding: 0;
}

nav{
	margin: 50px;
	width : 150px;
}

.list1 ul{
	border: 1px solid #f00;
	border-radius: 3px;
	padding: 5px 10px 3px;
}

.list1 li{
	list-style-type: none;
	padding: 3px 10px;
}
/*非首位子元素 选择符*/
.list1 li+li{
	border-top: 1px solid #f00;
}

/*为链接添加样式*/
.list1 a{
	text-decoration: none;
	font: 20px;
	font-weight: 400;
	color:#000;
	background: #ffed53;
}
.list1 a:hover{
	color: #069;
}

横向菜单效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/heng.css" />
	</head>
	<body>
		<nav class="list1">
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">JAVA</a></li>
				<li><a href="#">PHP</a></li>
			</ul>
		</nav>		
	</body>
</html>

.list1 ul{
	overflow:hidden;
}

.list1 li{
	float:left;
	list-style-type: none;
}

.list1 a{
	display: block;
	padding: 0 16px;
	text-decoration: none;
	color: #999;
}

.list1 li + li a{
	border-left: 1px solid #aaa;	
}
/*li + li a  除第一个链接之外的每个链接左侧都加一条竖线*/

.list1 a:hover{
	color: #555;
}