返回 css淘宝导航...... 登陆

css淘宝导航栏

2019-07-07 10:05:14 222

<!DOCTYPE html>

<html>

<head>

<title>淘宝导航条</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/index.css">

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

<style type="text/css">

         

</style>

</head>

<body>

    <div class="header">

         <div class="header-content">

              <div class="header-left">

                     <a href="" class="header-a">中国大陆&nbsp&nbsp<i class=" fa fa-angle-down"></i></a>

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

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

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

               </div>

              <div class="header-right">

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

                           <ul>

                               <li>已买到的宝贝</li>

                               <li>我的足迹</li>

                           </ul>

                     </a>

                     <a href="" class="header-a"><i class=" fa fa-angle-down" style="color:#ff5000;"></i>&nbsp&nbsp购物车</a>

                     <a href="" class="header-a"><i class=" fa fa-angle-down"></i>&nbsp&nbsp收藏夹</a>

                     <a href="" class="header-a">商品分类<i class=" fa fa-angle-down"></i>

                             <ul>

                               <li>已买到的宝贝</li>

                               <li>我的足迹</li>

                           </ul>

                     </a>

                     <a href="" class="header-a">卖家中心<i class=" fa fa-angle-down"></i></a>

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

                     <a href="" class="header-a" "><span class="fa fa-align-justify" style="color:#ff5000;"></span>网站导航<i class=" fa fa-angle-down" style="color:#ff5000;"></i>

                           <ul>

                               <li>已买到的宝贝</li>

                               <li>我的足迹</li>

                           </ul>    

                     </a>


              </div>

         </div>

         <div class="clear"></div>

    </div>

</body>

</html>

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

a{text-decoration: none; color: #6c6c6c;font-size: 13px;}

li{list-style: none;}

.clear{clear:both;}

.header{width: 100%;/*height: 40px;*/background-color: #f5f5f5;}

.header-content{width: 1200px;/*height: 40px;*/margin: 0px auto;line-height: 40px;}

.header-left {height: 40px;float: left;}

.header-left a{margin-right: 5px;}

.header-content a:hover{color: #ff5000;}

.header-right{height: 40px;/*width:600px;*//*background-color: pink;*/float: right;}

.header-a{display: inline-block;height: 40px;width: 80px;text-align: center;position: relative;}

.header-a:hover{background-color: #fff;}

.header-a ul{border: 1px solid #f5f5f5;display: none;border-top: none;}

.header-a:hover ul{display: block;position: absolute;width: 100px;}

.header-a:hover ul li:hover{background-color: #f5f5f5;}

.header-a ul li{color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin: 5px 0px;}

需要注意细节以及各个栏块的宽度把控

最新手记推荐

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

全部回复(0)我要回复

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