摘要：<!doctype html><html><meta charset="utf-8"><title>常用導(dǎo)航布局案例-作業(yè)</title><!-- <link rel="stylesheet" type="text/css" href="index.css&
<!doctype html>
<html>
<meta charset="utf-8">
<title>常用導(dǎo)航布局案例-作業(yè)</title>
<!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<style type="text/css">
/*index.css*/
*{margin:0px;padding:0px;}
a{color:#999999;font-size:12px;text-decoration:none;}
.clear{clear:both;}
#header{width:100%;height:30px;background-color:#E3E4E5;}
.header_content{width:1000px;/*height:30px;*/line-height:30px;margin:0px auto;/*background-color:pink;*/}
.header_content a:hover{color:#F10215;}
.header_left{height:30px;float:left;}
.header_right{height:30px;width:720px;float:right;/*background-color:yellow;*/}
.header_right ul li{list-style:none;line-height:30px;width:75px;text-align:center;float:left;}
.tb_span{display:line-block;margin-left:5px;color:#999999;font-size:1px;line-height:1px;}
.header_menu:hover{background:#fff;}
.address_content{display:none;color:#999999;width:80px;height:60px;}
.header_left div:hover .address_content{display:block;}
.address_content ul li{width:40px;height:30px;float:left; list-style:none;font-size:12px;text-align:center;}
.address_content ul li:hover{background-color:#f4f4f4; }
.address_content ul li a{display:block;}
.address_ac a{background-color:#F10215;color:#fff;}
.address_ac a:hover{color:#fff;}
/* 導(dǎo)航中間一個小小的 | 線做不出那個效果.....*/
</style>
<body>
<div id='header'>
<div class='header_content'>
<div class='header_left'>
<div class='header_menu' style='width:60px;text-align:center;'>
<span class='fa fa-map-marker' style='color:#F10215'></span> <a>北京</a>
<div class='address_content'>
<ul>
<li class='address_ac'><a href="">北京</a></li>
<li><a href="">上海</a></li>
<li><a href="">深圳</a></li>
<li><a href="">福建</a></li>
</ul>
</div>
</div>
</div>
<div class='header_right'>
<ul>
<li style='width:150px;'><a href="">你好,請登錄</a> <a style='color:#F10215' href="">免費注冊</a></li>
<li><a href="">我的訂單</a></li>
<li class='header_menu'><a href="">我的京東</a> <i class='fa fa-angle-down'></i></li>
<li><a href="">京東會員</a></li>
<li class='header_menu'><a href="">企業(yè)采購</a> <i class='fa fa-angle-down'></i></li>
<li class='header_menu'><a href="">客戶服務(wù)</a> <i class='fa fa-angle-down'></i></li>
<li class='header_menu'><a href="">網(wǎng)站導(dǎo)航</a> <i class='fa fa-angle-down'></i></li>
<li><a href="">手機京東</a></li>
</ul>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-01-13 14:00:08
老師總結(jié)：fa-angle-down, 'header_menu', 以后class風(fēng)格要統(tǒng)一起來, 不會一會用下劃線, 一會用連接線