简单的头部导航练习
意外2019-04-15 16:10:30223<!DOCTYPE html>
<html>
<head>
<title>头部导航练习</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}
/*浮动:将div向右浮动,然后将div里面的元素向左浮动;不然里面的队列只会向反方向浮动排列的;*/
/*头部样式*/
.header{background: #333;width: 100%;height: 40px;}
.menu{width: 1200px;height: 40px;margin: 0 auto;;line-height: 40px;font-size: 12px;}
.header_left li{float:left;line-height: 40px; font-size: 13px;}
.header_right{float: right;}
.header_right li{float: left;line-height: 40px;font-size: 13px;}
.menu li span{margin: 0px 10px; color: #6d6c69}
.header_left a:hover{color:red; }
.header_right_li{width: 120px;height: 40px;text-align: center;background:#424242;color:#aaa;margin-left: 10px;position: relative;}
.header_right_li div{position: absolute;width: 270px;height: 80px;background: #fff;right: 0px;display: none;z-index: 2;}
.header_right_li:hover div{display: block;}
.header_right_li:hover{background: #fff;}
.header_right_li:hover a{color: #ff6a00;}
.header_right li a[href="#"]:hover{color: red;}
</style>
</head>
<body>
<div class="header">
<div class="menu">
<ul class="header_left">
<li><a>小米商城</a><span>|</span></li>
<li><a>MIU</a><span>|</span></li>
<li><a>IOT</a><span>|</span></li>
<li><a>云服务</a><span>|</span></li>
<li><a>小爱分享平台</a><span>|</span></li>
<li><a>金融</a><span>|</span></li>
<li><a>有品</a><span>|</span></li>
<li><a>企业服务</a><span>|</span></li>
<li><a>SelectRegion</a></li>
</ul>
<div class="header_right">
<ul>
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">我的订单</a></li>
<li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i> 购物车 ( 0 )</a>
<div>购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>