用html写QQ音乐首页,使用HTML5仿制的QQ音乐PC版界面

QQ音乐界面仿制

在专业认识实习中，我们通过学习HTML超文本标记语言，提高了静态web前端页面的开发能力，下面就给大家展示一下我们小组仿制的QQ音乐官网界面，只是仿制了PC版，但是部分手机浏览器(QQ浏览器Anoriod)也可以打开(无法进行手机版界面自适应)。

下面展示一下各界面的源码：

主页

相应CSS源码

*{

margin: 0 auto;

padding: 0px;

}

.topNav{

width: 100%;

height: 180px;

}

.topCenter{

width: 1200px;

height: 90px;

}

.under{

width: 1200px;

height: 51px;

}

.logo{

width: 170px;

height: 46px;

float: left;

margin-top: 22px;

}

.top1{

width:436px;

height: 90px;

float: left;

padding-left: 20px;

}

.top2 {

width: 94px;

height: 90px;

background-color:#31c27c;

float: left;

}

.top2 a{

width: 94px;

height: 90px;

line-height: 90px;

float: left;

text-align: center;

font-size: 18px;

text-decoration: none;

color: white;

}

.top1 nav a{

line-height: 90px;

float: left;

color: black;

text-align: center;

font-size: 18px;

text-decoration: none;

padding-left: 20px;

}

.top1 nav a:hover{

/**/

color:rgb(49, 194, 124);

}

.top3{

width: 230px;

height: 36px;

float: left;

margin-top: 26px;

border: 1px solid #c9c9c9;

}

.search1{

width: 174px;

height: 36px;

border:0 none;

outline:none;

/*内边距:文字距离边内边框的距离*/

padding: 0px 3px 0px 2px;/*上右下左*/

float: left;

}

.search2{

width: 50px;

height: 36px;

border:0 none;

font-size: 18px;

float: right;

outline:none;

}

.top4{

width: 290px;

height: 90px;

line-height: 90px;

float: right;

}

.nav1{

font-size: 16px;

text-decoration: none;

color: black;

}

.nav2{

margin:0px 10px 0px 20px ;

padding: 12px;

color: white;

font-size: 14px;

background-color:rgb(49, 194, 124);

text-decoration: none;

}

.nav3{