对于使用p和CSS的设计也是比较有意思的设计效果，这次文章就给大家简单的介绍下p和CSS实现电台列表设计，怎么实现效果，实现p和CSS实现电台列表设计效果的代码是什么？下面一起来看看。
CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所需要的图标汇总在一张图片中，一次下载即可整个页面应用
以下示例主要是CSS精灵技术的应用，直接Po代码：
酷狗电台列表设计 #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); } function mouseoverhandle(obj){ obj.className += ' choose'; } function mouseouthandle(obj){ obj.className = obj.className.substring(0,2); }
-
酷狗热歌
徐朗 - 小夜曲 -
DJ热碟
曾春年 - 最幸福的人 -
网络红歌
徐志强 - 想你的时候 -
新歌
孙俪 - 美丽信号 -
经典
立即学习“前端免费学习笔记（深入）”；
游鸿明 - 寻你 -
怀旧粤语
陈慧娴 - 人生何处不相逢 -
钢琴
July - My Soul -
KTV必点
蔡健雅 - 无底洞 -
思念
张杰 - 这就是爱 -
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()负责切换到下一个音乐台的歌曲的播放。
对象的方法内部不可以设置自身为超时函数
相关推荐：
div和css布局的基本知识分享
怎样用DIV和CSS做导航条
Div和CSS 该怎样学习
以上就是DIV和CSS怎么实现电台列表设计_DIV和CSS实现电台列表设计代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609805.html
微信扫一扫 
支付宝扫一扫 
