CSS Spite技術：也就是CSS精靈技術，實際上CSS的精靈就是圖片里的一個個的圖標元素，這些圖標可以使按鈕、標簽以及logo等等。很多網站中都應用了該技術，可有效減少傳輸請求次數，所需要的圖標匯總在一張圖片中，一次下載即可整個頁面應用

以下示例主要是CSS精靈技術的應用，直接Po代碼：

 !DOCTYPE html  html  head  meta charset= utf-8  title 酷狗電臺列表設計 /title  style  #frm{ margin:0; padding:0; list-style-type: none; width: 500px; border:1px solid #000; overflow: hidden; #frm *{ margin:0; padding: 0; font-size: 12px; #frm li{ padding:4px 0; width: 47%; float: left; margin:5px 15px 5px 0; cursor: pointer; #frm li span{ color:#999; position: relative; #frm li .d{ width: 38px; height: 38px; float: left; margin:0px 12px 6px 0; background-image: url(img/spite2.jpg); position: relative; #frm li .cont{ position: relative; height: 37px; overflow: hidden; .cont p{ margin:5px 0 5px 0; .d p{ position: absolute; width: 100%; height: 100%; .d .img,.d .play{ background-image: url(img/spite2.jpg); .l1 .d .img{ background-position: 38px 0; .l2 .d .img{ background-position: 76px 0; .l3 .d .img{ background-position: 114px 0; .l4 .d .img{ background-position: 152px 0; .l5 .d .img{ background-position: 190px 0; .l6 .d .img{ background-position: 228px 0; .l7 .d .img{ background-position: 266px 0; .l8 .d .img{ background-position: 304px 0; .l9 .d .img{ background-position: 342px 0; .ll .d .img{ background-position: 380px 0; .d .mask,.d .play{ visibility: hidden; .choose .d{ background-position: 38px 0; outline: 1px solid rgb(233,243,250); .choose .d .mask{ background-color: #000; filter:alpha(Opacity=50); opacity: 0.5; height: 32px; width: 32px; top:3px; left: 3px; visibility: visible; .choose .d .play{ background-position: 418px 0; visibility: visible; .choose .cont p{ font-weight: bold; color:rgb(0,155,250); /style  script  function mouseoverhandle(obj){ obj.className += choose  function mouseouthandle(obj){ obj.className = obj.className.substring(0,2); /script  /head  body  ul id= frm  li >
生成效果：
代碼分析： 
1.ul標簽內部含有10個li標簽，因為每個li標簽的圖標為不同的子圖片，所以給每個li標簽里添加不同的class屬性。
2.每個li標簽的class屬性為d的p標簽里面包含了3個p標簽，它們的class屬性為img、mask和play，這三個標簽依次為主題圖標、遮罩圖標和播放圖標，而他們的父節點p(class屬性為d)以背景圖片作為邊框。
3.每個li標簽都添加了onmouseover以及onmouseout事件響應函。
4.最后面一段js代碼是模擬音樂盒歌曲切換時的歌曲名上升的效果。
首先程序獲取id為frm的標簽，并獲取該標簽的所有li子標簽，同時獲取所有li的span標簽，并綁定第一個span標簽到li標簽對象的span_obj上。
兩個超時函數：shownext()以及showup()，其中showup()函數負責產生歌名升起效果，而函數shownext()負責切換到下一個音樂臺的歌曲的播放。
對象的方法內部不可以設置自身為超時函數
以上就是實例展示DIV+CSS實現電臺列表的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。