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

Bertha 。 2022-08-12 21:29 87阅读 0赞

来源：[http://www.ido321.com/868.html][http_www.ido321.com_868.html]

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

![SouthEast][]

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

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: }

效果如图：

![SouthEast 1][]

演示地址：[http://jsfiddle.net/Web\_Code/yhLnj7gh/embedded/result/][http_jsfiddle.net_Web_Code_yhLnj7gh_embedded_result]

[http_www.ido321.com_868.html]: http://www.ido321.com/868.html
[SouthEast]: /images/20220810/3f5ccfe7044342188504d2fa6657d4b9.png
[SouthEast 1]: /images/20220810/b82d0821ec5146b49a7fc6a60e592ee2.png
[http_jsfiddle.net_Web_Code_yhLnj7gh_embedded_result]: http://jsfiddle.net/Web_Code/yhLnj7gh/embedded/result/