【QQ音乐Html + CSS静态笔记】_qq音乐html代码_张小白的 java笔记

大大的周 02-07 4877

分析导航页有5部分组成

?最大的<div>表示全头部? div表示盒子的意思

?第二个div表示上图的所有? 表示一个div盒子将5部分装起来? ?

我们将将1234放在一个盒子里面? ?分别做成不同的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里面添加

查看效果据左上角??

?添加居中离开坐标的效果

在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; }

第二部分左侧文字? 看加的文字开始和结束别全部抄

?需要添加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 靠在左侧导航栏的右边*/ .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>  <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; }

添加第五部分

添加效果

/*添加样式宽高*/ .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 ; }

添加中间部分

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; }