来源:http://www.ido321.com/868.html
贴友需求,实现图示菜单的分类
我对于这个问题的实现,不足之处,请求指正。
html:
1: <body>
Copier après la connexion
2: <div class="test">
Copier après la connexion
3: <h3>所有分类</h3>
Copier après la connexion
4: <div class="fenlei">
Copier après la connexion
5: <h4>精美包包</h4>
Copier après la connexion
6: <ul>
Copier après la connexion
7: <li>双肩包</li>
Copier après la connexion
8: <li style="margin-left:40px;">手提包</li>
Copier après la connexion
9: <li>女包</li>
Copier après la connexion
10: <li style="margin-left:57px;">男包</li>
Copier après la connexion
11: </ul>
Copier après la connexion
12: </div>
Copier après la connexion
13: <div class="fenlei">
Copier après la connexion
14: <h4>时尚手表</h4>
Copier après la connexion
15: <ul>
Copier après la connexion
16: <li>充电器</li>
Copier après la connexion
17: <li style="margin-left:40px;">男表</li>
Copier après la connexion
18: <li>女表</li>
Copier après la connexion
19: <li style="margin-left:57px;">情侣表</li>
Copier après la connexion
20: </ul>
Copier après la connexion
21: </div>
Copier après la connexion
22: <div class="fenlei">
Copier après la connexion
23: <h4>时尚化妆品</h4>
Copier après la connexion
24: <ul>
Copier après la connexion
25: <li>润肤霜</li>
Copier après la connexion
26: <li style="margin-left:40px;">面膜</li>
Copier après la connexion
27: <li>彩妆用品</li>
Copier après la connexion
28: </ul>
Copier après la connexion
29: </div>
Copier après la connexion
30: <div class="fenlei">
Copier après la connexion
31: <h4>潮流卫衣</h4>
Copier après la connexion
32: <ul>
Copier après la connexion
33: <li>男士卫衣</li>
Copier après la connexion
34: <li style="margin-left:30px;">女士卫衣</li>
Copier après la connexion
35: <li>进口卫衣</li>
Copier après la connexion
36: </ul>
Copier après la connexion
37: </div>
Copier après la connexion
38: </div>
Copier après la connexion
39: </body>
Copier après la connexion
css:
1: *
Copier après la connexion
2: {
Copier après la connexion
3: margin: 0 auto;
Copier après la connexion
4: }
Copier après la connexion
5: .test
Copier après la connexion
6: {
Copier après la connexion
7: width: 200px;
Copier après la connexion
8: height: 350px;
Copier après la connexion
9: border: 1px solid red;
Copier après la connexion
10: }
Copier après la connexion
11: h3
Copier après la connexion
12: {
Copier après la connexion
13: background-color: #B90101;
Copier après la connexion
14: padding: 5px;
Copier après la connexion
15: color: white;
Copier après la connexion
16: }
Copier après la connexion
17: .fenlei
Copier après la connexion
18: {
Copier après la connexion
19: border-bottom: 1px solid #ccc;
Copier après la connexion
20: width: 190px;
Copier après la connexion
21: margin-top: 5px;
Copier après la connexion
22: margin-left: 5px;
Copier après la connexion
23: float: left;
Copier après la connexion
24: }
Copier après la connexion
25: .fenlei ul
Copier après la connexion
26: {
Copier après la connexion
27: position: relative;
Copier après la connexion
28: margin-left: -30px;
Copier après la connexion
29: float: left;
Copier après la connexion
30: }
Copier après la connexion
31: .fenlei li
Copier après la connexion
32: {
Copier après la connexion
33: float: left;
Copier après la connexion
34: text-align: left;
Copier après la connexion
35: margin-left: 20px;
Copier après la connexion
36: margin-top: 5px;
Copier après la connexion
37: }
Copier après la connexion
效果如图:
演示地址:http://jsfiddle.net/Web_Code/yhLnj7gh/embedded/result/