仿淘宝首页头部导航

原创2019-07-02 14:26:10142
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘宝首页头部导航实操</title><link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-a

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>淘宝首页头部导航实操</title>

<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

<style>

*{margin: 0px;padding: 0px;}

a{text-decoration: none;color: #6C6C6C;}

body a:hover {color: #FF5000;}

.clear{clear: both;}

.header{width: 100%;height: 36px;background: #f5f5f5;}

.header_center{width: 1190px;height: 36px;margin: 0px auto;font-size:  12px;font-family: 宋体;}

.header_left{width: 292px;height: 36px;float: left;}

.header_right{width: 590px;height: 36px;float: right;}

.header_left ul li{list-style-type: none;width: 67px;height: 36px;float: left;text-align: center;line-height: 36px;margin-right: 10px;}

.left_1{color: #3C3C3C;}

/*.header_a{display: inline-block;height: 40px;text-align: center;width: 90px;}*/

.header_a:hover{background: white;}


.header_right ul li{width: 67px;height: 36px;list-style-type: none;float: left;line-height: 36px;text-align: center;padding: 0px 6px;}

.header_a ul{border: 1px solid #EEE;margin: 0px -7px;display: none;border-top: none;}

.header_a ul li{width: 80px;height: 30px;text-align:left;color: #6C6C6C;line-height: 30px;}

.header_a:hover ul{display: block;width:100px;}



</style>

</head>

<body>

<div>

<div>

<div>

<ul class="">

<li class="left_1 header_a">

<span>中国大陆</span> <i class="fa fa-angle-down"></i>


</li>

<li style="width: 122px;">

<a href="#" style="color: #F22E00;">亲,请登录</a>

<a href="#">免费注册</a>

</li>

<li><a href="#">手机逛淘宝</a></li>

</ul>

</div>

<div>

<ul>

<li>

<a href="#" >我的淘宝</a> <i class="fa fa-angle-down"></i>

<ul>

<li><a href="#">已买到的宝贝</a></li>

<li><a href="#">我的足迹</a></li>

</ul>


</li>

<li><i class="fa fa-cart-plus" style="color: #F22E00;"></i> <a href="#">购物车</a> <i class="fa fa-angle-down"></i></li>

<li><i class="fa fa-star" style="color: #ccc;"></i> <a href="#">收藏夹</a> <i class="fa fa-angle-down"></i>

<ul>

<li><a href="#">收藏的宝贝</a></li>

<li><a href="#">收藏的店铺</a></li>

</ul>

</li>

<li><a href="#">商品分类</a></li>

<li style="width: 87px;"><a href="#" >千牛卖家中心</a> <i class="fa fa-angle-down"></i>

<ul>


<li><a href="#">免费开店</a></li>

<li><a href="#">已卖出的宝贝</a></li>

<li><a href="#">出售中的宝贝</a></li>

<li><a href="#">卖家服务市场</a></li>

<li><a href="#">卖家培训中心</a></li>

<li><a href="#">体验中心</a></li>

<li><a href="#">问商友</a></li>

</ul>


</li>

<li><a href="#">联系客服 <i class="fa fa-angle-down"></i></a></li>

<li style="width: 80px;"><i class="fa fa-bars" style="color: #F22E00;"></i> <a href="#">网站导航 <i class="fa fa-angle-down"></i></a></li>


</ul>

</div>

</div>

<div></div>


</div>


</body>

</html>


批改老师:查无此人批改时间:2019-07-04 13:15:47
老师总结:完成的不错。学编程,先从模仿开始,继续加油。

发布手记

热门词条