摘要：<!DOCTYPE html> <html> <head> <title>小米官網(wǎng)導(dǎo)航條</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css
<!DOCTYPE html>
<html>
<head>
<title>小米官網(wǎng)導(dǎo)航條</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="">云服務(wù)</a>
<a href="">金融</a>
<a href="">有品</a>
<a href="">小愛(ài)開(kāi)放平臺(tái)</a>
<a href="">政企服務(wù)</a>
<a href="">資質(zhì)證照</a>
<a href="">協(xié)議規(guī)則</a>
<a href="">下載app</a>
<a href="">Select Region</a>
</ul>
</div>
<div class="nav-right">
<a href="">登錄</a>
<a href="">注冊(cè)</a>
<a href="">消息通知</a>
<a href="" class="right_1"><i class="fa fa-cart-plus" style="font-size: 16px;line-height: 40px"></i>  購(gòu)物車
<span>購(gòu)物車中還沒(méi)有商品，趕緊選購(gòu)吧！</span>
</a>
</div>
</div>
</div>
</body>
</html>關(guān)于box-shadow的使用還是不是很熟悉
批改老師：西門大官人批改時(shí)間：2019-04-22 10:02:02
老師總結(jié)：box-shadow是CSS中的陰影。不熟悉的話多查一下資料，多寫幾個(gè)案例就好了