我的小米导航条

abstract：<!DOCTYPE html> <html> <head> <title>小米官网导航条</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css

<!DOCTYPE html>
<html>
<head>
	<title>小米官网导航条</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		*{margin: 0;padding: 0}
		.nav{height:40px;width: 100%;background: #333333;}
		.nav_content{height: 40px;width:1250px;margin:0 auto;/*background: pink;*/}
		.nav-left{width: 720px;height:40px;/*background: pink;*/float: left}
		.nav-right{width: 300px;height:40px;/*background: pink;*/float: right}
		.nav-left a{color:#B0B0B0;font-size: 12px;text-decoration: none;line-height: 40px;margin-right: 10px}
		.nav-right a{color:#B0B0B0;font-size: 12px;text-decoration: none;line-height: 40px;margin-right: 10px}
		.right_1{display: inline-block;height: 40px;width: 120px;background:#424242;text-align: center; }
		.nav-left a:hover{color: white}
		.nav-right a:hover{color: white}
		.nav-right :hover.right_1{background: white;color: #FF6700}
		span{float: right;display: inline-block;width: 320px;height:100px;/*background:#ccc;*/line-height: 100px; 
		box-shadow:0px 1px 3px #AFADAD;display: none;}
		.nav-right :hover span{display: block;color:#000}
	</style>
</head>
<body>
<div class="nav">
	<div class="nav_content">
		<div class="nav-left">
			<a href="">小米商城</a>
			<a href="">MIUI</a>
			<a href="">IoT</a>
			<a href="">云服务</a>
			<a href="">金融</a>
			<a href="">有品</a>
			<a href="">小爱开放平台</a>
			<a href="">政企服务</a>
			<a href="">资质证照</a>
			<a href="">协议规则</a>
			<a href="">下载app</a>
			<a href="">Select Region</a>
			</ul>
		</div>
		<div class="nav-right">
			<a href="">登录</a>
			<a href="">注册</a>
			<a href="">消息通知</a>
			<a href="" class="right_1"><i class="fa fa-cart-plus" style="font-size: 16px;line-height: 40px"></i>&nbsp&nbsp购物车
			<span>购物车中还没有商品，赶紧选购吧！</span>
			</a>
		</div>
	</div>
</div>
</body>
</html>

关于box-shadow的使用还是不是很熟悉

Correcting teacher：西门大官人Correction time：2019-04-22 10:02:02
Teacher's summary：box-shadow是CSS中的阴影。不熟悉的话多查一下资料，多写几个案例就好了

我的小米导航条

Popular Entries