首页 > 代码库 > 问题：关于贴友分类菜单的实现

问题：关于贴友分类菜单的实现

2024-07-25 08:25:46   220人阅读

来源：http://www.ido321.com/868.html


贴友需求，实现图示菜单的分类

我对于这个问题的实现，不足之处，请求指正。

html：

   1: <body>
   2:     <div class="test">
   3:         <h3>所有分类</h3>
   4:         <div class="fenlei">
   5:             <h4>精美包包</h4>
   6:             <ul>
   7:                 <li>双肩包</li>
   8:                 <li style="margin-left:40px;">手提包</li>
   9:                 <li>女包</li>
  10:                 <li style="margin-left:57px;">男包</li>
  11:             </ul>
  12:         </div>
  13:         <div class="fenlei">
  14:             <h4>时尚手表</h4>
  15:             <ul>
  16:                 <li>充电器</li>
  17:                 <li style="margin-left:40px;">男表</li>
  18:                 <li>女表</li>
  19:                 <li style="margin-left:57px;">情侣表</li>
  20:             </ul>
  21:         </div>
  22:         <div class="fenlei">
  23:             <h4>时尚化妆品</h4>
  24:             <ul>
  25:                 <li>润肤霜</li>
  26:                 <li style="margin-left:40px;">面膜</li>
  27:                 <li>彩妆用品</li>
  28:             </ul>
  29:         </div>
  30:         <div class="fenlei">
  31:             <h4>潮流卫衣</h4>
  32:             <ul>
  33:                 <li>男士卫衣</li>
  34:                 <li style="margin-left:30px;">女士卫衣</li>
  35:                 <li>进口卫衣</li>
  36:             </ul>
  37:         </div>
  38:     </div>
  39: </body>

css:

   1: *
   2: {
   3:     margin: 0 auto;
   4: }
   5: .test
   6: {
   7:     width: 200px;
   8:     height: 350px;
   9:     border: 1px solid red;
  10: }
  11: h3
  12: {
  13:     background-color: #B90101;
  14:     padding: 5px;
  15:     color: white;
  16: }
  17: .fenlei
  18: {
  19:     border-bottom: 1px solid #ccc;
  20:     width: 190px;
  21:     margin-top: 5px;
  22:     margin-left: 5px;
  23:     float: left;
  24: }
  25: .fenlei ul
  26: {
  27:     position: relative;
  28:     margin-left: -30px;
  29:     float: left;
  30: }
  31: .fenlei li
  32: {
  33:     float: left;
  34:     text-align: left;
  35:     margin-left: 20px;
  36:     margin-top: 5px;
  37: }

效果如图：

演示地址：http://jsfiddle.net/Web_Code/yhLnj7gh/embedded/result/

问题：关于贴友分类菜单的实现


联系
我们