模仿导航案例

原创 2019-01-06 13:27:51 230
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="styl

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
   *{margin:0px;padding:0px;}
   .header{width:100%;height:40px;background:#F5F5F5;margin:0px auto;line-height: 50px;}
   ul li {display:inline;list-style:none;}
   ul li a{text-decoration:none;color:#6C6C6C;text-align:center; padding: 0px 5px;}
   .header_left{ text-decoration: none; width:400px;height:40px;float:left;margin-left:500px;}
   .header_right{width:600px;height:40px;float:right;margin-right:300px;}
   .clear{clear:both;}
</style>
<body>
<div class="header">
   <div class="header_left">
       <div class="header-click">
           <ul>
               <li class="header_li_a"><a href="#">中国大陆&nbsp;<i class="fa fa-sort-down"></i></a></li>
               <li ><a href="#" style="color: #FF8600;">亲,请登录</a></li>
               <li><a href="#">免费注册</a></li>
               <li><a href="#">手机逛淘宝</a></li>
           </ul>
       </div>
   </div>
   <div class="header_right">
       <ul>
           <li ><a href="#">我的淘宝</a></li>
           <li><a href="#"><i class="fa fa-shopping-cart" style="color:red;"></i>&nbsp;购物车<span style="color:red;">0</span> </a> </li>
           <li><a href="#">收藏夹</a></li>
           <li><a href="#">商品分类</a></li>
           <li><a href="#">卖家中心&nbsp;<i class="fa fa-sort-down"></i></a></li>
           <li><a href="#">联系客服</a></li>
           <li><a href="#"><i class="fa fa-reorder" style="color:red;"></i>网站导航</a></li>
       </ul>
   </div>
   <div class="clear"></div>
</div>
</body>
</html>

批改老师:灭绝师太批改时间:2019-01-06 13:47:17
老师总结:代码的可读性不佳,代码越简洁越好奥!布局没有问题,继续加油

发布手记

热门词条