仿国美购物（gome）导航条
下面是html源码
<html> <head> <meta charset="utf-8"> <title>仿国美导航</title> <link rel="stylesheet" type="text/css" href="css/gome1.css"> <link rel="stylesheet" type="text/css" href="css/fontsome/css/font-awesome.min.css"> </head> <body> <div class="topnav"> <div class="content"> <div class="c-left"> <div class="b_a"><a href="">国美会员</a> <i class="fa fa-angle-down"></i> <div class="c-left1"> <ul> <li class="left01"><img src="img/gome/2018-12-06_165651.png" align="left">欢迎来到国美，<a href="" style="color:#006699;">请登录！</a></li> <li><hr></li> <li class="left02"><span class="l0201">我的特权</span> <span class="l0202"><a href="">会员俱乐部</a></span></li> <li> <a href="" class="a1"><img border src="img/gome/011.jpg" onmouseover="this.src='img/gome/012.jpg'" onmouseout="this.src='img/gome/011.jpg'"></a> <a href="" class="a1"><img border src="img/gome/021.jpg" onmouseover="this.src='img/gome/022.jpg'" onmouseout="this.src='img/gome/021.jpg'"></a> <a href="" class="a1"><img border src="img/gome/031.jpg" onmouseover="this.src='img/gome/032.jpg'" onmouseout="this.src='img/gome/031.jpg'"></a> <a href="" class="a1"><img border src="img/gome/041.jpg" onmouseover="this.src='img/gome/042.jpg'" onmouseout="this.src='img/gome/041.jpg'"></a> <a href="" class="a1"><img border src="img/gome/051.jpg" onmouseover="this.src='img/gome/052.jpg'" onmouseout="this.src='img/gome/051.jpg'"></a> </li> </ul> </div> </div> <a href="#">登录</a> <a href="#" style="color:red;">注册有礼 <i class="fa fa-gift fa-lg" style="color:red;"></i></a> </div> <div class="c-right"> <ul> <a href="#">我的订单</a> <div class="b_a"><a href="">我的国美</a> <i class="fa fa-angle-down"></i> <ul class="right1"> <li><b>我的国美，</b><a href="" style="color:#006699;"><b>请登录！</b></a></li> <li>待处理订单 我的收藏</li> <li>我的金融 个人资料</li> <li>我的美店</li> <li><hr></li> <li>红券|蓝券|店铺券|购物券</li> <li>----</li> <li>足迹</li> <li><img src="img/gome/2018-12-06_165200.png" alt=""></li> </ul> </div> <div class="b_a">企业采购 <i class="fa fa-angle-down"></i></div> <div class="b_a"><span class="fa fa-user-circle-o"></span> 服务中心 <i class="fa fa-angle-down"></i></div> <div class="b_a">网站导航 <i class="fa fa-angle-down"></i></div> <div class="b_a"><span class="fa fa-mobile fa-lg"></span> 手机国美 <i class="fa fa-angle-down"></i></div> </ul> </div> </div> <div class="clear"></div> </div> </body> </html>
下面是ome1.css
*{margin:0px;padding:0px;}
.clear{clear:both;}
.topnav{width:100%;background-color:#F8F8F8;}
.content{width:1200px;margin:0px auto;line-height:31px;}
.content a:hover{color:red;}
a{text-decoration:none;color:#707070;font-size:12px;}
.b_a{display:inline-block;width:80px;height:31px;text-align:center;font-size:12px;border:1px solid #F8F8F8;}
.b_a:hover{background-color:#fff;border:1px solid #ccc;}
.c-left{float:left;}
.c-left a{margin-right:8px;}
.c-left1{width:322px;height:216px;border:1px solid #ccc;border-top:0px;background-color:#fff;display:none;position:absolute;left:-1px;}
.c-left .b_a:hover .c-left1{display:block;}
.c-right{float:right;}
.c-right a{margin-left:6px;}
.i{color:#ccc;}
span{color:#DD00A7;}
.c-left .b_a{display:inline-block;position:relative;}
ul li{list-style:none;}
.left01{height:67px;line-height:67px;text-align:left;color:#707070;margin:5px 0px 8px 0px;}
hr{width:90%;border:1px solid #F3F3F3;margin:auto;}
.left02{height:40px;width:322px;line-height:40px;}
.l0201{color:#5E5E5E;float:left;margin-left:12px;}
.l0202{float:right;margin-right:14px;color:#CCC;}
.l0202 a{color:#DEDEDE;}
.l0202 a:hover{color:red;}
.a1{margin:0px 5px;}
.right1{width:260px;height:300px;border:1px solid #ccc;border-top:0px;background-color:#fff;left:2px;display:none;position:absolute;left:-1px;color:#707070;}
.c-right .b_a:hover .right1{display:block;}
.c-right .b_a{position:relative;}暂时先提交这个未完成的作品。以后有时间再继续完善这个作业。
