简约的导航条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>米酥导航</title>
	<link rel="icon" href="https://ask.qcloudimg.com/draft/4109746/jgie69ye0u.png">
	<style type="text/css" media="screen">
		*{
		 	margin: 0;
            padding: 0;
		}
		.phptp1_header{
            width: 100%;
            height: 71px;
            background: #fff;
            border-bottom: 1px solid #ccc;
		}
		.header-container{
			width: 1100px;
			height: 70px;
			margin: 0 auto;
			box-sizing: border-box;
		}
		.logo{
			margin-top: 22.5px;
			width: 72px;
			height: 25px;
			background-size: 72px 25px;
			background-image: url('https://ask.qcloudimg.com/draft/4109746/je3dqffi64.png');
			display: inline-block;
		}
		.nav-link-container{
			display: inline-block;
			width: 60px;
			height: 26px;
			margin-left: 10px;
			margin-bottom: -1px;
		}
		.nav-link{
			float: left;
			font-size: 10px;
			color: #ccc;
			text-decoration: none;
			width: 78px;
			font-weight: 300;
			line-height: 13px;
		}
		.nav-list{
			width: 788px;
			height: 70px;
			float: right;
		}
		li{
			float: left;
			display: inline-block;
			height: 70px;
			line-height: 70px;
			padding: 0 20px;
		}
		.shouye{
			padding: 0 20px;
		}
		.shouye a,.shangjia a:hover,.xiaofei a:hover,.kaifang a:hover,.fuwu a:hover,.qudao a:hover {
			color: #FF4444 !important;
		}
		a{
			text-decoration: none;
		}
		ul a{
			color: #000;
		}
		.login_common_{
			padding: 0px 0px 0px 20px;
		}
 		.btn-login{
 			width: 80px;
 			height: 30px;
 			line-height: 28px;
 			display: inline-block;
 			border: 1px solid #2b90ed;
 			text-align: center;
 			color: #2b90ed;
 			border-radius: 2px;
 			box-sizing: border-box;
 		}
 		.btn-login:hover{
 			background-color: #2b90ed;
 			color: #fff;
 		}
 		.register_common_{
 			padding: 0 0 0 10px;
 		}
 		.btn-register_{
 			width: 80px;
 			height: 30px;
 			line-height: 30px;
 			display: inline-block;
 			background-color: #2b90ed;
 			text-align: center;
 			color: #fff;
 			border-radius: 2px;
 			box-sizing: border-box;
 		}
 		.btn-register_:hover{
 			background-color: #5CB0FD;
 		}
	</style>
</head>
<body>
	<div class="phptp1_header">
		<div class="header-container">
			<a class="logo"></a>
			<div class="nav-link-container">
				<a href="" class="nav-link">美国上市代码</a>
				<a href="" class="nav-link">97233&nbsp;US</a>
			</div>
			<ul class="nav-list">	
				<li class="shouye"><a href="#" class="product-center">首页</a></li>
				<li class="shangjia"><a href="#" class="product-center">商家服务</a></li>
				<li class='xiaofei'><a class="product-center" href="#">消费者</a></li>
				<li class="qudao"><a href="#" class="product-center">渠道合作</a></li>
				<li class="kaifang"><a class="product-center" href="#">开放平台</a></li>
				<li class="fuwu"><a class="product-center" href="#">更多服务</a></li>
				<li class="login_common_"><a class="btn-login" href='#'>登陆</a></li>
				<li class="register_common_"><a class="btn-register_" href='#'>注册</a></li>
			</ul>
		</div>
	</div>
</body>
</html>
猜你喜欢
