摘要：<!DOCTYPE html><html><head> <title>京东首页</title> <style type="text/css"> *{margin: 0;padding: 0;} body{font-size: 12px;background-color: #F0F3EF;} a{text-d
<!DOCTYPE html>
<html>
<head>
<title>京东首页</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-size: 12px;background-color: #F0F3EF;}
a{text-decoration: none;color: #999;}
/* 导航栏 */
.dt{padding-left: 7px;padding-right: 7px;z-index: 11;}
.dl{border: 1px solid #e3e4e5;overflow: hidden;position: relative;z-index: 1;height: 28px;line-height: 28px;z-index: 11 ;}
#nav {border-bottom: 1px solid #ddd;background-color: #e3e4e5;}
.nav{width: 1190px; height: 30px;line-height: 30px;color: #999;margin: auto;}
.nav ul li{list-style: none;}
.nav_left{float: left;}
#login{margin-right: 8px;}
li.nav_left{margin-left: 200px;position: relative;}
.box{background-color: #fff;position: absolute;top: 30px;width: 322px;height: 359px;display: none;border: 1px solid #ccc;box-shadow: 1px 2px 1px rgba(0,0,0,.1);z-index: 10;}
.box2{background-color: #fff;position: absolute;top: 30px;width: 282px;height: 163px;display: none;border: 1px solid #ccc;box-shadow: 1px 2px 1px rgba(0,0,0,.1);z-index: 10;}
.box3{background-color: #fff;position: absolute;top: 30px;width: 157px;height: 70px;display: none;border: 1px solid #ccc;box-shadow: 1px 2px 1px rgba(0,0,0,.1);z-index: 10;}
.box4{background-color: #fff;position: absolute;top: 30px;width: 172px;height: 249px;display: none;border: 1px solid #ccc;box-shadow: 1px 2px 1px rgba(0,0,0,.1);z-index: 10;}
.box5{background-color: #fff;position: absolute;top: 30px;width: 1190px;height: 181px;display: none;border: 1px solid #ccc;box-shadow: 1px 2px 1px rgba(0,0,0,.1);right: -75px;z-index: 10;}
.nav_right{list-style: none;position: relative;}
li.spacer {overflow: hidden;margin: 11px 5px 0;width: 1px;height: 10px;background-color: #ccc;float: left;}
ul.nav_right{float: right;}
li.nav_right{float: left;position: relative;}
li.nav_left:hover .dl{padding-bottom: 2px;border-color: #ccc; border-bottom: none;background-color: #fff;}
li.nav_left:hover .box{display: block;}
li.nav_right:hover .dl{padding-bottom: 2px;border-color: #ccc; border-bottom: none;background-color: #fff;}
li.nav_right:hover .box2{display: block;}
li.nav_right:hover .box3{display: block;}
li.nav_right:hover .box4{display: block;}
li.nav_right:hover .box5{display: block;}
a.ar:hover{color: #f10215;}
/* 头部 */
.header{width: 1190px;height: 140px;position: relative;margin: auto}
.logo{position: absolute;width: 190px;height: 171px;background-color: #fff;top:-31px;ox-shadow: 0 -12px 10px rgba(0,0,0,.2);border-bottom: 1px solid #ededed;}
.search{height: 60px;position: relative;}
.form{position: absolute;left: 320px;top: 25px;width: 550px;height: 35px;}
.text{left: 0;padding: 4px 44px 4px 4px;width: 450px;height: 25px;border: 1px solid transparent;line-height: 25px;font-size: 14px;}
.button{border-radius: 0;right: 0;width: 50px;height: 35px;line-height: 35px;border: none;background-color: #f10215;font-size: 18px;font-weight: 700;color: #fff;position: absolute;top: 0;outline: none;}
</style>
</head>
<body>
<div id="nav">
<div class="nav">
<ul class="nav_left">
<li class="nav_left">
<div class="dt dl">
<i></i>
<span>北京</span>
</div>
<div class="box"></div>
</li>
</ul>
<ul class="nav_right">
<li id="login" class="nav_right">
<a class="ar" href="#">您好，请登录</a>
<a href="#" style="color: #f10215;">免费注册</a>
</li>
<li class="spacer"></li>
<li class="nav_right">
<div class="dt"><a class="ar" href="#">我的订单</a></div>
</li>
<li class="spacer"></li>
<li class="nav_right">
<div class="dt dl"><a class="ar" href="#">我的京东▼</a></div>
<div class="box2"></div>
</li>
<li class="spacer"></li>
<li class="nav_right"><div class="dt"><a class="ar" href="#">京东会员</a></div></li>
<li class="spacer"></li>
<li class="nav_right">
<div class="dt dl"><a class="ar" href="#">企业采购▼</a></div>
<div class="box3"></div>
</li>
<li class="spacer"></li>
<li class="nav_right">
<div class="dt dl"><a href="#">客户服务▼</a></div>
<div class="box4"></div>
</li>
<li class="spacer"></li>
<li class="nav_right">
<div class="dt dl"><a href="#">网站导航▼</a></div>
<div class="box5"></div>
</li>
<li class="spacer"></li>
<li class="nav_right"><div class="dt"><a href="#">手机京东</a></div></li>
</ul>
</div>
</div>
<div id="header">
<div class="header">
<div class="logo"></div>
<div id="search">
<div class="search">
<div class="form">
<input type="text" name="search" class="text">
<button class="button">搜索</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-28 17:34:48
老师总结：<li class="spacer"></li> 纯粹为一个分隔线添加一个元素,是否值得,还有其它好的办法吗?
