CSS导航条从入门到精通_Bear的博客-程序员宅基地

1 css实现基本的横向导航条

html结构

	<body>
		<div id="top">
			<!-- 无序列表  包含4个列表项 -->
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">新闻</a>
				</li>
				<li>
					<a href="#">联系</a>
				</li>
				<li>
					<a href="#">关于</a>
				</li>
			</ul>
		</div>
	</body>

css设置

		<style type="text/css">
			
			#top{
				width: 1000px;
				margin: 0px auto;  /*div top 居网页中部*/
			}
			
			ul{
				list-style: none; /*清除原有的列表样式*/
			}
			
			ul li{
				float: left;  /*所有的列表项左浮动*/
			}
			
			/*a标签默认是内联元素，设置宽度和高度无效*/
			ul li a{
				width: 200px; 	/*宽度200*/
				height: 35px; 	/*高度35*/
				line-height: 35px; /*行高35  当行高==高度  内容垂直居中*/
				display: inline-block;/*改变a为块级元素，宽高生效*/
				background-color: #6495ED;
				text-align: center; /*内容水平居中*/
				color: white;
				font-weight: bold;
				font-size: 18px;
				text-decoration: none;
			}
			
			/*当鼠标在a标签上悬停时，改变a标签背景颜色*/
			ul li a:hover{
				background-color: #CC0000; /*鼠标悬浮改变背景色*/
			}
			
		</style>

2 css实现间隔的横向导航条

css设置：跟上一个案例的区别就是增加一个左距离

		<style type="text/css">
			
			#top{
				width: 1000px;
				margin: 0px auto;  /*div top 居网页中部*/
			}
			
			ul{
				list-style: none; /*清除原有的列表样式*/
			}
			
			ul li{
				float: left;  /*所有的列表项左浮动*/
			}
			
			/*a标签默认是内联元素，设置宽度和高度无效*/
			ul li a{
				width: 200px; 	/*宽度200*/
				height: 35px; 	/*高度35*/
				line-height: 35px; /*行高35  当行高==高度  内容垂直居中*/
				display: inline-block;/*改变a为块级元素，宽高生效*/
				background-color: #6495ED;
				text-align: center; /*内容水平居中*/
				color: white;
				font-weight: bold;
				font-size: 18px;
				text-decoration: none;
				margin-left: 15px; /*设置a标签之间的间隙，做成有间隔的导航条*/
			}
			
			/*当鼠标在a标签上悬停时，改变a标签背景颜色*/
			ul li a:hover{
                color:#EFFF00;  /*字体颜色变为黄色*/
				background-color: #CC0000; /*鼠标悬浮改变背景色*/
			}
		</style>

3 css实现垂直导航菜单

css设置

		<style type="text/css">
			
			body{
				background-color: #FFDEE0; /*为网页设置粉红色背景颜色*/
			}
			
			#top{
				width: 1000px;
				margin: 0px auto;  /*div top 居网页中部*/
			}
			
			ul{
				list-style: none; /*清除原有的列表样式*/
				margin: 0px;  /*清除掉外边距*/
				padding: 0px;  /*清除掉内边距*/
			}
			
			/*a标签默认是内联元素，设置宽度和高度无效*/
			ul li a{
				width: 150px; 	/*宽度150*/
				height: 35px; 	/*高度35*/
				line-height: 35px; /*行高35  当行高==高度  内容垂直居中*/
				display: inline-block;/*改变a为块级元素，宽高生效*/
				background-color: #C11136;
				color: white;
				font-size: 17px;
				text-decoration: none;
				padding-left: 15px; /*做内边距设置为15*/
				margin-top: 1px;    /*菜单与菜单之间的间隙*/
				border-left: 15px solid #711515; /*左边框较厚*/
				border-right: 1px solid #711515; /*右边框较薄*/
			}
			
			/*当鼠标在a标签上悬停时，改变a标签背景颜色*/
			ul li a:hover{
				color: #FFFF00;  /*字体颜色变为黄色*/
				background-color: #990020; /*鼠标悬浮改变背景色*/
			}
			
		</style>

