导航布局案例总结

abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- *{ margin: 0px;&n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
  *{
      margin: 0px; 
      padding: 0px;
    }
  .clear{
      clear: both;
    }
  a{
      text-decoration: none; 
      font-size: 13px; 
      color:RGB(108,108,108);
    }
  #header{
      width:auto; 
      background-color: RGB(245,245,245);
    }
  .header_content{
      width: 1190px; 
      margin: 0px auto; 
      line-height: 40px; 
      text-align: center;
    }
  .header_left{
      height: 40px;  
      float: left;
    }
  .header_right{
      height: 40px;  
      float: right;
    }
  .header_left a{
      margin-right: 10px; 
      display: inline-block; 
      height: 40px;
    }
  .header_right a{
      margin-right: 1px; 
      display: inline-block; 
      height: 40px; 
      width:82px;
    }
  .header_a:hover{
      background-color:RGB(255,255,255);  
      color:RGB(242,61,19);  
    }
  .header_a1:hover{
      color:RGB(242,61,19); 
    }
-->
<link rel="stylesheet" type="text/css" href="csss/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<title>导航的总结</title>
</head>
<body>
  <div id="header">
      <div class="header_content">
          <div class="header_left">
               <a href=""class="header_a">中国大陆 &nbsp;<samp class="fa fa-angle-down"></samp></span></a>
               <a href=""style="color: RGB(242,61,19)">亲，请登录</a>
               <a href=""class="header_a1" >免费注册</a>
               <a href=""class="header_a1">手机逛淘宝</a>
          </div>
          <div class="header_right">
               <a href="" class="header_a">我的淘宝&nbsp;<samp class="fa fa-angle-down"></samp></a>
               <a href=""class="header_a"><i class="fa fa-cart-plus" style="color:RGB(242,61,19)"></i>&nbsp; 购物车<span style="color: RGB(242,61,19)">0</span></a>
               <a href=""class="header_a">收藏夹</a>
               <a href=""class="header_a1">商品分类</a>
               <a href=""class="header_a">卖家中心&nbsp;<samp class="fa fa-angle-down"></samp></a>
               <a href=""class="header_a">联系客服&nbsp;<samp class="fa fa-angle-down"></samp></a>
               <a href=""class="header_a"><i class="fa fa-list" style="color:RGB(242,61,19)"></i> 网站导航&nbsp;<samp class="fa fa-angle-down"></samp></a>

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

      </div>

  </div>
</body>
</html>
导航布局总结：
1、首先分析导航栏的布局： 背景、盒子、字体样式
2、在外部写CSS代码，这样简洁高效：使用外部CSS样式可以使代码复用。
2、先在body写出布局结构的class或id的命名，然后再在CSS里面写入样式，这样逻辑更清晰
3、class命名最好逻辑命名
4、在写CSS的时候先清除内外边距
5、用完浮动一定要记着清除浮动
6、引用字体库必须计算机上也要有字体库，最好和网页在一个总文件夹。
Correcting teacher：韦小宝Correction time：2019-01-21 14:21:41
Teacher's summary：总结的很不错代码写的也很棒很规范继续加油吧
导航布局案例总结

Popular Entries
