Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战练习-淘宝顶部导航
Blogger Information
Blog 19
fans 0
comment 0
visits 10720
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战练习-淘宝顶部导航
牙森江
Original
701 people have browsed it

1.淘宝顶部导航
html代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  8.     <title>淘宝</title>
  9.     <link rel="stylesheet" href="CSS/style.css">
  12. </head>
  13. <body>
  14.     <header>
  15.         <div class="h_t_box">
  16.                 <ul  class="h_t_box_l">
  17.                         <li>
  18.                           <span>中国大陆</span>
  19.                           <span class="iconfont">&#xe645;</span>
  20.                           <div class="hidden_box">
  21.                             <ul>
  22.                                 <li>全球</li>
  23.                                 <li>中国大陆</li>
  24.                                 <li>中国香港</li>
  25.                                 <li>中国台湾</li>
  26.                                 <li>中国澳门</li>
  27.                                 <li>韩国</li>
  28.                                 <li>马来西亚</li>
  29.                                 <li>澳大利亚</li>
  30.                                 <li>新加坡</li>
  31.                                 <li>新西兰</li>
  32.                                 <li>加拿大</li>
  33.                                 <li>日本</li>
  34.                                 <li>越南</li>
  35.                                 <li>泰国</li>
  36.                                 <li>菲律宾</li>
  37.                                 <li>柬埔寨</li>
  38.                             </ul>
  39.                           </div>
  40.                         </li>
  41.                         <li>
  42.                             <a href="#">亲，请登录</a>
  43.                             <a href="#">免费注册</a>
  44.                         </li>
  45.                         <li><a href="#">手机逛淘宝</a></li>
  46.                         <li><a href="#">网页无障碍</a></li>
  47.                 </ul>
  48.                 <ul class="h_t_box_r">
  49.                     <li>
  50.                         <span><a href="">我的淘宝</a></span>
  51.                         <span class="iconfont">&#xe645;</span>
  52.                         <div class="hidden_box">
  53.                             <ul>
  54.                                 <li><a href="#">已买到的宝贝</a></li>
  55.                                 <li><a href="#">我的足迹</a></li>
  56.                             </ul>
  57.                                    </div>
  58.                     </li>
  59.                     <li>
  60.                         <span class="iconfont">&#xe602;</span>
  61.                         <span>购物车</span>
  62.                     </li>
  63.                     <li>
  64.                         <a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fshoucang.taobao.com%2Fitem_collect_n.htm%3Fspm%3Da21bo.jianhua.1997525053.1.5af911d9eNtAFT">
  65.                             <span class="iconfont">&#xe603;</span>
  66.                             <span>收藏夹</span>
  67.                         </a>
  68.                         <span class="iconfont">&#xe645;</span>
  69.                         <div class="hidden_box">
  70.                             <ul>
  71.                                 <li><a href="">收藏的宝贝</a></li>
  72.                                 <li><a href="">收藏的店铺</a></li>
  73.                             </ul>
  74.                         </div>
  75.                     </li>
  76.                     <li><a href="https://huodong.taobao.com/wow/tbhome/act/market-list">商品分类</a>
  77.                     </li>
  78.                     <li><a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm?spm=a21bo.jianhua.1997563209.2.5af911d9YHFk75#/">免费开店</a>
  79.                     </li>
  81.                     <li>
  82.                     <a href="https://loginmyseller.taobao.com/?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fmyseller.taobao.com%2Fhome.htm%2FQnworkbenchHome%2F%3Fspm%3Da21bo.jianhua.1997525073.1.5af911d98ewzLp">
  83.                         <span>千牛卖家中心</span>
  84.                        <span class="iconfont">&#xe645;</span>
  85.                     </a>
  86.                     <div class="hidden_box">
  87.                         <ul>
  88.                             <li>开店入驻</li>
  89.                             <li>已卖出的宝贝</li>
  90.                             <li>出售中的宝贝</li>
  91.                             <li>卖家服务市场</li>
  92.                             <li>卖家培训中心</li>
  93.                             <li>体检中心</li>
  94.                             <li>电商学习中心</li>
  95.                         </ul>
  96.                     </div>
  97.                     </li>
  99.                     <li>
  100.                    <a href="https://consumerservice.taobao.com/?spm=a21bo.jianhua.754895749.1.5af911d9E5MeGW">
  101.                         <span>联系客服</span>
  102.                         <span class="iconfont">&#xe645;</span>
  103.                    </a>
  104.                    <div class="hidden_box">
  105.                     <ul>
  106.                         <li>消费者客服</li>
  107.                         <li>卖家客服</li>
  108.                         <li>意见反馈</li>
  109.                         <li>网页版旺旺</li>
  110.                     </ul>
  111.                    </div>
  112.                     </li>
  113.                 </ul>
  114.         </div>
  116.         <div class="bar">
  117.             <ul class="pic_bar">
  118.                 <li><a href="https://pages.tmall.com/wow/a/act/tmall/35385/pha?spm=a21bo.jianhua.1112.1.5af911d9T14qXU&wh_bizStageId=8888&pha=true&disableNav=YES&wh_act_nativebar=0"><img src="./images/banner0.png" alt=""></a></li>
  119.                 <li><a href="#"><img src="./images/banner1.png" alt=""></a></li>
  120.                 <li><a href="#"><img src="./images/banner2.png" alt=""></a></li>
  121.                 <li><a href="#"><img src="./images/banner3.png" alt=""></a></li>
  122.                 <li><a href="#"><img src="./images/banner4.png" alt=""></a></li>
  123.                 <li><a href="#"><img src="./images/banner5.png" alt=""></a></li>
  124.             </ul>
  125.         </div>
  127.         <div class="banner">
  128.             <div class="banner_t">
  129.                 <div class="banner_l "><a href="https://www.taobao.com/?spm=a21bo.jianhua.201857.1.5af911d9T14qXU"><img src="./images/左侧logo.png" alt=""></a></div>
  130.                 <!-- banner中间 -->
  131.                 <div class="banner_c ">
  132.                     <ul class="banner_c_t">
  133.                                   <li class="banner_c_t_l">
  134.                                     <span>宝贝</span>
  135.                                     <span class="iconfont">&#xe645;</span>
  136.                                     <div class="hidden_box">
  137.                                         <ul>
  138.                                             <li >天猫</li>
  139.                                             <li>店铺</li>
  140.                                         </ul>
  141.                                     </div>
  142.                                   </li>
  143.                                   <li class="banner_c_t_c">零食</li>
  144.                                   <li class="banner_c_t_r">搜索</li>
  145.                     </ul>
  146.                     <ul class="banner_c_b">
  147.                         <li><a href="#">新款连衣裙</a></li>
  148.                         <li><a href="#">四件套</a></li>
  149.                         <li><a href="#">潮流T恤</a></li>
  150.                         <li><a href="#">时尚女鞋</a></li>
  151.                         <li><a href="#">短裤</a></li>
  152.                         <li><a href="#">半身裙</a></li>
  153.                         <li><a href="#">男士外套</a></li>
  154.                         <li><a href="#">墙纸</a></li>
  155.                         <li><a href="#">行车记录仪</a></li>
  156.                     </ul>
  159.                 </div>
  161.                 <!-- banner右侧二维码 -->
  162.                 <div class="banner_r">
  163.                         <a href="#">
  164.                             <p>下载淘宝</p>
  165.                             <img src="./images/二维码.png" alt="">
  166.                         </a>
  167.                 </div>
  168.             </div>
  169.         </div>
  170.     </header>
  171. <div class="bg_img">
  172.           <div class="bg_img_l"></div>
  173.           <div class="bg_img_r"></div>
  174. </div>
  175.     <footer>
  176.     </footer>
  177. </body>
  178. </html>

CSS代码部分

  1.         * {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.             color: #3c3c3c;
  6.             list-style: none;
  7.         }
  9.         @font-face {
  10.             font-family: 'iconfont';
  11.             src: url('../iconfont/iconfont.woff2') format('woff2'),
  12.                 url('../iconfont/iconfont.woff') format('woff'),
  13.                 url('../iconfont/iconfont.ttf') format('truetype');
  14.         }
  16.       .iconfont {
  17.           font-family: "iconfont" !important;
  18.           font-size: 16px;
  19.           font-style: normal;
  20.           -webkit-font-smoothing: antialiased;
  21.           -moz-osx-font-smoothing: grayscale;
  22.       }
  23.     body {
  24.         background-color: rgb(198, 225, 167);
  25.     }
  26.         a {
  27.             text-decoration: none;
  28.         }
  29.        header {
  30.         width: 100%;
  31.         height: 36px;
  32.         background-color:#f5f5f5;
  33.        }
  34.            /* 顶部导航 */
  35.        header .h_t_box {
  36.         display: flex;
  37.         width: 1190px;
  38.         height: 36px;
  39.         font-size: 12px;
  40.         margin: auto;
  41.         place-content: space-between;
  42.        }
  43.            /* 顶部导航左侧 */
  44.         header .h_t_box .h_t_box_l {
  45.             display: flex;
  46.             width: 391px;
  47.             height: 35px;
  48.             line-height: 12px;
  49.             place-content: space-between;
  50.             line-height: 35px;
  51.         }
  53.         header .h_t_box .h_t_box_l li {
  54.             list-style: none;
  55.             height: 35px;
  56.             padding: 0 5px;
  57.         }
  59.         header .h_t_box .h_t_box_l>li:nth-of-type(1):hover {
  60.             background-color: rgb(255, 255, 255);
  61.         }
  63.         header .h_t_box .h_t_box_l .hidden_box {
  64.             background-color: rgb(255, 255, 255);
  65.             position: absolute;
  66.             width: 270px;;
  67.             height: 290px;
  68.             top: 36px;
  69.             display: none;
  70.             overflow: scroll;
  71.         }
  73.          header .h_t_box .h_t_box_l .hidden_box ul li:hover {
  74.            background-color: #f4f4f4;
  75.             cursor: pointer;
  76.          }
  78.         header .h_t_box .h_t_box_l>li:nth-of-type(1):hover .hidden_box {
  79.             display: block;
  80.         }
  82.             header .h_t_box .h_t_box_l>li:nth-of-type(1)  span:nth-of-type(2) {
  83.             color: #3c3c3c;
  84.             display: inline-block;
  85.             line-height: 35px;
  86.             transform: scale(0.7);
  87.         }
  89.         header .h_t_box .h_t_box_l>li:nth-of-type(2)  a:nth-of-type(1) {
  90.             color: rgb(255, 8, 0);
  91.             padding-right: 10px;
  92.         }
  94.         header .h_t_box .h_t_box_l>li:nth-last-of-type(-n+3) a:hover {
  95.             color: rgb(255, 8, 0);
  96.         }
  97.    /* 顶部导航右侧 */
  98.         header .h_t_box .h_t_box_r li {
  99.             list-style: none;
  100.             /* background-color: rgb(216, 209, 111); */
  101.             height: 35px;
  102.         }
  104.         header .h_t_box .h_t_box_r .iconfont {
  105.             color: #3c3c3c;
  106.             display: inline-block;
  107.             transform: scale(0.7);
  108.         }
  109.           header .h_t_box .h_t_box_r {
  110.           display: flex;
  111.           /* background-color: rgb(113, 215, 199); */
  112.           width: 554px;
  113.           place-content: space-evenly;
  114.           line-height: 35px;
  115.          }
  117.            header .h_t_box .h_t_box_r>li:nth-of-type(1):hover .hidden_box {
  118.                display: block;
  119.            }
  120.                header .h_t_box .h_t_box_r>li:nth-of-type(1):hover {
  121.                    background-color: rgb(255, 255, 255);
  122.                }
  124.                header .h_t_box .h_t_box_r li:nth-of-type(1) .hidden_box {
  125.                    background-color: rgb(255, 255, 255);
  126.                    position: absolute;
  127.                    width: 80px;
  128.                    height: 75px;
  129.                    top: 36px;
  130.                    display: none;
  131.                    background-color: rgb(255, 255, 255);
  132.                }
  134.                 header .h_t_box .h_t_box_r .hidden_box ul li:hover {
  135.                     background-color: #f4f4f4;
  136.                     cursor: pointer;
  137.                 }
  139.                 header .h_t_box .h_t_box_r>li:nth-of-type(1) span:nth-of-type(1) a:hover {
  140.                  color: #ff0000;
  141.                 }
  143.              header .h_t_box .h_t_box_r>li:nth-of-type(1) .iconfont {
  144.                  color: #3c3c3c;
  145.                  display: inline-block;
  146.                  transform: scale(0.7);
  147.              }
  148.              header .h_t_box .h_t_box_r>li:nth-of-type(2) .iconfont {
  149.                  color: #f47a00;
  150.                  display: inline-block;
  151.                  transform: scale(0.6);
  152.              }
  153.              header .h_t_box .h_t_box_r>li:nth-of-type(2) span:nth-of-type(2):hover {
  154.                  color: #ff0000;
  155.                  cursor: pointer;
  156.              }
  158.             header .h_t_box .h_t_box_r>li:nth-of-type(3):hover {
  159.               background-color: rgb(255, 255, 255);
  160.               cursor: pointer;
  161.             }
  162.             header .h_t_box .h_t_box_r>li:nth-of-type(3):hover .hidden_box{
  163.               display: block;
  164.             }
  165.             header .h_t_box .h_t_box_r>li:nth-of-type(3) a span:hover {
  166.               color: #ff0000;
  167.             }
  169.             header .h_t_box .h_t_box_r>li:nth-of-type(3) span:nth-of-type(1){
  170.                 font-size: 12px
  171.             }
  173.             header .h_t_box .h_t_box_r li:nth-of-type(3) .hidden_box {
  174.                 background-color: rgb(255, 255, 255);
  175.                 position: absolute;
  176.                 width: 70px;
  177.                 height: 75px;
  178.                 top: 36px;
  179.                 display: none;
  180.             }
  182.            header .h_t_box .h_t_box_r>li:nth-of-type(4) a:hover {
  183.                color: rgb(255, 0, 0);
  184.            }    
  186.            header .h_t_box .h_t_box_r>li:nth-of-type(5) a:hover {
  187.                color: rgb(255, 0, 0);
  188.            }   
  189.            header .h_t_box .h_t_box_r>li:nth-of-type(6) a span:nth-of-type(1):hover {
  190.                color: rgb(255, 0, 0);
  191.            }  
  193.           header .h_t_box .h_t_box_r li:nth-of-type(6) .hidden_box {
  194.               background-color: rgb(255, 255, 255);
  195.               position: absolute;
  196.               width: 85px;
  197.               height: 245px;
  198.               top: 36px;
  199.               display: none;
  200.           }
  202.          header .h_t_box .h_t_box_r li:nth-of-type(6):hover .hidden_box {
  203.              display: block;
  204.              padding-left: 5px;
  205.          }
  207.          header .h_t_box .h_t_box_r>li:nth-of-type(7) a span:nth-of-type(1):hover {
  208.              color: rgb(255, 0, 0);
  209.          }
  210.           header .h_t_box .h_t_box_r li:nth-of-type(7) .hidden_box {
  211.               background-color: rgb(255, 255, 255);
  212.               position: absolute;
  213.               width: 80px;
  214.               height: 200px;
  215.               top: 36px;
  216.               display: none;
  217.             padding-left: 5px;
  218.           }
  219.          header .h_t_box .h_t_box_r li:nth-of-type(7):hover .hidden_box {
  220.          display: block;
  221.          }
  223. /* 图片bar */
  224. header .bar {
  225.     width: 100%;
  226.     height: 100px;
  227.     background-color:#ff72B5;
  228.  }
  230. header .bar .pic_bar {
  231.     display: flex;
  232.     width: 1190px;
  233.     height: 100px;
  234.     margin: auto;
  235.     place-content: space-between;
  236.     place-items: center;
  237.  }
  239.  header .bar .pic_bar li:first-of-type {
  240.     width: 105px;
  241.     height: 100px;
  242.  }
  244.   header .bar .pic_bar li:first-of-type img {
  245.       width: 80px;
  246.       height: 80px;
  247.       margin: 10px 10px 10px 15px;
  248.   }
  249.  header .bar .pic_bar li img {
  250.      width: 209px;
  251.      height: 75px;
  252.      border-radius: 20px;
  253.  }
  255.  /* banner */
  256.  .banner{
  257.     width: 1190px;
  258.     height: 121px;
  259.     border-radius: 15px 15px 0px 0px;
  260.     margin: 0px auto;
  261.  } 
  263.  .banner .banner_t {
  264.     background-color: rgb(255, 255, 255);
  265.     width: 100%;
  266.     height: 121px;
  267.     display: flex;
  268.  }
  270.     .banner .banner_t .banner_l {
  271.     background-color: rgb(255, 255, 255);
  272.     width: 190px;
  273.     height: 121px;
  274.  }
  276. /* banner中间 */
  277.  .banner .banner_c {
  278.     background-color: rgb(255, 255, 255);
  279.     width: 734px;
  280.     height: 70px;
  281.     margin-top: 33px;
  282.     border-radius: 20px;
  283.  }
  285.  .banner .banner_c_t {
  286.     background-color: rgb(255, 255, 255);
  287.     width: 738px;
  288.     height: 42px;
  289.     border: 2px solid #ff5000;
  290.     border-radius: 20px;
  291.     display: flex;
  292.     place-content: space-between;
  293.     line-height: 42px;
  294.     place-items: center;
  295.  }
  297.  .banner .banner_c_t .banner_c_t_l {
  298.     background-color: rgb(255, 255, 255);
  299.     width: 64px;
  300.     height: 36px;
  301.     border-radius: 25px;
  302.     text-align:center;
  303.     line-height: 36px;
  304.     margin-left: 1px;
  305.     cursor: pointer;
  306.  }
  308.  .banner .banner_c_t .banner_c_t_l span{
  309. color: #333333;
  310. font-size: 14px;
  311.  }
  313.  .banner .banner_c_t .banner_c_t_l .hidden_box {
  314.     margin: 0;
  315.     width: 64px;
  316.     height: 60px;
  317.     background-color: #fff;
  318.     display: none;
  319.     line-height: 25px;
  320.     font-size: 14px;
  321.     text-align: center;
  322.  }
  323.  .banner .banner_c_t .banner_c_t_l .hidden_box li:hover {
  324.      text-align: center;
  325.      cursor: pointer;
  326.     background-color: #f4f4f4;
  327.     color: #f47a00;
  328.  }
  330.  .banner .banner_c_t .banner_c_t_l:hover .hidden_box {
  331.     display: block;
  333.  }
  335.  .banner .banner_c_t .banner_c_t_c {
  336. background-color: rgb(253, 253, 253);
  337. width: 594px;
  338. height: 36px;
  339. border-left: 1px solid rgb(208, 204, 204);
  340. margin-left: 3px;
  341. padding-left: 5px;
  342. font-size: 14px;
  343. line-height: 36px;
  344. color: #9b9b9b;
  345.  }
  347.  .banner .banner_c_t .banner_c_t_r {
  348.     background-color: #ff5000;
  349.         width: 78px;
  350.         height: 36px;
  351.         border-radius: 25px;
  352.         text-align: center;
  353.         line-height: 36px;
  354.         margin-right: 1px;
  355.         cursor: pointer;
  356.         color: white;
  357.  }
  359.  .banner .banner_c_b {
  360.     background-color: rgb(255, 255, 255);
  361.     width: 633px;
  362.     height: 28px;
  363.     display: flex;
  364.     font-size: 12px;
  365.     place-content: space-between;
  366.     padding: 10px 0px 0px 10px;
  367.  }
  369.  .banner .banner_c_b li a:hover {
  370.     color: #f47a00;
  371.  }
  372.  /* banner右侧二维码 */
  373. .banner .banner_t .banner_r {
  374.     background-color: rgb(253, 253, 253);
  375.     width: 62px;
  376.     height:70px;
  377.     margin: 10px auto;
  378.     }
  380. .banner .banner_t .banner_r p {
  381.     color: #ff0000;
  382.     font-size: 12px;
  383.     text-align: center;
  384. }
  386. .banner .banner_t .banner_r img{
  387.     width: 62px;
  388.     height: 62px;
  389.     padding-top: 1px;
  390. }

代码运行效果：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的很好,没什么问题,继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post