前端开发QQ音乐页面练习

前端开发技术认识

wed前端开发技术 ppt

web前端开发的技术架构

html 代码

<!DOCTYPE html>

<html>

<head>

<style>

/*–reset css–*/

body,h1,h3,h4{

margin:0;

}

ul,ol{

margin:0;

padding:0;

list-style:none;

}

img{

vertical-align:top;

border:none;

}

input{

padding:0;

}

/*–tools–*/

body{

font:bold12px/22pxarial,”宋体”;

}

text-decoration:none;

color:#333;

}

.color1{

color:#999;

}

.fl{

float:left;

}

.fr{

float:right;

}

.clearfix:after{

content:””;

display:block;

clear:both;

}

.middle{

width:1200px;

margin:0auto;

}

.w224{

width:224px;

}

#box .change a{

display:inline-block;

width:8px;

height:8px;

margin-right:16px;

}

#box .change{

text-align:center;

line-height:8px;

}

#box .change .bgc{

background-color:#b2b2b2;

}

#box .change .bgc1{

background-color:#e5e5e5;

}

/*–模块容器–*/

#box{

width:100%;

}

/*–头部区域–*/

#box .head{

height:142px;

}

#box .head .head-top{

height:90px;

border-bottom:1pxsolid#f2f2f2;

}

#box .head-top .top-title{

width:198px;

height:90px;

background:url(../img/qqmusic/h1.png)no-repeat;

text-indent:-9999px;

}

#box .top-nav .tn-pd15{

padding:015px;

}

#box .top-nav .tn-pd20{

padding:020px;

}

#box .top-nav .tn-text{

font:bold18px/88pxarial,”宋体”;

padding-bottom:2px;

}

#box .top-nav .tn-bg,

#box .top-nav a:hover{

background-color:#31c27c;

color:#fff;

}

#box .head-top .top-other{

margin-top:26px;

position:relative;

}

#box .top-other .search{

width:218px;

height:36px;

border:1pxsolid#c9c9c9;

color:#757575;

text-indent:11px;

}

#box .top-other .other-search{

width:16px;

height:16px;

position:absolute;

top:11px;

left:192px;

}

#box .top-other .login{

width:36px;

height:20px;

border:none;

color:#333;

background-color:#fff;

margin:017px;

}

#box .top-other .diamond{

width:111px;

height:38px;

border:none;

color:#fff;

background-color:#31c27c;

margin-right:7px;

}

#box .top-other .pay{

width:85px;

height:38px;

border:1pxsolid#c9c9c9;

color:#333;

background-color:#fff;

}

#box .head .head-bottom{

width:970px;

padding-left:230px;

font-weight:bold;

line-height:51px;

word-spacing:47px;

font-size:14px;

}

#box .color,

#box .bottom-nav a:hover,

#box .sub-title a:hover{

color:#31c27c;

}

/*–内容区域–*/

#box .content .title{

padding-top:28px;

font:bold32px/76pxarial,”宋体”;

text-align:center;

letter-spacing:10px;

}

#box .content .sub-title{

line-height:40px;

font-weight:bold;

text-align:center;

word-spacing:45px;

font-size:14px;

}

/*–歌单推荐–*/

#box .content .ml{

height:532px;

background:url(../img/qqmusic/ml-bgc.png)repeat-x;

}

#box .ml .ml-content{

margin-bottom:26px;

}

#box .ml-content .ml-list{

height:304px;

margin:20px20px00;

}

#box .ml-list .ml-img{

margin-bottom:14px;

}

#box .ml-list .ml-text{

height:44px;

letter-spacing:2px;

}

/*–新歌首发–*/

#box .content .ns{

height:556px;

background:url(../img/qqmusic/ns-bgc.png)repeat-x;;

}

#box .ns .ns-head{

position:relative;

}

#box .ns-head .all-play{

position:absolute;

top:104px;

left:0;

width:121px;

height:36px;

border:1pxsolid#c9c9c9;

font:bold14px/36px”宋体”;

text-indent:42px;

background:url(../img/qqmusic/all-play.png)no-repeat23px10px;

}

#box .ns-content .ns-list{

width:380px;

height:86px;

padding:12px0;

border-bottom:1pxsolid#f2f2f2;

