CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所需要的图标汇总在一张图片中，一次下载即可整个页面应用
以下示例主要是CSS精灵技术的应用，直接Po代码：
-
<!DOCTYPE html><html><head><metacharset="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 div{margin:5px 0 5px 0;}.d div{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 div{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><ulid="frm"><liclass="l1"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>酷狗热歌</div><spanhref="#">徐朗 - 小夜曲</span></div></li><liclass="l2"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>DJ热碟</div><spanhref="#">曾春年 - 最幸福的人</span></div></li><liclass="l3"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>网络红歌</div><spanhref="#">徐志强 - 想你的时候</span></div></li><liclass="l4"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>新歌</div><spanhref="#">孙俪 - 美丽信号</span></div></li><liclass="l5"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>经典</div><spanhref="#">游鸿明 - 寻你</span></div></li><liclass="l6"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>怀旧粤语</div><spanhref="#">陈慧娴 - 人生何处不相逢</span></div></li><liclass="l7"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>钢琴</div><spanhref="#">July - My Soul</span></div></li><liclass="l8"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>KTV必点</div><spanhref="#">蔡健雅 - 无底洞</span></div></li><liclass="l9"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>思念</div><spanhref="#">张杰 - 这就是爱</span></div></li><liclass="ll"onmouseover="mouseoverhandle(this)"onmouseout="mouseouthandle(this)"><divclass="d"><divclass="img"></div><divclass="mask"></div><divclass="play"></div></div><divclass="cont"><div>DJ外文舞曲</div><spanhref="#">Jean Cloud Ades</span></div></li></ul><script>var ul = document.getElementById('frm');var li = document.getElementsByTagName('li');var spans;for(var i=0;i<li.length;i++){spans=li[i].getElementsByTagName('span');li[i].span_obj=spans[0];}var index = -1;function showup(){if(li[index].span_obj.style.top == ''){li[index].span_obj.style.top='13px';}if(parseInt(li[index].span_obj.style.top)<=0){li[index].span_obj.style.top='';setTimeout('shownext()',1000);}else{li[index].span_obj.style.top=parseInt(li[index].span_obj.style.top)-1 +'px';setTimeout('showup()',100);}}function shownext(){index++;index= index%li.length;showup();}setTimeout(shownext,1000);</script></body></html>
var ul = document.getElementById(‘frm’);
var li = document.getElementsByTagName(‘li’);
var spans;
for(var i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var index = -1;
function showup(){
if(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}else{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
setTimeout('showup()',100);
}
}
function shownext(){
index++;
index = index%li.length;
showup();
}
setTimeout(shownext,1000);
生成效果：
代码分析：
1.ul标签内部含有10个li标签，因为每个li标签的图标为不同的子图片，所以给每个li标签里添加不同的class属性。
2.每个li标签的class属性为d的div标签里面包含了3个div标签，它们的class属性为img、mask和play，这三个标签依次为主题图标、遮罩图标和播放图标，而他们的父节点div(class属性为d)以背景图片作为边框。
3.每个li标签都添加了onmouseover以及onmouseout事件响应函。
4.最后面一段js代码是模拟音乐盒歌曲切换时的歌曲名上升的效果。
首先程序获取id为frm的标签，并获取该标签的所有li子标签，同时获取所有li的span标签，并绑定第一个span标签到li标签对象的span_obj上。
两个超时函数：shownext()以及showup()，其中showup()函数负责产生歌名升起效果，而函数shownext()负责切换到下一个音乐台的歌曲的播放。
对象的方法内部不可以设置自身为超时函数
想必朋友们看完这篇“DIV+CSS电台列表设计代码”文章后，大家都知道怎么操作了吧！爱站技术频道网站每天都会提供不同类型的文章给大家，喜欢不妨收藏起来。