4 不规则的横向导航栏

html网页内容

	<body>
		<div id="top">
			<ul>
				<li style="margin-left: 0px;">
					<span class="one"></span>  <!-- 左边图形 -->
					<a href="#" class="two">首页</a>  <!-- 中间文字 -->
					<span class="three"></span>   <!-- 右边图形 -->
				</li>
				<li>
					<span class="one"></span>
					<a href="#" class="two">公司简介</a>
					<span class="three"></span>
				</li>
				<li>
					<span class="one"></span>
					<a href="#" class="two">项目展示</a>
					<span class="three"></span>
				</li>
				<li>
					<span class="one"></span>
					<a href="#" class="two">企业架构与企业文化</a>
					<span class="three"></span>
				</li>
				<li>
					<span class="one"></span>
					<a href="#" class="two">项目展示</a>
					<span class="three"></span>
				</li>
				<li>
					<span class="one"></span>
					<a href="#" class="two">联系我们</a>
					<span class="three"></span>
				</li>
			</ul>	
			
			
			<div id="icon">
				<a href="#" id="icon1">分享到：</a>	
				<a href="#" id="icon2">QQ好友</a>
				<a href="#" id="icon3">QQ空间</a>
				<a href="#" id="icon4">腾讯微博</a>
				<a href="#" id="icon5">新浪微博</a>
				<a href="#" id="icon6">百度贴吧</a>
			</div>
		</div>
		
	</body>

css设置

		<style type="text/css">
			*{       /*清除网页中的默认格式*/
				margin:0; 
				padding:0; 
				list-style:none; 
				outline:none;
			 }   
			
			body{      /*设置网页上的默认字体和大小*/
				font-size:16px; 
				font-family:"微软雅黑";
				}   
			
			#top{
				margin: 0px auto;  /*居网页水平方向中间*/
				width: 1000px;
				padding-top: 30px;
			}
			
			ul li{
				float: left;  /* 列表项左浮动*/
				height: 30px;
				line-height: 30px;
				margin-left: -15px;  /*设置左外边距为负值，实现交叉效果*/
			}
			
			ul li a{
				display: block; /* 设置为块级元素 */
				text-decoration: none;
				color: gray;
			}
			
			.one{
				width: 23px;
				height: 30px;
				background: url(img/bar4.png) no-repeat;  /*左边图形*/
				float: left;  /*左浮动才能在一排*/
			}
			
			.two{
				height: 27px; /*设置为27，因为border-top占了3*/
				background-color: #f1f1f1;
				border-top: 3px solid #bcbcbc; /*设置上框线与左右图形保持一致*/
				float: left;  /*左浮动才能在一排*/
			}
			
			.three{
				width: 23px;
				height: 30px;
				background: url(img/bar2.png) no-repeat; /*右边图形*/
				float: left;  /*左浮动才能在一排*/
			}
			
			/* 鼠标悬停时候的图形和背景切换 */
			ul li:hover .one{
				background: url(img/bar3.png) no-repeat;
			}
			
			ul li:hover .two{
				background:#42dcfb; 
				border-top:3px solid #3bbbd5; 
				color:whitesmoke;
			}
			
			ul li:hover .three{
				background: url(img/bar1.png) no-repeat;
			}
			
			
			#icon{
				padding-left: 15px;
				clear: both; /* 清除浮动，这样能够在第二排  */
				width: 620px;
				height: 35px;
				line-height: 35px;
				background-color: #F1F1F1;
				border-top: 5px solid #3BBBD5;
			}
			
			#icon a{
				padding-left: 20px; /* 文字居图标的右边 */
				margin-left: 10px;
				height: 16px;
				font-size: 12px;
				text-decoration: none;
			}
			
			/* css雪碧图技术， 每个图标的规格是16x16 */
			#icon1{
				background: url(img/1.png) no-repeat left 0;
			}
			
			#icon2{
				background: url(img/1.png) no-repeat left -16px;
			}
			
			#icon3{
				background: url(img/1.png) no-repeat left -32px;
			}
			
			#icon4{
				background: url(img/1.png) no-repeat left -48px;
			}
			
			#icon5{
				background: url(img/1.png) no-repeat left -64px;
			}
			
			#icon6{
				background: url(img/1.png) no-repeat left -80px;
			}
		</style>