margin-right:30px;

}

#box .ns .ns-content{

margin-bottom:11px;

}

#box .ns-list .ns-img{

margin-right:14px;

}

#box .ns-list .ns-text{

margin-top:20px;

}

#box .ns-list .ns-time{

margin-top:36px;

}

#box .ns-text a{

display:block;

}

/*–精彩推荐–*/

#box .content .re{

height:418px;

background:url(../img/qqmusic/re-bgc.png)repeat-x;;

}

#box .re .re-content{

margin-bottom:30px;

}

#box .re-content .re-list{

width:590px;

height:236px;

margin:10px20px00;

}

/*–新碟首发–*/

#box .content .dvd{

height:813px;

background:url(../img/qqmusic/dvd-bgc.png)repeat-x;

}

#box .dvd-content .dvd-list{

height:288px;

margin:20px20px6px0;

}

#box .dvd-list .dvd-img,

#box .dvd .dvd-content{

margin-bottom:14px;

}

#box .dvd-text a{

display:block;

}

#box .dvd .dvd-head{

position:relative;

}

#box .dvd .dvd-more{

font:bold14px/14pxarial,”宋体”;

position:absolute;

top:118px;

right:0;

}

/*–排行榜–*/

#box .content .rank{

height:691px;

background:url(../img/qqmusic/rank-bgc.png)repeat-x;;

}

#box .rank .rank-content .bgc1{

background-color:#6b97b1;

}

#box .rank .rank-content .bgc2{

background-color:#6dc1b7;

}

#box .rank .rank-content .bgc3{

background-color:#518e95;

}

#box .rank .rank-content .bgc4{

background-color:#ec9f70;

}

#box .rank-content .rank-list{

height:500px;

margin:10px20px00;

color:#fff;

background:#d2758eurl(../img/qqmusic/rank.png)no-repeat94px148px;

}

#box .rank-content .rank-list a{

display:block;

color:#fff;

}

#box .rank-list .rank-title{

font:bold20px/38px”宋体”;

margin-top:41px;

text-align:center;

}

#box .rank-list .rank-sub-title{

font:bold26px/26px”宋体”;

margin-bottom:80px;

text-align:center;

}

#box .rank-list .rank-text{

line-height:26px;

margin:0022px30px;

}

#box .rank-text .left{

line-height:26px;

margin-right:12px;;

}

#box .rank .rank-head{

position:relative;

}

#box .rank .rank-more{

font:bold14px/14pxarial,”宋体”;

position:absolute;

top:60px;

right:0;

}

/*–MV–*/

#box .content .mv{

height:660px;

background:url(../img/qqmusic/mv-bgc.png)repeat-x;;

}

#box .mv-content .mv-list{

height:206px;

margin:20px20px6px0;

}

#box .mv-list .mv-img,

#box .mv .mv-content{

margin-bottom:14px;

}

#box .mv-list .mv-text{

height:44px;

letter-spacing:2px;

}

#box .mv-list .mv-text a{

display:block;

}

#box .mv-list .mv-num{

padding-left:24px;

background:url(../img/qqmusic/mvplay.png)no-repeat05px;

}

/*–底部区域–*/

#box .foot{

height:588px;

background-color:#333333;

}

#box .foot .h230{

height:230px;

}

#box .foot .foot-content{

padding-top:83px;

height:373px;

border-bottom:1pxsolid#353535;

}

#box .foot-content .foot-title{

font:bold14px/14pxarial,”宋体”;

margin-bottom:55px;

color:#999;

}

#box .foot-content .download{

width:466px;

margin-left:10px;

}

#box .foot-content .product{

width:424px;

}

#box .foot-content .link{

width:300px;

}

#box .foot-content .platform{

width:300px;

height:143px;

margin-left:10px;

}

#box .foot-content .foot-bg{

display:inline-block;

width:46px;

height:42px;

background:url(../img/qqmusic/foot-bg.png)no-repeat;

}

#box .foot-content .download a{

display:inline-block;

text-align:center;

width:64px;

color:#999;

}

#box .foot-content .product .pd{

display:inline-block;

text-align:center;

width:60px;

color:#999;

}

#box .foot-content .product .pd-text a{

display:inline-block;

color:#999;

margin-right:24px;

