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><