1

  1.    <div class="site-nav-cover">
  2.         <div class="site-nav-bd">
  3.             <ul class="site-nav-bd-l">
  4.                 <li class="site-nav-menu">
  5.                     <div class="site-nav-meuu-hd"></div>
  6.                 </li>
  7.             </ul>
  9.             <ul class="site-nav-bd-r">
  11.             </ul>
  12.         </div>
  13.     </div>

2

复制li到各个部分

li是每个导航栏的选项
div因为有图标，不光有文字，也有图标，并且请登录与图标放在一起会比较好

  1.     <div class="site-nav-cover">
  2.         <div class="site-nav-bd">
  3.             <ul class="site-nav-bd-l">
  4.                 <li class="site-nav-menu">
  5.                     <div class="site-nav-meuu-hd">
  6.                         <a href="javascript:;">中国大陆</a>
  7.                         <span class="fa fa-angle-down"></span>
  8.                     </div>
  9.                 </li>
  10.                 <li class="site-nav-menu">
  11.                     <div class="site-nav-meuu-hd">
  12.                         <a href="">
  13.                             <span>亲,请登录</span>
  14.                         </a>
  15.                         <a href="">免费注册</a>
  16.                     </div>
  17.                 </li>
  18.                 <li class="site-nav-menu">
  19.                     <div class="site-nav-meuu-hd">
  20.                         <a href="">手机逛淘宝</a>
  21.                     </div>
  22.                 </li>
  23.             </ul>
  25.             <ul class="site-nav-bd-r">
  26.                 <li class="site-nav-menu">
  27.                     <div class="site-nav-meuu-hd"></div>
  28.                 </li>
  29.                 <li class="site-nav-menu">
  30.                     <div class="site-nav-meuu-hd"></div>
  31.                 </li>
  32.                 <li class="site-nav-menu">
  33.                     <div class="site-nav-meuu-hd"></div>
  34.                 </li>
  36.                 <li class="site-nav-menu">
  37.                     <div class="site-nav-meuu-hd"></div>
  38.                 </li>
  40.                 <li class="site-nav-pipe">|</li>
  42.                 <li class="site-nav-menu">
  43.                     <div class="site-nav-meuu-hd"></div>
  44.                 </li>
  45.                 <li class="site-nav-menu">
  46.                     <div class="site-nav-meuu-hd"></div>
  47.                 </li>
  48.                 <li class="site-nav-menu">
  49.                     <div class="site-nav-meuu-hd"></div>
  50.                 </li>
  52.             </ul>
  53.         </div>
  54.     </div>

image.png

