欢迎光临
我们一直在努力

CSS | 水平导航栏案例代码

文章目录

通过HTML实战五个导航栏,下面是五个案例和演示效果,中间用到了元素类型转换、北京渐变(CSS3)、选择器、文本属性、盒子属性等知识点。

案例 一

<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	ul{
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	.nav{
		margin: 30px auto;
		width: 480px;
		height: 36px;
		border-bottom: 1px solid #9f9f9f;
		padding-top: 4px;
	}
	.nav li a{
		display: block;
		float: left;
		text-align: center;
		margin-left: 10px;
		
		padding: 0px 14px;;
		height: 35px;
		line-height: 35px;
		border: 1px solid #d4d4d4;
		border-bottom: none;
		color: #9f9ca0;
		background-color: #f7f7f7;
	}
	.nav li a:hover{
		height: 40px;
		margin-top: -4px;
		border: 1px solid #9e9e9e;
		border-bottom: none;
		background-color: #fff;
	}
	.nav ul li .begin{
		margin-left: 39px;
	}
</style>
<div class="nav">
	<ul>
		<li><a href="" class="begin">tab one</a></li>
		<li><a href="">tab two</a></li>
		<li><a href="">tab three</a></li>
		<li><a href="">tab fore</a></li>
	</ul>
</div>

效果图

案例 二

<style type="text/css">
	*{margin: 0;padding: 0;}
	ul{list-style: none;}
	a{text-decoration: none;}
	
	.nav{
		width: 492px;
		height: 48px;
		background-color: #f6f6f6;
		margin: 30px auto;
		border-bottom: 5px solid #f3f3f3;
	}
	.nav ul{
		
	}
	.nav ul li{
		float: left;
	}
	.nav ul li a{
		display: block;
		height: 47px;
		width: 81px;
		background-color: #fcfcfc;
		border-right: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
		line-height: 47px;
		color: #402f37;
		font-size: 13px;
		text-align: center;
	}
	.nav ul li a:hover{
		color: #0099a3;
	}
	.nav ul li:hover{
		border-bottom: 5px solid #0000fe;
	}
</style>
<div class="nav">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a></li>
	</ul>
</div>

效果图

案例 三

<style type="text/css">
	*{margin: 0;padding: 0;}
	ul{list-style: none;}
	a{text-decoration: none;}
	
	.nav{
		width: 980px;
		height: 20px;
		margin: 30px auto;
		border-bottom: 8px solid #df4e19;
		padding-top: 14px;
	}
	.nav ul li{
		float: left;
		border-right: 1px solid #fff;
	}
	.nav ul li:first-child{
		padding-left: 10px;
	}
	.nav ul li a{
		display: block;
		text-align: center;
		line-height: 20px;
		height: 20px;
		width: 80px;
		background-color: #dfdfdf;
		font-size: 12px;
	}
	.nav ul li b{
		color: #6d6d6d;
	}
	.nav ul li span{
		color: #fff;
		display: none;
	}
	.nav ul li a:hover{
		background-color: #df4e19;
	}
	.nav ul li a:hover b{
		display: none;
	}
	.nav ul li a:hover span{
		display: inherit;
	}
</style>
<div class="nav">
	<ul>
		<li><a href="#"><span>首&nbsp;页</span><b>home</b></a></li>
		<li><a href="#"><span>首&nbsp;页</span><b>home</b></a></li>
		<li><a href="#"><span>首&nbsp;页</span><b>home</b></a></li>
		<li><a href="#"><span>首&nbsp;页</span><b>home</b></a></li>
		<li><a href="#"><span>首&nbsp;页</span><b>home</b></a></li>
		<li><a href="#"><span>首&nbsp;页</span><b>home</b></a></li>
	</ul>
</div>

效果图

案例 四

<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}

.nav{
	width: 975px;
	height: 36px;
	background-color: #dadada;
	background-image: linear-gradient(#ebebeb 1%, #c9cfcd 2%,#dddddd 66%,#c9cfcd 67%,#f5dd35 69%, #ffef47 71%,#fce209 75%,#ffe111 96%,#d4b962 98%,#fffda2);
	margin: 30px auto;
	border-top: 2px solid #a8a8a8;
}
.nav ul{
	padding-left: 5px;
}
.nav li{
	float: left;
	margin-right: 20px;
}
.nav li a{
	display: block;
	width: 62px;
	height: 26px;
	background-color: transparent;
	text-align: center;
	font-size: 13px;
	line-height: 26px;
	color: #6f787f;
}
.nav li a:hover{
	color: #fff;
	height: 32px;
	margin-top: -6px;
	background-image: linear-gradient(#f3dc34 1%, #fdf147 2%,#ffe011 4%,#fbde16 50%,#f5e21a);
}
</style>
<div class="nav">
	<ul>
		<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>
</div>

效果图

案例 五

<style type="text/css">
	*{margin: 0;padding: 0;}
	ul{list-style: none;}
	a{text-decoration: none;}
	.nav{
		width: 978px;
		height: 37px;
		background-color: #dadada;
		background-image: linear-gradient(#f2f2f2 1%, #dedede 49%,#d6d6d6 51%,#c1c1c3 100%);
		margin: 30px auto;
		border-bottom: 5px solid #fdaf17;
	}
	.nav ul{
		
	}
	.nav li{
		float: left;
		border-right: 1px solid #a8a6ab;
		border-left: 1px solid #dadadc;
	}
	.nav li a{
		display: block;
		width: 149px;
		height: 37px;
		background-color: transparent;
		text-align: center;
		font-size: 12px;
		line-height: 37px;
		color: #6c5f4e;
	}
	.nav li a:hover{
		background-color: #fdaf17;
	}
	.nav li:first-child{
		margin-left: none;
	}
	.nav li:last-child{
		border-right: none;
	}
</style>
<div class="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
	</ul>
</div>

效果图

赞(1) 打赏
未经允许不得转载:散人研 » CSS | 水平导航栏案例代码
分享到: 更多 (0)

评论 抢沙发

2 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