问题：关于贴友分类菜单的实现_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:56:471237浏览
来源：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/
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn