ASCII码 ASCII码

侧边栏作业

发布于：2022-05-11 16:23:13  栏目：技术文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>侧边栏</title>
  7.     <style>
  8.         *{
  9.             padding: 0px;
  10.         }
  11.         div{
  12.             width: 180px;
  13.             height: 420px;
  14.             margin:auto;
  15.         }
  16.         ul>li{
  17.             display: block;
  18.             width: 165px;
  19.             height: 25px;
  20.             /* border:1px solid #000; */
  21.             padding-left: 15px;
  22.             color: rgb(30,30,30);
  24.         }
  25.         ul>li>a{
  26.             display: inline-block;
  27.             text-decoration: none;
  28.             color: rgb(30,30,30);
  29.             font-size: 13px;
  30.         }
  31.         ul>li:hover{
  32.             background: rgb(217,217,217);
  33.             color: rgb(203,53,59);
  34.         }
  35.         ul>li>a:hover{
  36.             background: rgb(217,217,217);
  37.             color: rgb(203,53,59);
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div>
  43.         <ul>
  44.             <li><a href="#">家用电器</a></li>
  45.             <li><a href="#">手机/</a><a href="#">运营商/</a><a href="#">数码</a></li>
  46.             <li><a href="#">电脑/</a><a href="#">办公</a></li>
  47.             <li><a href="#">家居/</a><a href="#">家具/</a><a href="#">家装/</a><a href="#">厨具</a></li>
  48.             <li><a href="#">男装/</a><a href="#">女装/</a><a href="#">童装/</a><a href="#">内衣</a></li>
  49.             <li><a href="#">美妆/</a><a href="#">个护清洁/</a><a href="#">宠物</a></li>
  50.             <li><a href="#">女鞋/</a><a href="#">箱包/</a><a href="#">钟表/</a><a href="#">珠宝</a></li>
  51.             <li><a href="#">男鞋/</a><a href="#">运动/</a><a href="#">户外</a></li>
  52.             <li><a href="#">房产/</a><a href="#">汽车/</a><a href="#">汽车用品</a></li>
  53.             <li><a href="#">母婴/</a><a href="#">玩具乐器</a></li>
  54.             <li><a href="#">食品/</a><a href="#">酒类/</a><a href="#">生鲜/</a><a href="#">特产</a></li>
  55.             <li><a href="#">艺术/</a><a href="#">礼品鲜花/</a><a href="#">农资绿植</a></li>
  56.             <li><a href="#">医药保健/</a><a href="#">计生情趣</a></li>
  57.             <li><a href="#">图书/</a><a href="#">文娱/</a><a href="#">教育/</a><a href="#">电子书</a></li>
  58.             <li><a href="#">机票/</a><a href="#">酒店/</a><a href="#">旅游/</a><a href="#">生活</a></li>
  59.             <li><a href="#">理财/</a><a href="#">众筹/</a><a href="#">白条/</a><a href="#">保险</a></li>
  60.             <li><a href="#">安装/</a><a href="#">维修/</a><a href="#">清洗/</a><a href="#">二手</a></li>
  61.             <li><a href="#">工业品</a></li>
  62.         </ul>
  63.     </div>
  64. </body>
  65. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行