admin管理员组文章数量:1639924
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{
版权声明：本文标题：用html写QQ音乐首页,使用HTML5仿制的QQ音乐PC版界面 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729304744a1194999.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论