Heim >Web-Frontend >HTML-Tutorial >问题：关于贴友分类菜单的实现_html/css_WEB-ITnose
问题：关于贴友分类菜单的实现_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:471260Durchsuche
来源：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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：:before和 :after_html/css_WEB-ITnoseNächster Artikel：一款纯css3实现的动画加载导航_html/css_WEB-ITnose