模仿网易云页面的代码如下
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网易云音乐</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/index2.css">
<link rel="stylesheet" href="./iconfont/01/iconfont.css">
<link rel="stylesheet" href="./iconfont/02/iconfont.css">
</head>
<body>
<div class="box">
<div class="header">
<img src="/static/image/网易云.png" alt="">
</div>
<div class="right"></div>
<div class="left">
<ul>
<li><a href="#">发现音乐</li></a>
<li><a href="#">视频</li></a>
<li><a href="#">朋友</li></a>
<li><a href="#">直播</li></a>
<li><a href="#">私人FM</li></a>
<li>我的音乐</li>
<li><a href="#">本地音乐</li></a>
<li><a href="#">下载管理</li></a>
<li><a href="#">我的音乐云盘</li></a>
<li><a href="#">我的电台</li></a>
<li><a href="#">我的收藏</li></a>
</ul>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
margin: 0;
padding: 0;
}
.box{
position: relative;/*父div的位置设为相对的*/
height: 1340px;
width: 2045px;
}
.header {
background-color: rgb(236, 65, 65);
height: 120px;
width: 2045px;
}
.left{
float: left;
background-color: #f7f1f1;
height: 1080px;
width: 400px;
}
.right{
float: right;
background-color: #dcd6d6;
height: 1080px;
width: 1645px;
}
.bottom{
border: 3px solid #5d5d5d;
position: absolute;/*子div位置设为绝对的*/
bottom: 0%;/*下边缘设为0,达到子div在夫div中置底的效果*/
background-color: white;
height: 140px;
width: 2045px;
}
.logo {
float: left;
width: 250px;
height: 55px;
margin-top: 40px;
}
.logo i {
font-size: 250px;
line-height: 55px;
}
.left li{
font-size: 30px;
line-height: 70px;
}
.left a{
color:black;
text-decoration: none;
}
.left a:hover{
color: #5d5d5d;
}
.left ul{
list-style-type: none;
}
显示的结果如下
总结
对于qq音乐的界面制作十分不熟悉,可以花更对的时间来学习