H5——导航的制作、多个实例及效果

导航的制作

网页的头部使用ul >li >a 的组合去写，网页的尾部导航推荐使用div或者p或者a的组合去写。

实例

1.基础样式（鼠标滑动过后背景和字体颜色都变化）

<style type="text/css">
			*{
				margin:0px auto;
				padding: 0;
			}
			ul,li,a{
				list-style-type: none;
				list-style: none;
				text-decoration: none;
			}
			div{
				margin:30px auto;
				width: 400px;
				height: 40px;
			}
			.uone{
				width: 400px;
				height: 40px;
				background-color: #DC143C;
			}
			.uone li{
				width: 80px;
				height: 100%;
				float:left;
				padding: 0 10px;
				text-align: center;
			}
			.uone li a{
				line-height: 40px;
				color: #fff;
			}
			.uone li:hover{
				background-color: #e4e4e4;
			}
			.uone li:hover a{
				color: #DC143C;
			}
		</style>
		
		<div>
			<ul class="uone">
				<li><a href="">首页</a></li>
				<li><a href="">音频</a></li>
				<li><a href="">图片</a></li>
				<li><a href="">联系我们</a></li>
			</ul>
		</div>

2.当鼠标滑过的时候，英文变成中文的功能实现

            li里面中有一个a标签；
		    a标签里面需要放两个span标签，分别放有英文有中文，先display：none隐藏显示中文。
            鼠标滑过的时候使用display：block显示英文，并且display：none隐藏显示中文

（导航中英文切换的时候应该直接设置width，如果使用padding的话，由于中英文的长度不一样，会导致鼠标滑过的时候长度会出现缩放，导航栏整体移动。）

			.uone{
				width: 400px;
				height: 40px;
				background-color: #DC143C;
			}
			.uone li{
				width: 80px;
				height: 100%;
				float:left;
				padding: 0 10px;
				text-align: center;
			}
			.uone li a{
				line-height: 40px;
				color: #fff;
			}
			.uone li a span:first-child {
				display: block;
			}
			.uone li a span:last-child{
				display: none;
			}
			.uone li:hover{
				background-color: #e4e4e4;
			}
			.uone li:hover a{
				color: #DC143C;
			}
			.uone li:hover a span:first-child {
				display: none;
			}
			.uone li:hover  a span:last-child{
				display:block;
			}

3.当鼠标滑过的时候，背景渐变变化（1）
使用背景图的方式实现渐变背景（初学者使用）
截取一像素宽度的图片作为渐变背景，采用no-repeat 属性进行设置

.uone{
				width: 400px;
				height: 40px;
				background:url(img/1.png);
				background-size: 1px 40px;
			}

.uone li:hover{
				background-image: linear-gradient(#fff,#DC143C,#fff);
			}

4.当鼠标滑过的时候，背景渐变变化（2）

.uone li:hover{
				background-image: linear-gradient( to bottom ,#ffaa00 90%,#ff5500  10%);
			}

补充：vertical-align(垂直居中)：属性——top 、bottom、middle 、baseline(基线)
可以解决基线的问题。

5.当鼠标滑过的时候，li整体上移
（margin-top设置的正值会往下移动，设置负值会往上移动。 ）

.uone{
				width: 400px;
				height: 40px;
				background-size: 1px 40px;
				background: linear-gradient(to bottom ,#c7c7c7 80%,#DC143C 20%);
			}
			.uone li{
				width: 80px;
				height: 100%;
				float:left;
				padding: 0 10px;
				text-align: center;
			}
			.uone li a{
				line-height: 40px;
				color:#DC143C;
			}
			.uone li:hover{
				background-color: #DC143C;
				margin-top: -8px;
			}
			.uone li:hover a{
				color: #fff;
			}

6.背景是白色的情况下，可以使用，margin-right：1px 设置分割边框

.uone{
				width: 500px;
				height: 40px;
				background-size: 1px 40px;
			}
			.uone li{
				font-size:14px;
				width: 80px;
				height: 100%;
				float:left;
				padding: 0 10px;
				text-align: center;
				margin-right: 1px;
				background: linear-gradient(to bottom ,#c7c7c7 80%,#DC143C 20%);
			}
			.uone li a{
				line-height: 40px;
				color:#DC143C;
			}
			.uone li:hover{
				background-color: #DC143C;
				margin-top: -8px;
			}
			.uone li:hover a{
				color: #fff;
			}

总结

设计导航栏鼠标滑动效果的时候，可以结合着原有的背景颜色，可以调整li的距离，熟悉渐变的可以勇敢地尝试，多思考，就能玩出花样儿来。