margin-top:22px

}

#box .foot-content .foot-bg-pc{

background-position:00;

}

#box .foot-content .foot-bg-mac{

background-position:-46px0;

}

#box .foot-content .foot-bg-android{

background-position:-92px0;

}

#box .foot-content .foot-bg-iphone{

background-position:-138px0;

}

#box .foot-content .foot-bg-k{

background-position:-184px0;

}

#box .foot-content .foot-bg-ss{

background-position:-230px0;

}

#box .foot-content .foot-bg-qplay{

background-position:-276px0;

}

#box .link .link-box{

width:100px;

}

#box .link .link-box a{

display:block;

line-height:12px;

color:#999;

margin-bottom:21px;

}

#box .foot-content .platform a{

display:inline-block;

line-height:12px;

color:#999;

margin-right:24px;

}

#box .foot .foot-other{

text-align:center;

margin-top:26px;

color:#999;

}

#box .other-top .top-text{

display:inline-block;

line-height:12px;

color:#999;

border-right:2pxsolid#999;

padding-right:4px;

}

#box .foot-other .other-middle{

margin:7px0;

}

#box .content .nomar{

margin-right:0;

}

#box .foot .nopd{

padding-right:0;

}

#box .foot .nobr{

border:none;

}

#box .foot-content .ml9{

margin-left:-9px;

}

#box .foot-content .ml7{

margin-left:-7px;

}

#box .foot-content .mr24{

margin-right:24px;

}

#box .foot-content .mr26{

margin-right:26px;

}

#box .fix a{

display:block;

margin-bottom:2px;

width:38px;

height:38px;

border:1pxsolid#c9c9c9;

background-color:#FFFFFF;

}

#box .fix{

position:fixed;

bottom:20px;

right:20px;

}

#box .fix .top,#box .fix .play{

text-indent:-9999px;

}

#box .fix .feedback{

font:bold12px/38px”宋体”;

text-align:center;

}

#box .fix .play{

margin-bottom:0;

background:#FFFFFFurl(../img/qqmusic/play.png)no-repeat10px10px;

}

#box .fix .top{

background:#FFFFFFurl(../img/qqmusic/top.png)no-repeat10px14px;

}

</style>

</head>

<body>

<!–模块容器–>

<!–头部区域–>

QQ音乐

</h1>

</nav>

</form>

</a>

</div>

</nav>

</div>

</header>

<!–内容区域–>

<!–歌单推荐–>

歌单推荐

</h3>

</nav>

</header>

</a>

</div>

每日新歌：戚薇xVAVA,原来我们是天生绝配

</a>

</div>

播放量：169.1万

</div>

</li>

</a>

</div>

「品味孤独」一个人的时候，再听听这些歌

</a>

</div>

播放量：126.6万

</div>

</li>

</a>

</div>

游戏高燃BGM！赛场里的多一个BUG

</a>

</div>

播放量：367,9万

</div>

</li>

</a>

</div>

国风BGM|隐匿在节目里的大美之境

</a>

</div>

播放量：4.4万

</div>

</li>

</a>

</div>

2017全美音乐奖（AMA）获奖及提名名单

</a>

</div>

播放量：161.6万

</div>

</li>

</ul>

</div>

<!–新歌首发–>

新歌首发

</h3>

</nav>

播放全部

</a>

</header>

</a>

</div>

镜像《追捕》电影推广曲

</a>

戚薇/VAVA

</a>

</div>

04:06

</time>

</li>

</a>

</div>

骄傲

</a>

王源

</a>

</div>

04:13

</time>

</li>

</a>

</div>

菜商卡头和车手《巨额来电》…

</a>

GAI

</a>

</div>

03：08

</time>

</li>

</a>

</div>

请记住我《寻梦环游记》中文…

</a>

毛不易

</a>

</div>

03:13

</time>

</li>

</a>

</div>

少年

</a>

李荣浩

</a>

</div>

05:01

</time>

</li>

</a>

</div>

猎户星座

</a>

朴树

</a>

</div>

04:50

</time>

</li>

</a>

</div>

碎片

</a>

张磊

</a>

</div>

04:15

</time>

</li>

</a>

</div>

老伴

</a>

张靓颖

</a>

</div>

03:50

