返回仿淘宝首页头部......登陆

仿淘宝首页头部导航

无名氏_连2019-07-02 14:26:1070

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网