pc端导航效果

最新推荐文章于 2023-05-05 18:07:08 发布

倚楼听风雨的行者

最新推荐文章于 2023-05-05 18:07:08 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/qq_42972187/article/details/94893671

版权

这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		a {
			text-decoration: none;
		}
		
		li {
			list-style: none;
		}
		
		.bordrb {
			height: 40px;
			width: 800px;
			border-bottom: 8px solid #df4e19;
		}
		
		.bordrb li {
			text-align: center;
			width: 80px;
			float: left;
		}
		
		.bordrb li:hover span {
			display: block;
			background: #df4e19;
			color: #ffff;
		}
		
		.bordrb li:hover em {
			display: none;
		}
		
		em,
		span {
			padding: 10px 8px;
			font-style: normal;
			display: block;
			background: #dfdfdf;
			margin-right: 2px;
		}
		
		span {
			display: none;
		}
		
		.nav2 {
			width: 1000px;
			height: 34px;
			border-bottom: 8px solid yellow;
		}
		
		.nav2>li {
			width: 80px;
			float: left;
			height: 34px;
			background: gainsboro;
		}
		
		.nav2>li>a {
			text-decoration: none;
			display: block;
			background: gainsboro;
			height: 30px;
			text-align: center;
			line-height: 30px;
		}
		
		.nav2>li>a:hover {
			background: yellow;
			color: red;
			margin-top: -8px;
			line-height: 34px;
			height: 34px;
		}
		
		.nav2>li:hover {
			background: yellow;
			padding-top: 4px;
		}
		/*导航三*/
		
		.nav3 {
			width: 1000px;
			height: 36px;
			border-bottom: 1px solid gray;
		}
		
		.nav3>li {
			width: 80px;
			float: left;
			height: 35px;
			border: 1px solid gray;
			border-bottom: none;
			line-height: 34px;
			text-align: center;
			margin-right: 3px;
		}
		
		.nav3>li:hover {
			height: 40px;
			margin-top: -4px;
			background: #fff;
			border-color: black;
		}
		
		.nav4 {
			width: 1000px;
			height: 30px;
			background: #9a0000;
			margin-top: 20px;
		}
		
		.nav4>li {
			width: 108px;
			height: 100%;
			margin-right: 3px;
			float: left;
			line-height: 30px;
			text-align: center;
		}
		
		.nav4>li>a {
			color:#ffff;
		}
		.nav4>li:hover{
			background: bisque;
			color:red;
			background: url(images/nav3.jpg);
		}
		.nav4>li:hover a{
			color:red;
			background: url(images/jiao.jpg) no-repeat center top;
		}
		
	</style>

	<body>
		<ul class="bordrb">
			<li>
				<em>home</em>
				<span>首页</span>
			</li>
			<li>
				<em>home</em>
				<span>首页</span>
			</li>
			<li>
				<em>home</em>
				<span>首页</span>
			</li>
			<li>
				<em>home</em>
				<span>首页</span>
			</li>
			<li>
				<em>home</em>
				<span>首页</span>
			</li>
		</ul>
		<!--第二个导航-->
		<ul class="nav2">
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
		</ul>
		<!--导航三-->
		<ul class="nav3">
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab two</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
		</ul>
		<!--导航4-->
		<ul class="nav4">
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab one</a>
			</li>
		</ul>
	</body>

</html>

倚楼听风雨的行者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pc端导航效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> a { text-decoration: none; } li { list-styl...
复制链接

扫一扫