前端开发QQ音乐页面练习

前端开发技术认识
wed前端开发技术 ppt
web前端开发的技术架构

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>QQ音乐</title>
    <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,”宋体”;
}
a{
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>
    <!–模块容器–>
    <section id=”box”>
        <!–头部区域–>
        <header class=”head”>
            <div class=”head-top middle”>
                <h1 class=”top-title fl”>
                    QQ音乐
                </h1>
                <nav class=”top-nav fl”>
                    <a href=”” class=”tn-text tn-pd20 tn-bg fl”>音乐馆</a>
                    <a href=”” class=”tn-text tn-pd15 fl”>我的音乐</a>
                    <a href=”” class=”tn-text tn-pd20 fl”>客户端</a>
                    <a href=”” class=”tn-text tn-pd15 fl”>音乐号</a>
                    <a href=”” class=”tn-text tn-pd20 fl”>VIP</a>
                </nav>
                <div class=”top-other fr”>
                    <form action=””>
                        <input class=”search” type=”text” name=”” id=”” value=”梦想的声音第二季” />
                        <input class=”login” type=”submit” name=”” id=”” value=”登录” />
                        <input class=”diamond” type=”submit” name=”” id=”” value=”开通绿钻豪华版” />
                        <input class=”pay” type=”submit” name=”” id=”” value=”开通付费包” />
                    </form>
                    <div class=”other-search”>
                        <a href=””>
                            <img src=”img/qqmusic/search.png” />
                        </a>
                    </div>
                </div>
            </div>
            <div class=”head-bottom middle”>
                <nav class=”bottom-nav”>
                    <a href=”” class=”color”>首页</a>
                    <a href=”” class=””>歌手</a>
                    <a href=”” class=””>专辑</a>
                    <a href=”” class=””>排行榜</a>
                    <a href=”” class=””>分类歌曲</a>
                    <a href=”” class=””>电台</a>
                    <a href=”” class=””>MV</a>
                    <a href=”” class=””>数字专辑</a>
                </nav>
            </div>
        </header>
        <!–内容区域–>
        <div class=”content”>
            <!–歌单推荐–>
            <div class=”ml”>
                <header class=”ml-head middle”>
                    <h3 class=”title”>
                        歌单推荐
                    </h3>
                    <nav class=”sub-title”>
                        <a href=”” class=”color”>为你推荐</a>
                        <a href=””>电子</a>
                        <a href=””>经典</a>
                        <a href=””>经典国语</a>
                        <a href=””>寂寞</a>
                        <a href=””>影视</a>
                    </nav>
                </header>
                <ul class=”ml-content middle clearfix”>
                    <li class=”ml-list w224 fl”>
                        <div class=”ml-img”>
                            <a href=””>
                                <img src=”img/qqmusic/ml1.png” />
                            </a>
                        </div>
                        <div class=”ml-text”>
                            <a href=””>
                                每日新歌:戚薇xVAVA,原来我们是天生绝配
                            </a>
                        </div>
                        <div class=”ml-num color1″>
                            播放量:169.1万
                        </div>
                    </li>
                    <li class=”ml-list w224 fl”>
                        <div class=”ml-img”>
                            <a href=””>
                                <img src=”img/qqmusic/ml2.png” />
                            </a>
                        </div>
                        <div class=”ml-text”>
                            <a href=””>
                                「品味孤独」一个人的时候,再听听这些歌
                            </a>
                        </div>
                        <div class=”ml-num color1″>
                            播放量:126.6万
                        </div>
                    </li>
                    <li class=”ml-list w224 fl”>
                        <div class=”ml-img”>
                            <a href=””>
                                <img src=”img/qqmusic/ml3.png” />
                            </a>
                        </div>
                        <div class=”ml-text”>
                            <a href=””>
                                游戏高燃BGM!赛场里的多一个BUG
                            </a>
                        </div>
                        <div class=”ml-num color1″>
                            播放量:367,9万
                        </div>
                    </li>
                    <li class=”ml-list w224 fl”>
                        <div class=”ml-img”>
                            <a href=””>
                                <img src=”img/qqmusic/ml4.png” />
                            </a>
                        </div>
                        <div class=”ml-text”>
                            <a href=””>
                                国风BGM|隐匿在节目里的大美之境
                            </a>
                        </div>
                        <div class=”ml-num color1″>
                            播放量:4.4万
                        </div>
                    </li>
                    <li class=”ml-list w224 fl nomar”>
                        <div class=”ml-img”>
                            <a href=””>
                                <img src=”img/qqmusic/ml5.png” />
                            </a>
                        </div>
                        <div class=”ml-text”>
                            <a href=””>
                                2017全美音乐奖(AMA)获奖及提名名单
                            </a>
                        </div>
                        <div class=”ml-num color1″>
                            播放量:161.6万
                        </div>
                    </li>
                </ul>
                <div class=”change”>
                    <a href=”” class=”bgc”></a>
                    <a href=”” class=”bgc1 nomar”></a>
                </div>
            </div>
            <!–新歌首发–>
            <div class=”ns”>
                <header class=”ns-head middle”>
                    <h3 class=”title”>
                        新歌首发
                    </h3>
                    <nav class=”sub-title”>
                        <a href=”” class=”color”>内地</a>
                        <a href=””>港台</a>
                        <a href=””>欧美</a>
                        <a href=””>日本</a>
                        <a href=””>韩国</a>
                    </nav>
                    <a href=”” class=”all-play”>
                        播放全部
                    </a>
                </header>
                <ul class=”ns-content middle clearfix”>
                    <li class=”ns-list fl”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns1.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                镜像《追捕》电影推广曲
                            </a>
                            <a href=”” class=”color1″>
                                戚薇/VAVA
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            04:06
                        </time>
                    </li>
                    <li class=”ns-list fl”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns2.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                骄傲
                            </a>
                            <a href=”” class=”color1″>
                                王源
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            04:13
                        </time>
                    </li>
                    <li class=”ns-list fl nomar”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns3.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                菜商卡头和车手《巨额来电》…
                            </a>
                            <a href=”” class=”color1″>
                                GAI
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            03:08
                        </time>
                    </li>
                    <li class=”ns-list fl”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns4.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                请记住我《寻梦环游记》中文…
                            </a>
                            <a href=”” class=”color1″>
                                毛不易
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            03:13
                        </time>
                    </li>
                    <li class=”ns-list fl”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns5.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                少年
                            </a>
                            <a href=”” class=”color1″>
                                李荣浩
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            05:01
                        </time>
                    </li>
                    <li class=”ns-list fl nomar”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns6.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                猎户星座
                            </a>
                            <a href=”” class=”color1″>
                                朴树
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            04:50
                        </time>
                    </li>
                    <li class=”ns-list fl”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns7.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                碎片
                            </a>
                            <a href=”” class=”color1″>
                                张磊
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            04:15
                        </time>
                    </li>
                    <li class=”ns-list fl”>
                        <div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns8.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                老伴
                            </a>
                            <a href=”” class=”color1″>
                                张靓颖
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            03:50
                        </time>
                    </li>
                    <li class=”ns-list fl nomar”>
                        、<div class=”ns-img fl”>
                            <a href=””>
                                <img src=”img/qqmusic/ns1.png” />
                            </a>
                        </div>
                        <div class=”ns-text fl”>
                            <a href=””>
                                你《机甲大师》动画片尾曲
                            </a>
                            <a href=”” class=”color1″>
                                GALA
                            </a>
                        </div>
                        <time class=”ns-time color1 fr”>
                            05:01
                        </time>
                    </li>
                </ul>
                <div class=”change”>
                    <a href=”” class=”bgc”></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1 nomar”></a>
                </div>
            </div>
            <!–精彩推荐–>
            <div class=”re”>
                <header class=”re-head middle”>
                    <h3 class=”title”>
                        精彩推荐
                    </h3>
                </header>
                <ul class=”re-content middle clearfix”>
                    <li class=”re-list fl”>
                        <div class=”re-img”>
                            <img src=”img/qqmusic/re1.png” />
                        </div>
                    </li>
                    <li class=”re-list fl nomar”>
                        <div class=”re-img”>
                            <img src=”img/qqmusic/re2.png” />
                        </div>
                    </li>
                </ul>
                <div class=”change”>
                    <a href=”” class=”bgc”></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1 nomar”></a>
                </div>
            </div>
            <!–新碟首发–>
            <div class=”dvd”>
                <header class=”dvd-head middle”>
                    <h3 class=”title”>
                        新碟首发
                    </h3>
                    <nav class=”sub-title”>
                        <a href=”” class=”color”>内地</a>
                        <a href=””>港台</a>
                        <a href=””>欧美</a>
                        <a href=””>日本</a>
                        <a href=””>韩国</a>
                    </nav>
                    <div class=”dvd-more”>
                        <a href=””>
                            更多>
                    </div>
                </header>
                <ul class=”dvd-content middle clearfix”>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd1.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                玛丽苏遇上杰克苏 网剧原声带
                            </a>
                            <a href=”” class=”color1″>
                                华语群星
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd2.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                镜像
                            </a>
                            <a href=”” class=”color1″>
                                戚薇
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd3.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                时光
                            </a>
                            <a href=”” class=”color1″>
                                萌萌哒天团
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd4.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                做我的猫
                            </a>
                            <a href=”” class=”color1″>
                                满舒克
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl nomar”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd5.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                敢来就敢爱
                            </a>
                            <a href=”” class=”color1″>
                                潘辰
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd6.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                天下谁人不识君·小雪
                            </a>
                            <a href=”” class=”color1″>
                                龚琳娜
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd7.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                一个人
                            </a>
                            <a href=”” class=”color1″>
                                陈牧耶
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd8.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                组曲 忠臣藏
                            </a>
                            <a href=”” class=”color1″>
                                贾鹏芳
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd9.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                Step By Step
                            </a>
                            <a href=”” class=”color1″>
                                娄艺潇
                            </a>
                        </div>
                    </li>
                    <li class=”dvd-list w224 fl nomar”>
                        <div class=”dvd-img”>
                            <a href=””>
                                <img src=”img/qqmusic/dvd10.png” />
                            </a>
                        </div>
                        <div class=”dvd-text”>
                            <a href=””>
                                生不来死不走
                            </a>
                            <a href=”” class=”color1″>
                                王大痣
                            </a>
                        </div>
                    </li>
                </ul>
                <div class=”change”>
                    <a href=”” class=”bgc”></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1 nomar”></a>
                </div>
            </div>
            <!–排行榜–>
            <div class=”rank”>
                <header class=”rank-head middle”>
                    <h3 class=”title”>
                        排行榜
                    </h3>
                    <div class=”rank-more”>
                        <a href=””>
                            更多>
                        </a>
                    </div>
                </header>
                <div class=”rank-content middle clearfix”>
                    <div class=”rank-list w224 fl”>
                        <h4 class=”rank-title”>
                            排行榜
                        </h4>
                        <a href=”” class=”rank-sub-title”>
                            流行指数
                        </a>
                        <ol>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    1
                                </div>
                                <div class=”right fl”>
                                    <a href=””>骆驼</a>
                                    <a href=””>薛之谦</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    2
                                </div>
                                <div class=”right fl”>
                                    <a href=””>天后(live)</a>
                                    <a href=””>薛之谦</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    3
                                </div>
                                <div class=”right fl”>
                                    <a href=””>匆匆那年(live)</a>
                                    <a href=””>林俊杰</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    4
                                </div>
                                <div class=”right fl”>
                                    <a href=””>请记住我</a>
                                    <a href=””>毛不易</a>
                                </div>
                            </li>
                        </ol>
                    </div>
                    <div class=”rank-list bgc1 w224 fl”>
                        <h4 class=”rank-title”>
                            排行榜
                        </h4>
                        <a href=”” class=”rank-sub-title”>
                            热歌
                        </a>
                        <ol>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    1
                                </div>
                                <div class=”right fl”>
                                    <a href=””>项羽虞姬</a>
                                    <a href=””>毛不易</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    2
                                </div>
                                <div class=”right fl”>
                                    <a href=””>渡</a>
                                    <a href=””>薛之谦</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    3
                                </div>
                                <div class=”right fl”>
                                    <a href=””>80000!</a>
                                    <a href=””>PRC巴音汗</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    4
                                </div>
                                <div class=”right fl”>
                                    <a href=””>像风一样</a>
                                    <a href=””>薛之谦</a>
                                </div>
                            </li>
                        </ol>
                    </div>
                    <div class=”rank-list bgc2 w224 fl”>
                        <h4 class=”rank-title”>
                            排行榜
                        </h4>
                        <a href=”” class=”rank-sub-title”>
                            新歌
                        </a>
                        <ol>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    1
                                </div>
                                <div class=”right fl”>
                                    <a href=””>骆驼</a>
                                    <a href=””>薛之谦</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    2
                                </div>
                                <div class=”right fl”>
                                    <a href=””>请记住我</a>
                                    <a href=””>毛不易</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    3
                                </div>
                                <div class=”right fl”>
                                    <a href=””>菜商卡头和车手</a>
                                    <a href=””>GAI</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    4
                                </div>
                                <div class=”right fl”>
                                    <a href=””>骄傲</a>
                                    <a href=””>王源</a>
                                </div>
                            </li>
                        </ol>
                    </div>
                    <div class=”rank-list bgc3 w224 fl”>
                        <h4 class=”rank-title”>
                            排行榜
                        </h4>
                        <a href=”” class=”rank-sub-title”>
                            欧美
                        </a>
                        <ol>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    1
                                </div>
                                <div class=”right fl”>
                                    <a href=””>Boa Me</a>
                                    <a href=””>Fuse ODG</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    2
                                </div>
                                <div class=”right fl”>
                                    <a href=””>I See You</a>
                                    <a href=””>Kygo/Billy Raffoul</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    3
                                </div>
                                <div class=”right fl”>
                                    <a href=””>Snowman</a>
                                    <a href=””>Sia</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    4
                                </div>
                                <div class=”right fl”>
                                    <a href=””>Love So Soft</a>
                                    <a href=””>Kelly Clarkson</a>
                                </div>
                            </li>
                        </ol>
                    </div>
                    <div class=”rank-list bgc4 w224 fl nomar”>
                        <h4 class=”rank-title”>
                            排行榜
                        </h4>
                        <a href=”” class=”rank-sub-title”>
                            日韩
                        </a>
                        <ol>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    1
                                </div>
                                <div class=”right fl”>
                                    <a href=””>抖抖抖</a>
                                    <a href=””>EXID</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    2
                                </div>
                                <div class=”right fl”>
                                    <a href=””>拍手</a>
                                    <a href=””>SEVEVTEEN</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    3
                                </div>
                                <div class=”right fl”>
                                    <a href=””>My Zone</a>
                                    <a href=””>Block B</a>
                                </div>
                            </li>
                            <li class=”rank-text clearfix”>
                                <div class=”left fl”>
                                    4
                                </div>
                                <div class=”right fl”>
                                    <a href=””>TO MYSELF</a>
                                    <a href=””>SORI</a>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
            <!–MV–>
            <div class=”mv”>
                <header class=”mv-head middle”>
                    <h3 class=”title”>
                        MV
                    </h3>
                    <nav class=”sub-title”>
                        <a href=”” class=”color”>精选</a>
                        <a href=””>内地</a>
                        <a href=””>港台</a>
                        <a href=””>欧美</a>
                        <a href=””>日本</a>
                        <a href=””>韩国</a>
                    </nav>
                </header>
                <ul class=”mv-content middle clearfix”>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv1.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                永恒的印记
                            </a>
                            <a href=”” class=”color1″>
                                张信哲
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            4227
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv2.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                偷故事的人
                            </a>
                            <a href=”” class=”color1″>
                                张惠妹
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            1.1万
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv3.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                成都(微电影)
                            </a>
                            <a href=”” class=”color1″>
                                赵雷
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            5.9万
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv4.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                项羽虞姬
                            </a>
                            <a href=”” class=”color1″>
                                毛不易
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            8.9万
                        </div>
                    </li>
                    <li class=”mv-list w224 fl nomar”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv1.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                MAMA
                            </a>
                            <a href=”” class=”color1″>
                                李佩玲
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            1760
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv6.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                I’M OK
                            </a>
                            <a href=”” class=”color1″>
                                JA符文龙
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            1700
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv7.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                幸福路上
                            </a>
                            <a href=”” class=”color1″>
                                蔡依林
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            13.5万
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv8.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                猎户星座
                            </a>
                            <a href=”” class=”color1″>
                                朴树
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            5.5万
                        </div>
                    </li>
                    <li class=”mv-list w224 fl”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv9.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                请记住我
                            </a>
                            <a href=”” class=”color1″>
                                毛不易
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            14.6万
                        </div>
                    </li>
                    <li class=”mv-list w224 fl nomar”>
                        <div class=”mv-img”>
                            <a href=””>
                                <img src=”img/qqmusic/mv10.png” />
                            </a>
                        </div>
                        <div class=”mv-text”>
                            <a href=””>
                                开花
                            </a>
                            <a href=”” class=”color1″>
                                只会中文
                            </a>
                        </div>
                        <div class=”mv-num color1″>
                            4233
                        </div>
                    </li>
                </ul>
                <div class=”change”>
                    <a href=”” class=”bgc”></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1″></a>
                    <a href=”” class=”bgc1 nomar”></a>
                </div>
            </div>
        </div>
        <!–底部区域–>
        <footer class=”foot”>
            <div class=”foot-content middle”>
                <div class=”download h230 fl”>
                    <h4 class=”foot-title”>
                        下载QQ音乐客户端
                    </h4>
                    <a href=”” class=”ml9 mr24″>
                        <span class=”foot-bg foot-bg-pc”></span>
                        PC版
                    </a>
                    <a href=”” class=”mr24″>
                        <span class=”foot-bg foot-bg-mac”></span>
                        MAC版
                    </a>
                    <a href=”” class=”mr24″>
                        <span class=”foot-bg foot-bg-android”></span>
                        Android版
                    </a>
                    <a href=”” class=”mr24″>
                        <span class=”foot-bg foot-bg-iphone”></span>
                        iPhone版
                    </a>
                </div>
                <div class=”product h230 fl”>
                    <h4 class=”foot-title”>
                        特色产品
                    </h4>
                    <a href=”” class=”pd ml7 mr26″>
                        <span class=”foot-bg foot-bg-k”></span>
                        全民K歌
                    </a>
                    <a href=”” class=”pd mr26″>
                        <span class=”foot-bg foot-bg-ss”></span>
                        Sound
                    </a>
                    <a href=”” class=”pd mr26″>
                        <span class=”foot-bg foot-bg-qplay”></span>
                        Qplay
                    </a>
                    <div class=”pd-text”>
                        <a href=”” class=””>
                            车载互联
                        </a>
                        <a href=”” class=””>
                            QQ演出
                        </a>
                    </div>
                </div>
                <div class=”link h230 fl”>
                    <h4 class=”foot-title”>
                        合作连接
                    </h4>
                    <div class=”clearfix”>
                        <div class=”link-box fl”>
                            <a href=””>
                                CJ EM
                            </a>
                            <a href=””>
                                最新版本QQ
                            </a>
                            <a href=””>
                                QQ浏览器
                            </a>
                            <a href=””>
                                企鹅FM
                            </a>
                        </div>
                        <div class=”link-box fl”>
                            <a href=””>
                                腾讯视频
                            </a>
                            <a href=””>
                                腾讯社交广告
                            </a>
                            <a href=””>
                                腾讯微云
                            </a>
                            <a href=””>
                                智能电视网
                            </a>
                        </div>
                        <div class=”link-box fl”>
                            <a href=””>
                                手机QQ空间
                            </a>
                            <a href=””>
                                电脑管家
                            </a>
                            <a href=””>
                                腾讯云
                            </a>
                            <a href=””>
                                当贝市场
                            </a>
                        </div>
                    </div>
                </div>
                <div class=”platform fl”>
                    <h4 class=”foot-title”>
                        开放平台
                    </h4>
                    <a href=””>
                        腾讯音乐人平台
                    </a>
                    <a href=””>
                        音乐号认证
                    </a>
                    <a href=””>
                        上传视频
                    </a>
                </div>
            </div>
            <div class=”foot-other middle”>
                <div class=”other-top”>
                    <a href=”” class=”top-text”>
                        关于腾讯
                    </a>
                    <a href=”” class=”top-text”>
                        About Tencent
                    </a>
                    <a href=”” class=”top-text”>
                        服务条款
                    </a>
                    <a href=”” class=”top-text”>
                        用户协议服务
                    </a>
                    <a href=”” class=”top-text”>
                        隐私政策
                    </a>
                    <a href=”” class=”top-text”>
                        权利声明
                    </a>
                    <a href=”” class=”top-text”>
                        广告服务
                    </a>
                    <a href=”” class=”top-text”>
                        腾讯招聘
                    </a>
                    <a href=”” class=”top-text”>
                        客服中心
                    </a>
                    <a href=”” class=”top-text nopd nobr”>
                        网站导航
                    </a>
                </div>
                <div class=”other-middle”>
                    Copyright ◎ 1998-2017 Tencent All Rights Reserved
                </div>
                <div class=”other-bottom”>
                    腾讯公司 版权所有 腾讯网络文化经营许可证
                </div>
            </div>
        </footer>
        <div class=”fix”>
            <a href=”” class=”top”>
                返回顶部
            </a>
            <a href=”” class=”feedback”>
                反馈
            </a>
            <a href=”” class=”play”>
                播放
            </a>
        </div>
    </section>
</body>
</html>
<!–
伪代码:
模块容器section#box
头部区域header.head
内容区域div.content
歌单推荐div.ml
新歌首发div.ns
精彩推荐div.re
新碟首发div.dvd
排行榜div.rank
MV div.mv
底部区域footer.foot
–>
web前端开发技术介绍
前端开发技术jsp
web前端开发技术英文
» 本文来自:前端开发者 » 《前端开发QQ音乐页面练习》
» 本文链接地址:https://www.rokub.com/7912.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!