css写简单导航

 

简单的导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			ul,li{
				list-style:none;
			}
			a{
				text-decoration: none;
			}
			nav{
				width:600px;
				margin:50px auto;
			}
			nav ul{
				width:100%;
				display:flex;
			}
			nav li{
				flex:1;
				text-align: center;
				width:60px;
				margin-right:10px;
			}
			.item-list{
				display:block;
				color: #0099fb;
			    font-size: 16px;
			    position: relative;
			}
			.item-list:before{
				position:absolute;
				left:0;
				top:-4px;
				width:100%;
				height:2px;
				content:"";
				background:#fff;
			}
			.item-list:after{
				position:absolute;
				left:0;
				bottom:-4px;
				width:100%;
				height:2px;
				content:"";
				background:#fff;
			}
			nav li a:hover{
				color:red;
			}
			nav li a:hover::before{
				/*position:absolute;
				left:0;
				top:-4px;
				width:100%;
				height:2px;
				content:"";*/
				background:red;
			}
			nav li a:hover::after{
				/*position:absolute;
				left:0;
				bottom:-4px;
				width:100%;
				height:2px;
				content:"";*/
				background:red;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a class="item-list">指南</a>
				</li>
				<li>
					<a class="item-list">组件</a>
				</li>
				<li>
					<a class="item-list">实践</a>
				</li>
				<li>
					<a class="item-list">概览</a>
				</li>
				<li>
					<a class="item-list">iView Cli</a>
				</li>
				<li>
					<a class="item-list">GitHub</a>
				</li>
			</ul>
		</nav>
	</body>
</html>
posted @ 2018-05-10 16:53  zy1314  阅读(156)  评论(0)  编辑  收藏  举报