search

博客列表 >作业-左侧菜单

作业-左侧菜单

晓文
晓文原创
2022年05月07日 23:06:10365浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>左侧菜单</title>
  6.     <style>
  7.         body{
  8.             padding: 10px 0 10px 0; margin:0;
  9.             background-color: #DDD;
  10.         }
  11.         ul,li,a{
  12.             padding:0; margin: 0;
  13.         }
  14.         a{
  15.             text-decoration: none;
  16.         }
  17.         .left-menu{
  18.             width:250px;
  19.             height: auto;
  20.             overflow: hidden;
  21.             font-size: 14px;
  22.             margin: 0 auto;
  23.             background-color: #FFF;
  24.             padding: 5px 0;
  25.         }
  26.         li{
  27.             list-style: none;
  28.         }
  29.         .left-menu ul li{
  30.             width:100%; height: auto; overflow: hidden; min-height: 25px; line-height: 25px;
  31.             padding: 0 10px;
  32.             box-sizing: border-box;
  33.         }
  34.         .left-menu ul li a{
  35.             color:#333;
  36.         }
  37.         .left-menu ul li a:hover{
  38.             color:#c81623;
  39.         }
  40.         .left-menu ul li span{
  41.             color:#333;
  42.             padding: 0 1px;
  43.         }
  44.         .left-menu ul li:hover{
  45.             background-color: #CCC;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="left-menu">
  51.         <ul>
  52.             <li>
  53.                 <a href="">家用电器</a>
  54.             </li>
  55.             <li>
  56.                 <a href="">手机</a>
  57.                 <span>/</span>
  58.                 <a href="">运营商</a>
  59.                 <span>/</span>
  60.                 <a href="">数码</a>
  61.             </li>
  62.             <li>
  63.                 <a href="">电脑</a>
  64.                 <span>/</span>
  65.                 <a href="">办公</a>
  66.             </li>
  67.             <li>
  68.                 <a href="">家居</a>
  69.                 <span>/</span>
  70.                 <a href="">家具</a>
  71.                 <span>/</span>
  72.                 <a href="">家装</a>
  73.                 <span>/</span>
  74.                 <a href="">厨具</a>
  75.             </li>
  76.             <li>
  77.                 <a href="">男装</a>
  78.                 <span>/</span>
  79.                 <a href="">女装</a>
  80.                 <span>/</span>
  81.                 <a href="">童装</a>
  82.                 <span>/</span>
  83.                 <a href="">内衣</a>
  84.             </li>
  85.         </ul>
  86.     </div>
  87. </body>
  88. </html>
上一条：链接，图片，及表格下一条：作业-列表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议