5 css实现背景图片导航栏

html网页内容：

	<body>
		<div id="top">
			<a href="#" id="register"></a>
			<a href="#" id="login"></a>
			<a href="#" id="open"></a>
		</div>
	</body>

css设置

		<style type="text/css">
			
			/*图片规格105x50 92x50 103x50  3张图，合计300x50*/
			
			#top{
				width: 300px;
				height: 50px;
				margin: 0px auto;
			}
			
			#top a{
				display: blcok;
				height: 50px;
				float: left;  /*必须左浮动，背景图片才能出来*/
			}
			
			#register{
				background: url(img/login.jpg);
				width: 105px;
				background-position: 0 0;
			}
			
			#register:hover{
				background: url(img/login.jpg);
				background-position: 0 -50px;
			}
			
			#login{
				background: url(img/login.jpg);
				width: 92px;
				background-position: -105px 0;
			}
			
			#login:hover{
				background: url(img/login.jpg);
				width: 94px;
				background-position: -103px -50px; /*多取左边2个像素进来*/
				margin-left: -2px;  /*左移2个像素*/
			}
			
			#open{
				background: url(img/login.jpg);
				width: 103px;
				background-position: -197px 0;
			}
			
			#open:hover{
				background: url(img/login.jpg);
				width: 105px;
				background-position: -195px -50px;  /*多取左边2个像素进来*/
				margin-left: -2px;      /*左移2个像素*/
			}
			
		</style>

以上案例所有源码截图如下：

打包下载地址：

HTML 导航栏从入门到精通源码

本文链接：https://blog.csdn.net/bear_huangzhen/article/details/89878671

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python 抢购并发_解决php抢购秒杀抽奖等大流量并发入库导致的库存负数的问题(非/阻塞模式)..._weixin_39689347的博客-程序员宅基地

解决php抢购秒杀抽奖等大流量并发入库导致的库存负数的问题(非/阻塞模式)分类：PHP_Python| 发布：佚名| 查看： | 发表时间：2014/7/16我们知道数据库处理sql是一条条处理的，假设购买商品的流程是这样的：sql1:查询商品库存if(库存数量 > 0){//生成订单...sql2:库存-1}当没有并发时，上面的流程看起来是如此完美，假设同时两个人下单，而库存只有1个了，在...

案例：筋斗云动画效果（导航栏动画）_杨蛋蛋~R的博客-程序员宅基地

筋斗云动画效果利用动画函数做动画效果原先筋斗云起始位置为0鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可鼠标离开某个li ，就把目标值设为0如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置 <style> * { padding: 0; margin: 0; } li, a { text-decoration: none;

Matlab 捕获异常_throwascaller_bible_reader的博客-程序员宅基地

介绍了Matlab的错误处理方式。

什么是ISAPI？_极客行天下的博客-程序员宅基地

　　为了成功运行ajax.net，根据网上的资料，我在配置文件中写了这样一些信息： httpHandlers> remove verb="*" path="*.asmx"/> add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFa

java学生管理系统界面简单实现<一>_java学生信息管理系统窗口_sunlanchang的博客-程序员宅基地

学生管理系统简单的实现，供初学Java Swing同学学习使用。import java.awt.Dimension;import java.awt.Toolkit;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import javax.swing.JButton;import javax.swin

Nginx 系列学习之——多路IO复用_nginx多路复用_茶叶丨丿氵未的博客-程序员宅基地

ps：最近在学习nginx，为防止一些定义混淆或是遗忘，也是为了方便未来应对相关业务场景时的翻阅，于是特地来csdn上记录一些新学习到的知识技术，以便成长。文章内部或许会引用许多百度上的相关知识内容、博客或百科的文章片段，在下提前在这里对大家说声抱歉....首先介绍下几个定义1、IO多路复用什么是IO多路复用呢？我们先假设这样一个场景，假设你现在有一个网站，某一天有一大群人突...