Html实现QQ音乐首页（响应式）
Posted 岁月可贵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html实现QQ音乐首页（响应式）相关的知识，希望对你有一定的参考价值。
项目访问
reset.css
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
display: block;
ol, ul, li
list-style: none;
blockquote, q
quotes: none;
blockquote:before, blockquote:after,
q:before, q:after
content: '';
content: none;
table
border-collapse: collapse;
border-spacing: 0;
/* custom */
a
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
::-webkit-scrollbar
width: 5px;
height: 5px;
::-webkit-scrollbar-track-piece
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
::-webkit-scrollbar-thumb:vertical
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
::-webkit-scrollbar-thumb:horizontal
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
html, body
width: 100%;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
body
line-height: 1;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
html
overflow-y: scroll;
/*隐藏*/
.dn
display: none;
.container
width: 1000px;
/* 头部 */
.mod_header .header_container
width: 1000px;
margin: 0 auto;
.mod_header .header_container .mod_top_subnav
min-width: max-content;
.mod_header .header_container .qqmusic_title
margin-right: 0px;
.mod_header .header_container .mod_top_nav
margin-left: -20px;
.mod_header .header_container .mod_top_search
margin-left: -20px;
.mod_header .header_container .header_opt
clear: left;
float: none;
position: absolute;
right: -51px;
transform: scale(0.6);
.mod_header .header_container .mod_top_subnav
justify-content: space-between;
padding-left: 0px;
margin-right: 0px;
.mod_header .header_container .mod_top_subnav li
margin-right: 0px;
.mod_header .header_container .media_scale
transform: scale(0.83);
/* 歌单推荐 */
.mod_index-hot .section_inner .mod_playlist .playlist_item
justify-content: space-between;
.mod_index-hot .section_inner .mod_playlist .playlist_item li:nth-child(n + 6)
display: block;
.mod_index-hot .section_inner .mod_playlist .playlist_item li:nth-child(6)
margin-left: 20px;
/* 歌单首发 */
.mod_index-song .section_inner .mod_index_tab .all
transform: scale(0.83);
left: 89px;
.mod_index-song .section_inner .slide_list
justify-content: space-around;
.mod_index-song .section_inner .slide_list .colum:nth-child(3)
display: none;
/* 精彩推荐 */
.mod_index-event .section_inner .slide_list
justify-content: center;
.mod_index-event .section_inner .slide_list li:last-child
display: none;
/* 新碟首发 */
.mod_index-album .section_inner .js_list li:nth-child(n + 9)
display: none;
/* 排行榜 */
.toplist_list li
/* 将最右一个 li 隐藏掉 */
.toplist_list li:last-child
display: none;
/* MV */
.mod_index-mv .section_inner .mod_mv li:nth-child(n + 9)
display: none;
/* 向左向右 */
.mod_slide_box
z-index: -10;
.mod_slide_box .slide_action
display: none;
/* 客户端 */
.popup_guide
transform: scale(0.83);
right: 0px;
icon.css
@font-face
font-family: "iconfont"; /* Project id 2691407 */
src: url('//at.alicdn.com/t/font_2691407_ni95wafj4na.woff2?t=1626922468488') format('woff2'),
url('//at.alicdn.com/t/font_2691407_ni95wafj4na.woff?t=1626922468488') format('woff'),
url('//at.alicdn.com/t/font_2691407_ni95wafj4na.ttf?t=1626922468488') format('truetype');
.iconfont
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.icon-bofang:before
content: "\\e635";
.icon-fangdajing:before
content: "\\e690";
index.css
.container
width: 1200px;
margin: 0px auto;
/* 清浮动 */
.clearfix::after
content: "";
display: block;
clear: both;
/* 向左向右 页面宽度 */
.mod_slide_box
width: 100%;
min-width: max-content;
position: relative;
overflow: hidden;
.mod_slide_box:hover .slide_action
transform: translateX(0%);
transition: transform 0.8s;
.mod_slide_box .slide_action
position: absolute;
width: 59px;
height: 108px;
background-color: #efefef;
text-align: center;
transition: transform 0.8s;
.mod_slide_box .slide_action:hover
background-color: #e2e2e2;
.mod_slide_box .slide_action a
display: block;
width: 51px;
height: 91px;
margin-top: 8px;
transform: scale(0.5);
.mod_slide_box .slide_action-left
top: 228px;
transform: translateX(-100%);
.mod_slide_box .slide_action-left a
margin-left: 0px;
background-image: url("../image/icon.png");
background-repeat: no-repeat;
background-position: -40px -229px;
.mod_slide_box .slide_action-right
top: 228px;
right: 0;
transform: translateX(100%);
.mod_slide_box .slide_action-right a
margin-left: 18px;
background-image: url("../image/icon.png");
background-repeat: no-repeat;
background-position: 11px -232px;
/* 分栏条 */
.mod_slide_box .section_inner .mod_index_tab
text-align: center;
height: 50px;
.mod_slide_box .section_inner .mod_index_tab a
line-height: 22.5px;
font-size: 15px;
color: #333333;
font-weight: 400;
margin: 0px 24px;
.mod_slide_box .section_inner .mod_index_tab a:hover
color: #31c27c;
/* section 头部 */
.mod_slide_box .section_inner .index_hd
height: 40px;
padding: 50px 0px 24px;
.mod_slide_box .section_inner .index_hd .index_tit
width: 196px;
height: 40px;
margin: 0px auto;
/* 图片放大特效 */
.img_cover_box
position: relative;
overflow: hidden;
.img_cover_box:hover img
transform: scale(1.2);
-ms-transform: scale(1.2);
.img_cover_box:hover i
opacity: 1;
.img_cover_box img
cursor: pointer;
transition: all 0.8s;
-ms-transition: all 0.8s;
.img_cover_box i
background: url(../image/bofang.png) no-repeat;
background-size: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
opacity: 0;
transition: opacity 0.8s;
/* 小点 */
.mod_slide_box .section_inner .mod_slide_switch
display: flex;
justify-content: center;
.mod_slide_box .section_inner .mod_slide_switch a
width: 28px;
height: 12px;
padding-bottom: 26px;
margin: 0px 1px;
.mod_slide_box .section_inner .mod_slide_switch a:first-child i
background-color: #afafaf;
.mod_slide_box .section_inner .mod_slide_switch a i
margin: 0 auto;
display: block;
width: 8px;
height: 8px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
.mod_slide_box .section_inner .mod_slide_switch a i:hover
background-color: #afafaf;
/* 头部 */
.mod_header
width: 100%;
min-width: max-content;
height: 142px;
margin: 0 auto;
.mod_header .header_container
width: 1200px;
margin: 0px auto;
position: relative;
.mod_header .header_container .qqmusic_title
width: 172px;
height: 90px;
padding-top: 22px;
box-sizing: border-box;
margin-right: 30px;
float: left;
.mod_header .header_container .qqmusic_title .qqmusic_logo
width: 170px;
height: 46px;
.mod_header .header_container .mod_top_nav
height: 90px;
float: left;
.mod_header .header_container .mod_top_nav li
position: relative;
height: 90px;
margin-right: -5px;
float: left;
text-align: center;
padding: 0px 20px;
box-sizing: border-box;
.mod_header .header_container .mod_top_nav li:first-child
background-color: #31c27c;
.mod_header .header_container .mod_top_nav li:first-child a
color: #fff;
.mod_header .header_container .mod_top_nav li:last-child
width: 66.1px;
.mod_header .header_container .mod_top_nav li:nth-child(n + 2):hover a
color: #31c27c;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3):hover .popup_data_detail
visibility: visible;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail
visibility: hidden;
position: absolute;
top: 68px;
left: 20px;
width: 160px;
padding: 9px 0px 18px;
box-sizing: border-box;
z-index: 999;
background-color: #fff;
box-shadow: 0 0 4px #000000;
border-radius: 4px;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p
margin-left: 16px;
line-height: 18px;
font-size: 12px;
color: #000000;
font-weight: 400;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p i
display: inline-block;
transform: scale(0.6);
margin-right: -8px;
vertical-align: middle;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p .icon-hq
width: 30px;
height: 30px;
margin-left: -24px;
background-image: url("../image/icon1.png");
background-repeat: no-repeat;
background-position: 0 0;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p .icon-dts
width: 30px;
height: 34px;
margin-left: -28px;
background-image: url("../image/icon1.png");
background-repeat: no-repeat;
background-position: 0 -54px;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p .icon-skin
width: 30px;
height: 33px;
margin-left: -28px;
background-image: url("../image/icon1.png");
background-repeat: no-repeat;
background-position: 0 -113px;
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail .btn
display: block;
margin: 6px auto 0;
line-height: 25px;
font-size: 12px;
color: #ffffff;
font-weight: 400;
width: 135px;
height: 25px;
text-align: center;
border-radius: 25px;
background-color: #31c27c;
background-image: linear-gradient(90deg, #24ccaa, #31c27c);
.mod_header .header_container .mod_top_nav li a
line-height: 90px;
font-size: 18px;
color: #000000;
font-weight: 500;
height: 100%;
.mod_header .header_container .mod_top_nav li .top_nav_mark
height: 14px;
position: absolute;
top: 18px;
right: 0;
.mod_header .header_container .mod_top_search
position: relative;
width: 220px;
height: 64px;
margin-left: 40px;
float: left;
padding-bottom: 26px;
.mod_header .header_container .mod_top_search .mod_search_input
position: relative;
width: 225px;
height: 38px;
box-sizing: border-box;
margin-top: 26px;
.mod_header .header_container .mod_top_search .mod_search_input input
width: 174px;
height: 34px;
line-height: 1.5;
outline: none;
border: none;
font-size: 14px;
padding-left: 5px;
padding-right: 0px;
border: 1px solid #c9c9c9;
border-right: none;
.mod_header .header_container .mod_top_search .mod_search_input button
position: absolute;
width: 43px;
height: 38px;
border: none;
top: 0px;
right: 2px;
border: 1px solid #c9c9c9;
border-left: none;
background-color: #fff;
.mod_header .header_container .mod_top_search .mod_search_input button:hover
color: #31c27c;
.mod_header .header_container .mod_top_search .mod_search_other
visibility: hidden;
transition: height 0.8s;
position: absolute;
top: 63px;
left: 0px;
border: 1px solid #c9c9c9;
width: 221px;
height: 237px;
z-index: 11;
background-color: #fff;
.mod_header .header_container .mod_top_search .mod_search_other .search_hot
height: 180px;
width: 100%;
box-sizing: border-box;
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li
padding: 0 11px;
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li:hover
background-color: #31c27c;
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li:hover .info span
color: #fff;
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li .info .search_hot_number
float: left;
width以上是关于Html实现QQ音乐首页（响应式）的主要内容，如果未能解决你的问题，请参考以下文章