手记 / 仿国美购物(gome)导航条

仿国美购物(gome)导航条

3天前7浏览0评论

下面是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>&nbsp;<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;">注册有礼&nbsp;<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>&nbsp;<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">企业采购&nbsp;<i class="fa fa-angle-down"></i></div>
            <div class="b_a"><span class="fa fa-user-circle-o"></span>&nbsp;服务中心&nbsp;<i class="fa fa-angle-down"></i></div>
            <div class="b_a">网站导航&nbsp;<i class="fa fa-angle-down"></i></div>
            <div class="b_a"><span class="fa fa-mobile fa-lg"></span>&nbsp;手机国美&nbsp;<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;}

暂时先提交这个未完成的作品。以后有时间再继续完善这个作业。

相关标签:HTMLCSS
    0推荐

      3721

      PHP开发工程师

      作者的热门手记

      PHP中文网

      未登录