<html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><style>blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{margin: 0;padding: 0;}h3 { display: block; margin: 0; padding: 0;}.cat { position: relative; width: 150px; background: #f8f8f8; border: 1px solid #bbb;}.cat-1{background-position:0 0;}ol, ul { list-style: none;}li { z-index: 2; position: relative; display: block; height: 31px; line-height: 31px; overflow: hidden; margin: 1px 10px 0; vertical-align: bottom; border-bottom: 1px solid #dedede}li h3 { font-size: 14px; font-weight: 400;}li i { display: inline; float: left; margin: 3px 10px 0 0; height: 24px; width: 30px; background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg)} /* 在这里补充雪碧图的样式 */.cat-1 i{background-position:0 0;}.cat-2 i{background-position:0 -24;}.cat-3 i{background-position:0 -48;}.cat-4 i{background-position:0 -72;}.cat-5 i{background-position:0 -96;}.cat-6 i{background-position:0 -120;}.cat-7 i{background-position:0 -144;}.cat-8 i{background-position:0 -168;}</style></head><body> <div class="cat"> <ul > <li class="cat-1"> <i></i> <h3>服装内衣</h3> </li> <li class="cat-2"> <i></i> <h3>鞋包配饰</h3> </li> <li class="cat-3"> <i></i> <h3>运动户外</h3> </li> <li class="cat-4"> <i></i> <h3>珠宝手表</h3> </li> <li class="cat-5"> <i></i> <h3>手机数码</h3> </li> <li class="cat-6"> <i></i> <h3>家电办公</h3> </li> <li class="cat-7"> <i></i> <h3>护肤彩妆</h3> </li> <li class="cat-8"> <i></i> <h3>母婴用品</h3> </li> </ul> </div></body></html>
1 回答
- 1 回答
- 0 关注
- 1209 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消