【QQ音乐Html + CSS静态笔记】
2024-06-04 03:38:04
- 分析导航页 有5部分组成
最大的<div>表示全头部 div表示盒子的意思
<div class="header"></div>第二个div表示上图的所有 表示一个div盒子将5部分装起来
<div class="header"><div class="nav"></div>
</div>我们将将1234放在一个盒子里面 分别做成不同的div盒子
<div class="header"><div class="nav"><div class="nav_t"></div></div>
</div>先加图片
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div></div></div>
</div>效果是这样的
明显图片的比例不太对 我们给class=nav的 div加上宽高 新建css文件 和html在同一个文件下
/*导航头部加宽高*/
.nav{width: 100%;height: 142px;
}
/*导航第一部分加效果*/
.nav .nav_t{width: 100%;height: 90px;border-bottom: 1px solid #F2F2F2;
}引入css样式
在html的header里面添加
<link rel="stylesheet" href="header.css">查看效果 据左上角
添加居中 离开坐标的效果
在css文件里面加
/*logo浮动居左 和左边间隔10像素*/
.nav .nav_t .logo{float: left;margin-left: 10px;}
/*图片设置宽高 和距离上面的位置 左边的位置 */
.nav .nav_t .logo a img{display: block;width: 170px;height: 46px;padding-top: 22px;padding-left: 40px;}第二部分 左侧文字 看加的文字开始和结束 别全部抄
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div><!-- 左侧文字导航--><div class="top_nav__item"><!-- 导航条左边的列表--><ul><!--class="current 加背景 加title --><li><a href="#" class="current" title ="音乐馆">音乐馆</a></li><li><a href="#" title="我的音乐">我的音乐</a></li><li><a href="#" title="客户端">客户端</a></li><li><a href="#" title="开放平台">开放平台</a></li><li><a href="#" title="VIP">VIP</a></li></ul></div>
<!-- 左侧文字导航结束--></div></div>
</div>
需要添加css样式排版
/*向左浮动 和上边距0px*/
.nav .nav_t .top_nav__item{float: left;overflow: hidden;margin-top: 0px;
}
横向排列的css
/*去掉列表前面的 点 · 设置列表的宽高 */
.nav .nav_t .top_nav__item ul{list-style: none;margin-left: 30px;margin-top: 0px;margin-bottom: 0px;height: 90px;
}
/*设置列表横向排列*/
.nav .nav_t .top_nav__item ul li{float: left;
}
/*设置列表间隔出来 颜色 字体大小 行高 */
.nav .nav_t .top_nav__item ul li a{display: block;padding: 0 19px;text-decoration: none;color: #333;font-size: 18px;line-height: 90px;
}添加停留变色 效果
.nav .nav_t .top_nav__item ul li a:hover{color:#31c27c;
}给音乐馆添加背景和文字颜色
/*给音乐馆添加背景和文字颜色*/
.nav .nav_t .top_nav__item ul li .current{background-color: #31c27c;color:white;
}但是会变成这样
所以我们添加悬停效果
/*添加浮动悬停效果*/
.nav .nav_t .top_nav__item ul li .current:hover{color: white;
}搜索框 制作
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div>
<!-- 左侧文字导航--><div class="top_nav__item"><!-- 导航条左边的列表--><ul><!--class="current 加背景 加title --><li><a href="#" class="current" title ="音乐馆">音乐馆</a></li><li><a href="#" title="我的音乐">我的音乐</a></li><li><a href="#" title="客户端">客户端</a></li><li><a href="#" title="开放平台">开放平台</a></li><li><a href="#" title="VIP">VIP</a></li></ul></div><!--搜索框开始--><div class="search"><input type="text" placeholder=" 搜索音乐、MV、歌单、用户" /></div><!--搜索框结束--></div></div>
</div>添加样式
/*搜索框盒子div 靠在左侧导航栏的右边*/
.nav .nav_t .search{float: left;margin:26px 0 0 10px;border: 1px solid #F2F2F2;position: relative;
}/*调整宽高 字体大小*/
.nav .nav_t .search input{width: 225px;height: 30px;font-size: 104px;
}
右边部分
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div>
<!-- 左侧文字导航--><div class="top_nav__item"><!-- 导航条左边的列表--><ul><!--class="current 加背景 加title --><li><a href="#" class="current" title ="音乐馆">音乐馆</a></li><li><a href="#" title="我的音乐">我的音乐</a></li><li><a href="#" title="客户端">客户端</a></li><li><a href="#" title="开放平台">开放平台</a></li><li><a href="#" title="VIP">VIP</a></li></ul></div><!--搜索框开始--><div class="search"><input type="text" placeholder=" 搜索音乐、MV、歌单、用户" /></div><!--搜索框结束--><!--导航右边开始--><div class="header_buttons"><a href="#" class="sumbit">登录</a><a href="#" class="start">开通VIP</a><a href="#" class="pay">充值</a></div><!--导航右边结束--></div></div>
</div>添加样式 右对齐横向分布
/*使整个右边的div靠右 设置宽高*/
.nav .nav_t .header_buttons{width: 200px;height: 90px;float: right;position: relative;margin-right: 30px;
}.nav .nav_t .header_buttons a{display: block;float: left;margin-top: 36px;text-decoration: none;color: #333;padding-right: 5px;font-size: 16px;margin-right: 20px;
}添加文字的效果
/*登录添加白色 背景边框 保持一致 */
.nav .nav_t .header_buttons .start{width: 91px;height: 36px;line-height: 36px;text-align: center;padding: 0 9px;margin-left: 20px;border:1px solid #2caf6f;background-color: #2caf6f;color: white;border-radius: 3px;}
/*开通vip的添加效果*/
.nav .nav_t .header_buttons .start{margin-top: 28px;width: 91px;height: 36px;line-height: 36px;text-align: center;padding: 0 9px;margin-left: 10px;border:1px solid #2caf6f;background-color: #2caf6f;color: white;border-radius: 3px;
}
/*充值添加效果*/
.nav .nav_t .header_buttons .pay{width: 35px;height: 36px;border:1px solid #ccc;padding: 0 9px;margin-top: 28px;margin-left: 0px;text-align: center;line-height: 36px;border-radius: 3px;
}添加第五部分
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div>
<!-- 左侧文字导航--><div class="top_nav__item"><!-- 导航条左边的列表--><ul><!--class="current 加背景 加title --><li><a href="#" class="current" title ="音乐馆">音乐馆</a></li><li><a href="#" title="我的音乐">我的音乐</a></li><li><a href="#" title="客户端">客户端</a></li><li><a href="#" title="开放平台">开放平台</a></li><li><a href="#" title="VIP">VIP</a></li></ul></div><!--搜索框开始--><div class="search"><input type="text" placeholder=" 搜索音乐、MV、歌单、用户" /></div><!--搜索框结束--><!--导航右边开始--><div class="header_buttons"><a href="#" class="sumbit">登录</a><a href="#" class="start">开通VIP</a><a href="#" class="pay">充值</a></div><!--导航右边结束--></div><!--下边第五部分开始--><div class="nav_b"><ul><li><a class="current" href="#">首页</a></li><li><a href="#">专辑</a></li><li><a href="#">歌手</a></li><li><a href="#">排行榜</a></li><li><a href="#">分类歌单</a></li><li><a href="#">电台</a></li><li><a href="#">MV</a></li><li><a href="#">数字专辑</a></li></ul></div><!--第五部分结束--></div>
</div>添加效果
/*添加样式 宽高*/
.nav .nav_b{width: 1200px;height: 50px;align:center;margin: 0 auto ;
}
/*没有序号的样式 */
.nav .nav_b ul{list-style: none;}
/*左对齐的浮动 变成一行*/
.nav .nav_b ul li{float: left;margin-right: 47px;line-height: 50px;text-align: center;
}
/*字体大小 颜色*/
.nav .nav_b ul li a {text-decoration: none;color: #333;font-size: 15px;
}
/*特殊颜色*/
.nav .nav_b ul li .current{color:#31c27c ;
}
/*悬停颜色*/
.nav .nav_b li a:hover{color:#31c27c ;
}添加中间部分
<div class="content"></div>css
/*添加中间div的背景颜色和宽高*/
.content{width: 100%;height: 550px;background-color: #fafafa;background-repeat: no-repeat;background-position: center top;
}<div class="content"><div class="content"><div class="songSheet"></div></div>
</div><div class="content"><div class="content"><div class="songSheet"><div class="songSheet_head"><span class="subtitle">歌 单 推 荐</span></div></div></div>
</div>
css
/*设置表浮动*/
.content .songSheet{position: relative;
}
/*设置内容div的宽高*/
.content .songSheet .songSheet_head{width: 100%;height: 114px;
}
/*设置歌单推荐的文字和居中*/
.subtitle{display: block;font-size: 30px;font-weight: 400;font-style: normal;width: 196px;height: 40px;padding-top: 47px;margin:0 auto;
}html
//和歌单推荐平级 <div class="songSheet_table"><ul><li><a href="#" class="current">为你推荐</a></li><li><a href="#">欧美榜单</a></li><li><a href="#">国语</a></li><li><a href="#">粤语精选</a></li> <li><a href="#">00年代</a></li><li><a href="#">纯音乐</a></li></ul></div>
css
//表格的高.content .songSheet .songSheet_table{height: 50px;overflow: hidden;}
//列表的宽高 取消样式 居中 设置在字体大小.content .songSheet .songSheet_table ul{width: 650px;list-style: none;margin: 0 auto;font-size: 15px;}
//列表浮动.content .songSheet .songSheet_table ul li{float: left;margin: 0 24px;}
//a标签加效果.content .songSheet .songSheet_table ul li a{display: block;text-decoration: none;color: #333;}
//第一个a标签加颜色.content .songSheet .songSheet_table ul li .current{color: #31c27c;}
//超链接加效果.content .songSheet .songSheet_table ul li a:hover{color: #31c27c;}html
//和上面平级 图片自己改<div class="songSheet_pics"><ul><li><img src="../pics/RS1.webp" alt="" class="songSheet_pic"/><i class="mask"></i><i class="cover_icon_play"></i></li><li><img src="../pics/RS2.webp" alt="" class="songSheet_pic"/><i class="mask"></i><i class="cover_icon_play"></i></li><li><img src="../pics/RS3.jpeg" alt="" class="songSheet_pic"/><i class="mask"></i><i class="cover_icon_play"></i></li><li><img src="../pics/RS4.jpeg" alt="" class="songSheet_pic"/><i class="mask"></i><i class="cover_icon_play"></i></li><li><img src="../pics/RS5.jpeg" alt="" class="songSheet_pic"/><i class="mask"></i><i class="cover_icon_play"></i></li></ul></div>
css
/*添加宽高 */
.content .songSheet .songSheet_pics{width: auto;height: 224px;padding-bottom: 20px;
}
/*设置列表的样式无*/
.content .songSheet .songSheet_pics ul{list-style: none;}/*列表内容样式*/
.content .songSheet .songSheet_pics ul li{position: relative;width: 224px;height: 224px;float: left;margin-right:16px;border-radius: 2px;overflow: hidden;
}/* 鼠标指向图片 显示播放按钮及放大动画的实现 */
.cover_icon_play {position: absolute;left: 112px;top: 112px;margin: -35px;width: 70px;height: 70px;filter: alpha(opacity=0);opacity: 0;transform: scale(.7) translateZ(0);transition-property: opacity, transform;transition-duration: .5s;zoom:1
}
/*图标飘移*/
.mask {position: absolute;left: 0px;top: 0px;width: 224px;height: 224px;background-color: #000;opacity: 0;filter: alpha(opacity=0);transition: opacity .5s;transition:opacity .5s
}
/*设置提醒*/
.songSheet_pics ul li:hover .cover_icon_play {opacity: 0.9;transform: scale(1) translateZ(0);transition-property: opacity, transform;transition-duration: .5s;cursor:pointer
}
/*实现放在图上出现播放按钮*/
.songSheet_pics ul li:hover .cover_icon_play, .cover_icon_play {background-image: url(../pic/logo.png);background-repeat: no-repeat;
}
/*控制缩放*/
.songSheet_pics ul li:hover .songSheet_pic{transform: scale(1.06);
}.songSheet_pics ul li:hover .cover_icon_play {opacity: 1;filter:none
}.songSheet_pics ul li:hover .mask {opacity: .2;filter: alpha(opacity=20);transition: opacity .5s;transition:opacity .5s
}/* 动画效果部分完结 */.content .songSheet .songSheet_pics ul li img{width: 224px;height: 224px;transition: all 0.6s;
}html
//平级<div class="songSheet_names"><ul><li><a href="">Live：林俊杰的那些神级现场</a><span>播放量：1353万</span></li><li><a href="">Ed sheeran | 冬日旋律</a><span>播放量：441万</span></li><li><a href="">蒸汽波 | 落日飞车</a><span>播放量：13.6万</span></li><li><a href="">吉他指弹：大师经典作品集</a><span>播放量：13.5万</span></li><li><a href="">2021年1月华语新歌推荐</a><span>播放量：135.1万</span></li></ul></div>
css
/*宽高*/
.content .songSheet .songSheet_names{width: auto;height: 76px;padding-bottom: 10px;
}
/*样式*/
.content .songSheet .songSheet_names ul{list-style: none;margin-left: 0px;
}
/*li横向展示*/
.content .songSheet .songSheet_names ul li{width: 224px;position: relative;float: left;font-size: 14px;font-weight: 400;margin-right: 16px;
}
/*超链接的展示*/
.content .songSheet .songSheet_names ul li a{display: block;text-decoration: none;color: #333;line-height: 22px;
}
/*超链接提示*/
.content .songSheet .songSheet_names ul li a:hover{color:#31c27c;
}
/*播放量span标签*/
.content .songSheet .songSheet_names ul li span{display: block;font-size: 14px;line-height: 21px;color: #999;
}html
//平级 表示歌曲海报下的下面的两个点 和左右按键 <div class="songSheet_circles"><ol><li class="current"></li><li></li></ol></div><div class="carrousel"><a href="#" class="leftBtn"> <img src="pic/qq.png"></a><a href="#" class="rightBtn"><img src="pic/qq.png"></a></div>底部————————————————
<div id="b_div"><div id="b_t_div"><img src="5.jpg" ></div><div id="b_b_div"><div id="b_b_l_div"><ul><li>抵制不良游戏</li><li>拒绝盗版游戏</li><li>注意自我保护</li><li>谨防受骗上当</li><li>适度游戏益脑</li><li>沉迷游戏伤身</li><li>合理安排时间</li><li>享受健康生活</li></ul><p>《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为 艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p></div><div id="b_b_r_div"><div id="b_b_r_t_div"><p>腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作</p><p>COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED. 腾讯公司版权所有 网络游戏行业防沉迷自律公约</p></div><div id="b_b_r_b_div"><img id="img_2" src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png"><p>工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</p><img id="img_3" src="https://game.gtimg.cn/images/js/2018foot/logo/icplogo.png"><p>文网游备字[2016]M-CSG 0059 号|新广出审[2017] 6712号|ISBN 978-7-7979-8408-9</p><span>仿王者荣耀制作 肖行</span></div></div></div>
</div>css
#b_div{width: 1165px;height: 350px;margin-left: 150px;margin: 0 auto;
}
#b_t_div{width: 1165px;height: 80px;margin-bottom: 20px;
}
#b_b_div{display: inline-block;width: 100%;height: 200px;overflow: hidden;
}
#b_b_l_div{width: 510px;height: 200px;float: left;
}
#b_b_r_div{width: 500px;height: 200px;float: right;
}
#b_b_r_t_div{width: 630px;height: 80px;
}
#b_b_r_b_div{width: 630px;height: 80px;position: relative;
}
#b_b_l_div>ul{list-style-type: none;overflow: hidden;
}
#b_b_l_div>ul>li{width: 72px;height: 16px;line-height: 16px;font-size: 12px;color: #6D6D6D;float: left;margin-top: 12px;margin-right: 12px;
}
#b_b_l_div>p{padding-left: 38px;color: #666666;font-size: 12px;margin-top: 6px;
}
#b_b_r_t_div>p{color: #646467;font-size: 12px;margin-top: 12px;margin-bottom: 12px;
}
#b_b_r_b_div>p{display: block;margin-left: 15px;color: #646467;font-size: 12px;margin-top: 0;margin-bottom: 12px;position: relative;top: 0;
}
#img_2{position: absolute;top:1px;
}
#img_3 {position: absolute;
}
#b_b_r_b_div>span{color: #666666;font-size: 12px;margin-top: 40px;
}【QQ音乐Html + CSS静态笔记】相关推荐
- 计算机毕业设计-仿QQ音乐--HTML+CSS
目录 作品展示 html部分代码 CSS部分代码 轮播部分 作品展示 html部分代码 <body><!--头部--><header><div class=& ...
- 20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
day-096-ninety-six-20230621-仿QQ音乐播放器-静态页面的免费部署-vue2 仿QQ音乐播放器 audio音频标签 audio标签 <audio src="i ...
- QQ音乐播放器部分笔记
QQ音乐播放器案例 1. 基本结构分析 三个部分: 头部区域 中间内容区 左边歌曲列表信息 上边按钮工具条和下边的滑动列表[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img- ...
- [jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
qq音乐案例 案例效果展示 案例效果结构划分 整体布局 歌曲条目部分 顶部栏 底部栏 歌词显示部分 案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效 ...
- 仿qq音乐官网部分静态页面
简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图 首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:
- QQ音乐静态页面设计-思路分享和代码
QQ音乐静态页面设计 布局思路 一. 顶部导航栏设计< Header > 二.内容版块设计< content > 歌单推荐 新歌首发 三.底部版权.外链部分设计< foo ...
- 每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery）
自制系列二它来了. 如果在制作过程中有如何问题你都可以私信我,我会答复你的. 今天中秋节,首先祝大家中秋节快乐! 因为没什么礼物送给大家,所以在这里给大家安利一份简易版QQ音乐的制作,过程很简单,每个 ...
- （优化版）简易版QQ音乐改进版（HTML+CSS+JQuery）
自制系列二改进版它来了,它改进了对应的按钮,让大家看起来更加完善美观! 如果在制作过程中有如何问题你都可以私信我,我会答复你的. 下面将是制作步骤了: 先建好目录如下: source文件夹里存放如下: ...
- python获取网页数据判断并提交_【python爬虫网页结构分析】判断数据是在html的静态网页还是在动态网页；找对URL；豆瓣；QQ音乐...
这里的内容如果包含你要的信息,则数据储存在html 比如豆瓣新片榜,我们可以在preview中找到我们想要的榜单内容,则数据储存在HTML 豆瓣新片榜.png 再点[Headers]General 一 ...
最新文章
- Makefile 里的 subst 函数
- Ubuntu使用docker安装redmine
- 平衡二叉树Python解法
- 腾讯云linux vnc端口,用腾讯云手把手教你用VNC搭建Ubuntu可视化界面（一）
- 关于腾讯应用管理中心，认领应用
- 2021年第一篇原创——Spring核心初探~
- python所有软件-这些Python开源软件解决了程序员几乎所有的问题
- php结合nginx，mysql
- OBJ格式建筑模型数据处理步骤
- 将真分数分解为埃及分数
- 面试必问题：缓存击穿、缓存穿透、缓存雪崩，你还傻傻分不清
- 如何启用计算机网络,启用网络发现,教您win10怎么启用网络发现
- idea的简单使用，初始化过程
- 【mac/windows】Microsoft Office LTSC 2021
- YMIR 平台不写一行代码，简单几步输出深度学习模型
- 洛谷 1016 [NOIP1999] 旅行家的预算 贪心
- 企业微信私有版设置服务器,企业微信私有化部署解决方案，企业微信私有化部署疑问解答...
- koa2洋葱模型之为什么要保证洋葱模型
- android即刻夜间模式,【即刻热评】夜间模式：苹果和微信单选一，你选谁？
- 官宣！华为出售荣耀（附收购公司情况介绍）