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

问题：关于贴友分类菜单的实现_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:56:47

asal

1239 orang telah melayarinya

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

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

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

html：

   1: <body>

Salin selepas log masuk

   2:     <div class="test">

Salin selepas log masuk

   3:         <h3>所有分类</h3>

Salin selepas log masuk

   4:         <div class="fenlei">

Salin selepas log masuk

   5:             <h4>精美包包</h4>

Salin selepas log masuk

   6:             <ul>

Salin selepas log masuk

   7:                 <li>双肩包</li>

Salin selepas log masuk

   8:                 <li style="margin-left:40px;">手提包</li>

Salin selepas log masuk

   9:                 <li>女包</li>

Salin selepas log masuk

  10:                 <li style="margin-left:57px;">男包</li>

Salin selepas log masuk

  11:             </ul>

Salin selepas log masuk

  12:         </div>

Salin selepas log masuk

  13:         <div class="fenlei">

Salin selepas log masuk

  14:             <h4>时尚手表</h4>

Salin selepas log masuk

  15:             <ul>

Salin selepas log masuk

  16:                 <li>充电器</li>

Salin selepas log masuk

  17:                 <li style="margin-left:40px;">男表</li>

Salin selepas log masuk

  18:                 <li>女表</li>

Salin selepas log masuk

  19:                 <li style="margin-left:57px;">情侣表</li>

Salin selepas log masuk

  20:             </ul>

Salin selepas log masuk

  21:         </div>

Salin selepas log masuk

  22:         <div class="fenlei">

Salin selepas log masuk

  23:             <h4>时尚化妆品</h4>

Salin selepas log masuk

  24:             <ul>

Salin selepas log masuk

  25:                 <li>润肤霜</li>

Salin selepas log masuk

  26:                 <li style="margin-left:40px;">面膜</li>

Salin selepas log masuk

  27:                 <li>彩妆用品</li>

Salin selepas log masuk

  28:             </ul>

Salin selepas log masuk

  29:         </div>

Salin selepas log masuk

  30:         <div class="fenlei">

Salin selepas log masuk

  31:             <h4>潮流卫衣</h4>

Salin selepas log masuk

  32:             <ul>

Salin selepas log masuk

  33:                 <li>男士卫衣</li>

Salin selepas log masuk

  34:                 <li style="margin-left:30px;">女士卫衣</li>

Salin selepas log masuk

  35:                 <li>进口卫衣</li>

Salin selepas log masuk

  36:             </ul>

Salin selepas log masuk

  37:         </div>

Salin selepas log masuk

  38:     </div>

Salin selepas log masuk

  39: </body>

Salin selepas log masuk

css:

   1: *

Salin selepas log masuk

   2: {

Salin selepas log masuk

   3:     margin: 0 auto;

Salin selepas log masuk

   4: }

Salin selepas log masuk

   5: .test

Salin selepas log masuk

   6: {

Salin selepas log masuk

   7:     width: 200px;

Salin selepas log masuk

   8:     height: 350px;

Salin selepas log masuk

   9:     border: 1px solid red;

Salin selepas log masuk

  10: }

Salin selepas log masuk

  11: h3

Salin selepas log masuk

  12: {

Salin selepas log masuk

  13:     background-color: #B90101;

Salin selepas log masuk

  14:     padding: 5px;

Salin selepas log masuk

  15:     color: white;

Salin selepas log masuk

  16: }

Salin selepas log masuk

  17: .fenlei

Salin selepas log masuk

  18: {

Salin selepas log masuk

  19:     border-bottom: 1px solid #ccc;

Salin selepas log masuk

  20:     width: 190px;

Salin selepas log masuk

  21:     margin-top: 5px;

Salin selepas log masuk

  22:     margin-left: 5px;

Salin selepas log masuk

  23:     float: left;

Salin selepas log masuk

  24: }

Salin selepas log masuk

  25: .fenlei ul

Salin selepas log masuk

  26: {

Salin selepas log masuk

  27:     position: relative;

Salin selepas log masuk

  28:     margin-left: -30px;

Salin selepas log masuk

  29:     float: left;

Salin selepas log masuk

  30: }

Salin selepas log masuk

  31: .fenlei li

Salin selepas log masuk

  32: {

Salin selepas log masuk

  33:     float: left;

Salin selepas log masuk

  34:     text-align: left;

Salin selepas log masuk

  35:     margin-left: 20px;

Salin selepas log masuk

  36:     margin-top: 5px;

Salin selepas log masuk

  37: }

Salin selepas log masuk

效果如图：

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