3

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  9.    <link rel="stylesheet" href="./css/顶部导航栏.css">
  10.     <title></title>
  11. </head>
  13. <body>
  14.     <!-- <div class="site-nav-cover">
  15.         <div class="site-nav-bd">
  16.             <ul class="site-nav-bd-l">
  17.                 <li class="site-nav-menu">
  18.                     <div class="site-nav-menu-hd"></div>
  19.                 </li>
  20.             </ul>
  22.             <ul class="site-nav-bd-r">
  24.             </ul>
  25.         </div>
  26.     </div> -->
  28.     <!-- 
  29.     <div class="site-nav-cover">
  30.         <div class="site-nav-bd">
  31.             <ul class="site-nav-bd-l">
  32.                 <li class="site-nav-menu">
  33.                     <div class="site-nav-menu-hd"></div>
  34.                 </li>
  35.                 <li class="site-nav-menu">
  36.                     <div class="site-nav-menu-hd"></div>
  37.                 </li>
  38.                 <li class="site-nav-menu">
  39.                     <div class="site-nav-menu-hd"></div>
  40.                 </li>
  41.             </ul>
  43.             <ul class="site-nav-bd-r">
  44.                 <li class="site-nav-menu">
  45.                     <div class="site-nav-menu-hd"></div>
  46.                 </li>
  47.                 <li class="site-nav-menu">
  48.                     <div class="site-nav-menu-hd"></div>
  49.                 </li>
  50.                 <li class="site-nav-menu">
  51.                     <div class="site-nav-menu-hd"></div>
  52.                 </li>
  54.                 <li class="site-nav-menu">
  55.                     <div class="site-nav-menu-hd"></div>
  56.                 </li>
  58.                 <li class="site-nav-pipe">|</li>
  60.                 <li class="site-nav-menu">
  61.                     <div class="site-nav-menu-hd"></div>
  62.                 </li>
  63.                 <li class="site-nav-menu">
  64.                     <div class="site-nav-menu-hd"></div>
  65.                 </li>
  66.                 <li class="site-nav-menu">
  67.                     <div class="site-nav-menu-hd"></div>
  68.                 </li>
  70.             </ul>
  71.         </div>
  72.     </div> -->
  76.     <div class="site-nav-cover">
  77.         <div class="layer site-nav-bd">
  78.             <ul class="site-nav-bd-l clearfix">
  79.                 <li class="site-nav-menu site-nav-dd">
  80.                     <div class="site-nav-menu-hd">
  81.                         <a href="javascript:;" class="deep">中国大陆</a>
  82.                         <span class="fa fa-angle-down"></span>
  83.                     </div>
  84.                 </li>
  85.                 <li class="site-nav-menu">
  86.                     <div class="site-nav-menu-hd">
  87.                         <!-- <a href="">
  88.                             <span>亲,请登录</span>
  89.                         </a> -->
  91.                         <a href="" class="hl">
  92.                             亲,请登录
  93.                         </a>
  95.                         <a href="">免费注册</a>
  96.                     </div>
  97.                 </li>
  98.                 <li class="site-nav-menu">
  99.                     <div class="site-nav-menu-hd">
  100.                         <a href="">手机逛淘宝</a>
  101.                     </div>
  102.                 </li>
  103.             </ul>
  105.             <ul class="site-nav-bd-r clearfix">
  106.                 <li class="site-nav-menu site-nav-dd">
  107.                     <div class="site-nav-menu-hd">
  108.                         <a href="javascript:;">我的淘宝</a>
  109.                         <span class="fa fa-angle-down"></span>
  110.                     </div>
  111.                 </li>
  112.                 <li class="site-nav-menu site-nav-dd">
  113.                     <div class="site-nav-menu-hd">
  114.                         <a href="javascript:;">
  115.                             <span class="fa fa-shopping-cart hl" ></span>
  116.                             购物车
  117.                         </a>
  118.                         <span class="fa fa-angle-down"></span>
  119.                     </div>
  120.                 </li>
  121.                 <li class="site-nav-menu site-nav-dd">
  122.                     <div class="site-nav-menu-hd">
  123.                         <a href="javascript:;">
  124.                             <span class="fa fa-star"></span>
  125.                             收藏夹
  126.                         </a>
  127.                         <span class="fa fa-angle-down"></span>
  128.                     </div>
  129.                 </li>
  131.                 <li class="site-nav-menu ">
  132.                     <div class="site-nav-menu-hd">
  133.                         <a href="">商品分类</a>
  134.                     </div>
  135.                 </li>
  137.                 <li class="site-nav-pipe">|</li>
  139.                 <li class="site-nav-menu site-nav-dd">
  140.                     <div class="site-nav-menu-hd">
  141.                         <a href="javascript:;">买家中心</a>
  142.                         <span class="fa fa-angle-down"></span>
  143.                     </div>
  144.                 </li>
  145.                 <li class="site-nav-menu">
  146.                     <div class="site-nav-menu-hd">
  147.                         <a href="javascript:;">联系客服</a>
  148.                         <span class="fa fa-angle-down"></span>
  149.                     </div>
  150.                 </li>
  151.                 <li class="site-nav-menu site-nav-dd">
  152.                     <div class="site-nav-menu-hd">
  153.                         <a href="javascript:;">
  154.                             <span class="fa fa-bars hl"></span>
  155.                             网址导航
  156.                         </a>
  157.                         <span class="fa fa-angle-down"></span>
  158.                     </div>
  159.                 </li>
  161.             </ul>
  162.         </div>
  163.     </div>
  164.     <div class="box"></div>
  166. </body>
  168. </html>
  1. body {
  2.   margin: 0;
  3.   background-color: #f5f5f5;
  4.   font-family: tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
  5.   -webkit-font-smoothing: antialiased;
  6. }
  8. ul {
  9.   padding: 0;
  10.   margin: 0;
  11.   list-style: none;
  12. }
  14. a {
  15.   text-decoration: none;
  16. }
  18. .layer {
  19.   width: 1190px;
  20.   margin: 0 auto;
  21. }
  23. .clearfix:after {
  24.   content: "";
  25.   display: table;
  26.   clear: both;
  27. }
  29. .site-nav-cover {
  30.   width: 100%;
  31.   min-width: 1190px;
  32.   border-bottom: 1px solid #eee;
  33.   background-color: #f4f4f4;
  34. }
  36. .site-nav-cover .site-nav-bd {
  37.   height: 35px;
  38.   font-size: 12px;
  39.   /* background-color: #000; */
  40. }
  41. .site-nav-cover .site-nav-bd .site-nav-bd-l {
  42.   float: left;
  43. }
  45. .site-nav-cover .site-nav-bd .site-nav-bd-r {
  46.   float: right;
  47. }
  49. .site-nav-cover .site-nav-bd li{
  50.   height: 35px;
  51.   line-height: 35px;
  52. }
  54. /* .site-nav-cover .site-nav-bd .site-nav-menu.site-nav-dd {
  55. float: left;
  56. border-left: 1px solid transparent;
  57. border-right: 1px solid transparent;
  58. } */
  60. .site-nav-cover .site-nav-bd .site-nav-menu {
  61.   float: left;
  62. }
  64. .site-nav-cover .site-nav-bd .site-nav-menu.site-nav-dd {
  65.   border-left: 1px solid transparent;
  66.   border-right: 1px solid transparent;
  67. }
  70. .site-nav-cover .site-nav-bd .site-nav-menu.site-nav-dd:hover {
  71.   border-left:1px solid #eee;
  72.   border-right: 1px solid #eee;
  73.   background-color: #fff;
  74. }
  76. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd{
  77.   padding: 0 6px;
  78. }
  79. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd .deep{
  80.   color: #3c3c3c;
  81. }
  82. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd .hl{
  83.   color: #ff5000;
  84. }
  86. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd a,
  87. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd span,
  88. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd a span
  89. {
  90.   margin-right: 7px;
  91.   color: #6c6c6c;
  92. }
  94. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd a:hover,
  95. .site-nav-cover .site-nav-bd .site-nav-menu .site-nav-menu-hd a:hover span
  96. {
  97.   color:#ff5000
  98. }
  100. .site-nav-cover .site-nav-bd .site-nav-pipe{
  101.   float: left;
  102.   height: 35px;
  103.   padding: 0 5px;
  104.   line-height: 35px;
  105.   font-size: 12px;
  106.   color: #ccc;
  107. }
  109. .box {
  110.   width: 100%;
  111.   height: 121px;
  112.   background-color: #fff;
  113. }

总结

总结

命名：site-nav是前缀，子元素命名与父元素命名有一定的联系，子元素名字继承父元素名字的前缀

写元素时想好，每个元素的最好想清楚用处，并命名

css从整体到部分，先把css部局弄好，再弄效果