制作的网易考拉

原创2018-10-14 16:36:46359
摘要: <!DOCTYPE html>  <html>  <head>     <meta charset="utf-8">   <title>网易考拉</title>   <link r
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
 	<title>网易考拉</title>
 	<link rel="stylesheet" type="text/css" href="css/kaola.css">
 	<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
 </head>
 <body>
 <div class="kaola">
   <div class="kldb">
     <div class="klleft">
       <a href="" style="color:#999999">考拉欢迎你!</a>
       <a href="">登陆</a>
       <a href="">免费注册</a>
       <a href="">手机考拉</a>
     </div>
     <div class="klright">
       <a href="">每日签到</a>
       <a href="">我的订单</a>
       <a href="" class="box">个人中心 <i class="fa fa-caret-down"></i>
         <ul>
           <li>我的优惠券</li>
           <li>我的红包</li>
           <li>我的考拉豆</li>
           <li>我的账号管理</li>
           <li>我的实名认证</li>
           <li>我收藏的商品</li>
           <li>我关注的品牌</li>
           <li>售后管理</li>           
         </ul>
       </a>
       <a href="" class="box" >客户服务 <i class="fa fa-caret-down"></i>
           <ul>
           <li>联系客服</li>
           <li>帮助中心</li>
           </ul>
       </a>
       <a href="" class="box">充值中心 <i class="fa fa-caret-down"></i>
         <ul>
           <li>话费充值</li>
           <li>流量充值</li>
           <li>Appstore充值</li>
          </ul>
       </a>
       <a href="" class="box">消费者权益 <i class="fa fa-caret-down"></i>
           <ul>
            <li>消费者告知书</li>
            <li>消费投诉公示</li>
           </ul>
       </a>
       <a href="" class="box">更多 <i class="fa fa-caret-down"></i>
          <ul>
            <li>收藏本站</li>
            <li>微信公众号</li>
            <li>新浪微博</li>
            <li>易信公众号</li>
            <li>招商合作</li>
            <li>考拉职位</li>
          </ul>
       </a>
     </div>
   
  <div class="clear"></div>
  </div>
 </div>
 </body>
 </html>
*{margin: 0px;padding: 0px;}
.clear{clear:both;}
li{list-style: none;}
a{text-decoration: none;line-height: 40px;font-size: 12px;margin: 0px 5px;color:#999999}
.kaola{width: 100%;height:40px;background: #000;}
.kldb{width: 1100px;height: 40px;margin: 0px auto;}
.klleft{display: inline-block; height: 40px;float: left;}
.klright{display: inline-block; height: 40px;float: right;position: relative;}
.kldb a:hover{color: #ff2651}
.box{display: inline-block;height: 40px;width: 80px;text-align: center;}
.box:hover{background-color: #ffffff;}
.box ul{border: 1px solid #ccc;border-top:none;position: absolute;}
.box ul li{display: inline-block;color: #000;text-align:left;padding: 0px 10px; display: none;}
.box:hover ul li{display: block; width: 80px;background-color:#ffffff;}


发布手记

热门词条