</time>

</li>

、<div class=”ns-img fl”>

</a>

</div>

你《机甲大师》动画片尾曲

</a>

GALA

</a>

</div>

05：01

</time>

</li>

</ul>

</div>

<!–精彩推荐–>

精彩推荐

</h3>

</header>

</div>

</li>

</div>

</li>

</ul>

</div>

<!–新碟首发–>

新碟首发

</h3>

</nav>

更多>

</div>

</header>

</a>

</div>

玛丽苏遇上杰克苏网剧原声带

</a>

华语群星

</a>

</div>

</li>

</a>

</div>

镜像

</a>

戚薇

</a>

</div>

</li>

</a>

</div>

时光

</a>

萌萌哒天团

</a>

</div>

</li>

</a>

</div>

做我的猫

</a>

满舒克

</a>

</div>

</li>

</a>

</div>

敢来就敢爱

</a>

潘辰

</a>

</div>

</li>

</a>

</div>

天下谁人不识君·小雪

</a>

龚琳娜

</a>

</div>

</li>

</a>

</div>

一个人

</a>

陈牧耶

</a>

</div>

</li>

</a>

</div>

组曲忠臣藏

</a>

贾鹏芳

</a>

</div>

</li>

</a>

</div>

Step By Step

</a>

娄艺潇

</a>

</div>

</li>

</a>

</div>

生不来死不走

</a>

王大痣

</a>

</div>

</li>

</ul>

</div>

<!–排行榜–>

排行榜

</h3>

更多>

</a>

</div>

</header>

排行榜

</h4>

流行指数

</a>

<ol>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</ol>

</div>

排行榜

</h4>

热歌

</a>

<ol>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

<a href=””>PRC巴音汗</a>

</div>

</li>

</div>

</div>

</li>

</ol>

</div>

排行榜

</h4>

新歌

</a>

<ol>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

<a href=””>菜商卡头和车手</a>

</div>

</li>

</div>

</div>

</li>

</ol>

</div>

排行榜

</h4>

欧美

</a>

<ol>

</div>

</div>

</li>

</div>

<a href=””>Kygo/Billy Raffoul</a>

</div>

</li>

</div>

<a href=””>Snowman</a>

</div>

</li>

</div>

<a href=””>Kelly Clarkson</a>

</div>

</li>

</ol>

</div>

排行榜

</h4>

日韩

</a>

<ol>

</div>

</div>

</li>

</div>

<a href=””>SEVEVTEEN</a>

</div>

</li>

</div>

<a href=””>Block B</a>

</div>

</li>

</div>

<a href=””>TO MYSELF</a>

</div>

</li>

</ol>

</div>

<!–MV–>

</h3>

</nav>

</header>

</a>

</div>

永恒的印记

</a>

张信哲

</a>

</div>

4227

</div>

</li>

</a>

</div>

偷故事的人

</a>

张惠妹

</a>

</div>

1.1万

</div>

</li>

</a>

</div>

成都（微电影）

</a>

赵雷

</a>

</div>

5.9万

</div>

</li>

</a>

</div>

项羽虞姬

</a>

毛不易

</a>

</div>

8.9万

</div>

</li>

</a>

</div>

MAMA

</a>

李佩玲

</a>

</div>

1760

</div>

</li>

</a>

</div>

I’M OK

</a>

JA符文龙

</a>

</div>

1700

</div>

</li>

</a>

</div>

幸福路上

</a>

蔡依林

</a>

</div>

13.5万

</div>

</li>

</a>

</div>

猎户星座

</a>

朴树

</a>

</div>

5.5万

</div>

</li>

</a>

</div>

请记住我

</a>

毛不易

</a>

</div>

14.6万

</div>

</li>

</a>

</div>

开花

</a>

只会中文

</a>

</div>

4233

</div>

</li>

</ul>

</div>

<!–底部区域–>

下载QQ音乐客户端

</h4>

PC版

</a>

MAC版

</a>

Android版

</a>

iPhone版

</a>

</div>

特色产品

</h4>

全民K歌

</a>

Sound

</a>

Qplay

</a>

车载互联

</a>

QQ演出

</a>

</div>

合作连接

</h4>

CJ EM

</a>

前端开发QQ音乐页面练习

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发