摘要：下面是国美首页顶部导航的html源码：<html> <head> <meta charset="utf-8"> <title>仿国美导航</title> <link rel="stylesheet" type="text/css" h
下面是国美首页顶部导航的html源码：
<html> <head> <meta charset="utf-8"> <title>仿国美导航</title> <link rel="stylesheet" type="text/css" href="css/gome.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"> <a href="#" class="b_a">国美会员 <i class="fa fa-angle-down"></i></a> <a href="#">登录</a> <a href="#" style="color:red;">注册有礼 <i class="fa fa-gift fa-lg" style="color:red;"></i></a> </ul> </div> <div class="c-right"> <ul> <a href="#">我的订单</a> <a href="#" class="b_a">我的国美 <i class="fa fa-angle-down"></i></a> <a href="#" class="b_a">企业采购 <i class="fa fa-angle-down"></i></a> <a href="#" class="b_a"><span class="fa fa-user-circle-o"></span> 服务中心 <i class="fa fa-angle-down"></i></a> <a href="#" class="b_a">网站导航 <i class="fa fa-angle-down"></i></a> <a href="#" class="b_a"><span class="fa fa-mobile fa-lg"></span> 手机国美 <i class="fa fa-angle-down"></i></a> </ul> </div> </div> <div class="clear"></div> </div> </body> </html>
下面是gome.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;}
.b_a:hover{background-color:#fff;}
.c-left{float:left;}
.c-left a{margin-right:8px;}
.c-right{float:right;}
.c-right a{margin-left:6px;}
.i{color:#ccc;}
span{color:#DD00A7;}鼠标放上去，向下的箭头变成向上的箭头，不知道怎么做。
批改老师：灭绝师太批改时间：2018-12-03 15:55:24
老师总结：改变class的属性值等等有很多方法可以做，hover也可以完成，自己先研究下
