標籤：bottom ext tle 排版 line 注意 利用 isp logs
關於雪碧圖(css sprites)網上已經有非常詳細的介紹，比如百度百科，最簡單的來說，CSS sprite即把網頁中比較小的一些小圖片整合到一張圖片檔案中，再利用CSS的background-image屬性插入圖片，然後利用background-position屬性對圖片所需要的部分進行精確定位，從而達到減少伺服器請求次數的目的。
這裡主要使用雪碧圖實現一個最簡單的小表徵圖導航展示。具體代碼可以見附件1，素材詳見附件2，詳見附件3。
本例使用內部樣式的方式對整個文檔格式化處理，最核心的部分採用無序列表的方式完成對導航條目的排版。內部樣式中:#mainbody{}部分即對主體部分完成初試化工作，接下來清除CSS中ul的預設屬性，然後對列表中的每一行li完成初始化工作，其次對h3格式進行重設，滿足自身需要，使用text-indent屬性讓文字縮排，以便於騰出置放表徵圖的空間，最後便是關於CSS sprites中最核心的部分：
background: url(00.png) no-repeat;.sp-1 i{background-position: 0px 0px;}.sp-2 i{background-position: -26px 0px;}.sp-3 i{background-position: -26px -27px;}.sp-4 i{background-position: 0px -27px;}
這裡應尤其注意到background-position屬性中座標的方向問題，CSS中規定圖片的左上方為原點(0px 0px)
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" /> <title>CSS Sprites</title> <style type="text/css"> *{margin: 0px; padding: 0px;} #mainbody{ position: relative; width: 100px; height: 150px; border: solid 2px #fff; padding: 2px; } ul{list-style: none;} li{ display: block; height: 25px; line-height: 25px; overflow: hidden; margin: 5px; border-bottom: 3px solid #dedede } h3{ font-weight: 100; font-size: 14px; text-indent: 10px; } li i{ background: url(00.png) no-repeat; display: inline; width: 25px; height: 25px; float: left; } .sp-1 i{background-position: 0px 0px;} .sp-2 i{background-position: -26px 0px;} .sp-3 i{background-position: -26px -27px;} .sp-4 i{background-position: 0px -27px;} </style></head><body><div id="mainbody"> <ul> <li class="sp-1"> <i></i> <h3>首頁</h3> </li> <li class="sp-2"> <i></i> <h3>空間</h3> </li> <li class="sp-3"> <i></i> <h3>網路</h3> </li> <li class="sp-4"> <i></i> <h3>其他</h3> </li> </ul></div></body></html>附件2
素材：
：
CSS sprites(css精靈)
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
