实例展示DIV+CSS实现电台列表

这篇文章主要介绍了p+css实现电台列表设计的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所需要的图标汇总在一张图片中，一次下载即可整个页面应用

以下示例主要是CSS精灵技术的应用，直接Po代码：

    
    
    
    



    

        

            

            

            

        

        

            
酷狗热歌
            徐朗 - 小夜曲
        

    
    

        

            

            

            

        

        

            
DJ热碟
立即学习“前端免费学习笔记（深入）”；
            曾春年 - 最幸福的人
        

    
    

        

            

            

            

        

        

            
网络红歌
            徐志强 - 想你的时候
        

    
    

        

            

            

            

        

        

            
新歌
            孙俪 - 美丽信号
        

    
    

        

            

            

            

        

        

            
经典
            游鸿明 - 寻你
        

    
    

        

            

            

            

        

        

            
怀旧粤语
            陈慧娴 - 人生何处不相逢
        

    
    

        

            

            

            

        

        

            
钢琴
            July - My Soul
        

    
    

        

            

            

            

        

        

            
KTV必点
            蔡健雅 - 无底洞
        

    
    

        

            

            

            

        

        

            
思念

							

								
								

									mall电商系统
									
mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署。前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。
								
								下载 
							
						
            张杰 - 这就是爱
        

    
    

        

            

            

            

        

        

            
DJ外文舞曲
            Jean Cloud Ades
        

    

生成效果：

代码分析：

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()负责切换到下一个音乐台的歌曲的播放。

对象的方法内部不可以设置自身为超时函数