首頁 > 開發者 > JavaScript
css 雪碧圖的製作，css雪碧圖
很多網站其實都用了雪碧圖，確實方便了製作，以前以為這種小表徵圖，都是一個一個圖片呢（笑）
如下：
代碼如下：
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14px;font-weight:400;font-family:"微軟雅黑" } li{ display: block; height: 31px; line-height: 31px; overflow: hidden; border-bottom: 1px solid #dedede; margin: 1px 10px 0 } li i{ display:inline; background: url(sidebar.png); width:30px; height: 24px; float: left; margin:3px 10px 0 0 ; } .cat{ width: 150px; background:#f8f8f8 ; border: 1px solid #bbb; } .cat-1 i {background-position: 0 0:} .cat-2 i{background-position: 0 -24px;} .cat-3 i{background-position: 0 -48px;} .cat-4 i{background-position: 0 -72px;} .cat-5 i{background-position: 0 -96px;} .cat-6 i{background-position: 0 -120px;} .cat-7 i{background-position: 0 -144px;} .cat-8 i{background-position: 0 -168px;} </style></head><body><div class="cat"> <ul> <li class="cat-1"> <i></i> <h3>服裝內衣</h3> </li> </ul> <ul> <li class="cat-2"> <i></i> <h3>鞋包配飾</h3> </li> </ul> <ul> <li class="cat-3"> <i></i> <h3>運動戶外</h3> </li> </ul> <ul> <li class="cat-4"> <i></i> <h3>珠寶手錶</h3> </li> </ul> <ul> <li class="cat-5"> <i></i> <h3>手機數位</h3> </li> </ul> <ul> <li class="cat-6"> <i></i> <h3>護膚彩妝</h3> </li> </ul> <ul> <li class="cat-7"> <i></i> <h3>辦公電腦</h3> </li> </ul> <ul> <li class="cat-8"> <i></i> <h3>母嬰用品</h3> </li> </ul></div></body>
雪碧圖是自己拼起來的
作為非電腦專業的學生，學前端一個月了，希望自己能堅持下去
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
