jQuery案例-网页播放器02布局
本文共 8307 字，大约阅读时间需要 27 分钟。
布局实现
1. 头部
2.主体部分
比较简单，主要分为左侧歌曲列表和右侧歌曲信息
- 收藏
- 添加到
- 下载
- 删除
- 清空列表
歌曲 歌手 时长
3. 尾部
尾部进度条样式需要注意，进度条一般都是点线组成。
4. 遮罩效果
样式实现
1. 头部
主要负责整个页面的初始化以及头部的样式，opacity为透明度，搭配：hover可实现一些不错的效果。user-select: none不让用户选中，减少无效操作。
* { margin: 0; padding: 0;}html { font-size: 14px; height: 100%;}a { text-decoration: none; color: white;}li { list-style: none;}header { width: 100%; height: 50px; user-select: none;}.logo img { float: left; margin: 20px; width: 50px;}header > ul { float: right;}header > ul > li { float: left; margin-right: 30px; line-height: 50px; opacity: .5;}header > ul > li:hover { opacity: 1;} 2. 主体部分
2.1 顶部导航
main { user-select: none; height: 600px; width: 1200px; margin: 0 auto;}.music { width: 800px; height: 100%; float: left;}.music_nav { width: 100%; height: 60px; padding-top: 10px; margin-left: 20px;}.music_nav > li { box-sizing: border-box; float: left; width: 140px; color: white; opacity: .5; border: 1px solid #ffffff; line-height: 30px; margin-left: 10px; text-align: center; border-radius: 5px; cursor: pointer;}.music_nav > li > span { display: inline-block; width: 18px; height: 18px; background: url("img/icon_sprite.png") no-repeat 0 0; margin: 0 5px -4px 0;}.music_nav > li:nth-child(1) > span { background-position: -60px -20px;}.music_nav > li:nth-child(2) > span { background-position: -20px -20px;}.music_nav > li:nth-child(3) > span { background-position: -40px -240px;}.music_nav > li:nth-child(4) > span { background-position: -100px -20px;}.music_nav > li:nth-child(5) > span { background-position: -40px -300px;}.music_nav > li:hover { opacity: 1;} 2.2 音乐列表
.music_list { height: 480px; overflow: auto; width: 800px;}.musics { width: 780px; height: 80px; color: white; position: relative;}.musics > li { position: absolute; opacity: .5;}.musics_li2 { opacity: 1 !important;}.list_check i { display: inline-block; width: 14px; height: 14px; border: 1px solid #fff; opacity: .5;}.current_i { background: url("img/duihao.png") no-repeat; background-size: 13px 13px; opacity: 1 !important;}.list_check { top: 32px; left: 30px;}.list_num { top: 30px; left: 100px;}.list_num2 { background: url("img/wave.gif") no-repeat 0 0; color: transparent;}.list_song { top: 30px; left: 120px;}.list_name { top: 30px; left: 500px;}.list_time { top: 30px; left: 700px;}.musics > ul > a { opacity: .5; display: inline-block; width: 36px; height: 36px; border-radius: 50%; background: url("img/icon_list_menu.png") no-repeat 0 0;}.musics > ul > a:hover { opacity: 1;}.musics > ul { display: none; position: absolute; left: 300px; top: 20px;}.musics > ul .list_play { background-position: -120px 0;}.list_play2 { background-position: -120px -200px !important;}.list_add { background-position: -120px -80px !important;}.list_down { background-position: -120px -120px !important;}.list_share { background-position: -120px -40px !important;}.list_drop { background-position: -120px -160px !important; position: absolute; top: 0; left: 435px;} 2.3 歌曲信息
.info { width: 400px; height: 100%; float: right;}.info_img { width: 200px; height: 180px; margin: 100px 0 0 100px; background: url("img/album_cover_player.png");}.info_img > img { width: 200px; height: 180px; margin-left: -20px;}.info_words { line-height: 20px; text-align: center; opacity: .7; padding-top: 20px;}.info_lryic { opacity: .7; text-align: center;}.showarea{ margin-top: 50px; height: 100px; overflow: hidden;}.info_lyric li { line-height: 20px;}.info_words a { color: #000;} 3. 尾部
footer { user-select: none; width: 1200px; height: 50px; margin: 0 auto;}footer li { background: url("img/player.png") no-repeat 0 0; opacity: .5;}footer li:hover { opacity: 1;}.control { float: left; height: 50px; padding-top: 10px; margin-left: 20px;}.control li { float: left; margin-left: 30px; line-height: 50px;}.prev { width: 19px; height: 20px; background-position: 0 -30px !important; margin-top: 5px;}.play { width: 21px; height: 29px; background-position: 0 0;}.play2 { background-position: -30px 0 !important;}.next { width: 19px; height: 20px; background-position: 0 -52px !important; margin-top: 5px;}.funcs { height: 50px; float: left; position: relative;}.funcs li { float: left; line-height: 50px; margin-left: 30px;}.mode { width: 26px; height: 25px; background-position: 0 -205px; margin-top: 13px;}.like { width: 24px; height: 21px; background-position: 0 -96px; margin-top: 15px;}.load { width: 22px; height: 21px; background-position: 0 -120px; margin-top: 13px;}.comment { width: 24px; height: 24px; background-position: 0 -400px; margin-top: 13px;}.toggle { width: 74px; height: 27px; background-position: 0 -281px; margin-top: 10px;}.voice { width: 26px; height: 21px; background-position: 0 -144px; margin-top: 13px;}.voice2 { background-position: 0 -182px !important;}.voice_bar { position: absolute; right: -70px; top: 22px; height: 3px; width: 60px; background-color: rgba(255, 255, 255, .5);}.voice_bar .voice_line { height: 100%; width: 20px; background-color: #ffffff;}.voice_bar .voice_dot { height: 10px; width: 10px; background-color: #ffffff; border-radius: 50%; position: absolute; top: -3px; left: 20px;}.progress { width: 500px; height: 50px; float: left; margin-left: 50px;}.progress_top { width: 100%; height: 30px; line-height: 30px; text-align: center;}.progress_top span { color: #ffffff; opacity: .5;}.progress_top .progress_name { float: left;}.progress_top .progress_name:hover { opacity: 1;}.progress_top .progress_time { float: right;}.progress_bar { margin-top: 5px; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.5); position: relative;}.progress_bar .progress_line { width: 0; height: 100%; background: #fff;}.progress_bar .progress_dot { width: 14px; height: 14px; border-radius: 50%; background-color: #fff; position: absolute; top: -6px; left: 0;}.noclick { pointer-events: none;}.mask_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("img/傅如乔.png") no-repeat; background-size: cover; z-index: -1; filter: blur(50px);}.mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: .5; z-index: -1;}.cur { color: #00ff00; font-weight: bold;} 总结
先布好局，才能好好写脚本。
转载地址：http://whozi.baihongyu.com/
你可能感兴趣的文章
读写blob类型字段
查看>>
js类型转换
查看>>
spring实例化Bean理解
查看>>
Mac下配置JAVA_HOME
查看>>
fedora 安装mp3播放器插件
查看>>
赏心悦目的宏代码
查看>>
理解套接字recv()，send()
查看>>
发一个C++写的跨平台的BlockingQueue
查看>>
Linux TCP/IP协议栈剖析【体系结构篇】
查看>>
游戏开发中预防内存泄露的一些措施
查看>>
以前的文章全部移除了。
查看>>
几首歌
查看>>
蝴蝶泉边
查看>>
编码转换
查看>>
freerice
查看>>
Does your mother know
查看>>
《写出质量好软件的75条体会》暨答案ZT [转自monkyy的blog]
查看>>
关于详细设计
查看>>
POJ2838,Sliding Window（单调队列）
查看>>
牛客练习赛50，B tokitsukaze and Hash Table（STL+输入输出挂）
查看>>