首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易云</title>
<link rel="stylesheet" href="wangyiyun.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="daohanglan.css">
</head>
<body>
<div class="big">
<div class="box">
<div class="box1">
<img src="微信图片_20220324101753.png" alt="">
<font color="white">网易云音乐</font>
</div>
<div class="box2">
<font color="#D43C33">下载APP</font>
</div>
</div>
<div class="he">
<div class="he2">
<font color="darkred">推荐音乐</font>
</div>
<div class="he3">
<a href="热歌榜.html" style="text-decoration: none;">热歌榜</a>
</div>
<div class="he3">
<li>
<a href="搜索.html" style="text-decoration: none;">搜索</a>
</li>
</div>
</div>
<div class="you">编辑推荐</div>
<div class="she">
<div class="she1">
<img src="01.png" alt="">
<font size="5">芝加哥公牛</font>
<div class="p"><img src="微信图片_20220325103150.png" />123.1万</div>
</div>
<div class="she1">
<img src="06.png" alt="">
<div class="q">
<font size="5">克利夫兰骑士</font>
</div>
<div class="p"><img src="微信图片_20220325103150.png" />2.1万</div>
</div>
<div class="she1">
<img src="02.png" alt="">
<font size="5">布鲁克林篮网</font>
<div class="p"><img src="微信图片_20220325103150.png" />3.1万</div>
</div>
<div class="she1">
<img src="03.png" alt="">
<font size="5">迈阿密热火</font>
<div class="p"><img src="微信图片_20220325103150.png" />153.1万</div>
</div>
<div class="she1">
<img src="04.png" alt="">
<font size="5">密尔沃基雄鹿</font>
<div class="p"><img src="微信图片_20220325103150.png" />23.1万</div>
</div>
<div class="she1">
<img src="05.png" alt="">
<font size="5">费城75人</font>
<div class="p"><img src="微信图片_20220325103150.png" />12.1万</div>
</div>
<div class="you">最新音乐</div>
<div class="box0">
<div class="box3">
<div class="box111">
<font size="5">
<font color="black">Memories(在等冬天)</font>
</font>
<br />
<font size="1">
<font color="black">我的歌手</font>
</font>
</div>
<div class="box11"><img src="微信图片_20220324101813.png" alt="">
</div>
</div>
<div class="box3">
<div class="box111">
<font size="5">
<font color="black">密室逃脱</font>
</font>
<br />
<font size="1">
<font color="black">我的歌手</font>
</font>
</div>
<div class="box11"><img src="微信图片_20220324101813.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
热歌榜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易云</title>
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="daohanglan.css">
<link rel="stylesheet" href="热歌榜.css">
</head>
<body>
<div class="B">
<div class="box">
<div class="box1">
<img src="微信图片_20220324101753.png" alt="">
<font color="white">网易云音乐</font>
</div>
<div class="box2">
<font color="#D43C33">下载APP</font>
</div>
</div>
<div class="he">
<div class="he1">
<a href="首页.html" style="text-decoration: none;">推荐音乐</a>
</div>
<div class="he2">
<font color="darkred">热歌榜</font>
</div>
<div class="he3">
<a href="搜索.html" style="text-decoration: none;">搜索</a>
</div>
</div>
<div class="banner">
<div class="banner_box">
<div class="could"></div>
<div class="update">更新日期03月25日</div>
</div>
</div>
<div class="gedan">
<div class="ge">
<div class="shuzi">
<font size="5">01</font>
</div>
<div class="player">
<div class="gequ">
<font size="6">稻香</font>
<div class="SQ">
<div class="sq"></div>
<div class="geshou">周杰伦</div>
</div>
</div>
<div class="tupian">
<img src="微信图片_20220324101813.png">
</div>
</div>
</div>
<div class="ge">
<div class="shuzi">
<font size="5">02</font>
</div>
<div class="player">
<div class="gequ">
<font size="6">稻香</font>
<div class="SQ">
<div class="sq"></div>
<div class="geshou">周杰伦</div>
</div>
</div>
<div class="tupian">
<img src="微信图片_20220324101813.png">
</div>
</div>
</div>
<div class="ge">
<div class="shuzi">
<font size="5">03</font>
</div>
<div class="player">
<div class="gequ">
<font size="6">稻香</font>
<div class="SQ">
<div class="sq"></div>
<div class="geshou">周杰伦</div>
</div>
</div>
<div class="tupian">
<img src="微信图片_20220324101813.png">
</div>
</div>
</div>
<div class="ge">
<div class="shuzi1">
<font size="5">04</font>
</div>
<div class="player">
<div class="gequ">
<font size="6">稻香</font>
<div class="SQ">
<div class="sq"></div>
<div class="geshou">周杰伦</div>
</div>
</div>
<div class="tupian">
<img src="微信图片_20220324101813.png">
</div>
</div>
</div>
<div class="ge">
<div class="shuzi1">
<font size="5">05</font>
</div>
<div class="player">
<div class="gequ">
<font size="6">稻香</font>
<div class="SQ">
<div class="sq"></div>
<div class="geshou">周杰伦</div>
</div>
</div>
<div class="tupian">
<img src="微信图片_20220324101813.png">
</div>
</div>
</div>
<div class="ge">
<div class="shuzi1">
<font size="5">06</font>
</div>
<div class="player">
<div class="gequ">
<font size="6">稻香</font>
<div class="SQ">
<div class="sq"></div>
<div class="geshou">周杰伦</div>
</div>
</div>
<div class="tupian">
<img src="微信图片_20220324101813.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易云</title>
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="daohanglan.css">
<style>
.a {
width: 600px;
height: 100px;
border-bottom: 2px solid whitesmoke;
display: flex;
justify-content: center;
align-items: center;
}
.a1 {
width: 500px;
height: 50px;
background-color: #BBBBBB;
border-radius: 40px;
display: flex;
align-items:center;
}
.a11{
border-left: 1px solid black;
}
.a11 input{
color:lightgray;
height: 25px;
width: 400px;
}
.a1>img{
height: 30px;
margin-left: 5px;
}
.b{
width: 600px;
height: 50px;
}
.b1{
width: 600px;
height: 200px;
display: flex;
flex-wrap: wrap;
}
.b2{
width: 120px;
height: 50px;
background-color:whitesmoke ;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
font-size: 18px;
}
.a1 a:hover {
color: #D43C33;
}
</style>
</head>
<body>
<div class="B">
<div class="box">
<div class="box1">
<img src="微信图片_20220324101753.png" alt="">
<font color="white">网易云音乐</font>
</div>
<div class="box2">
<font color="#D43C33">下载APP</font>
</div>
</div>
<div class="he">
<div class="he1">
<a href="首页.html" style="text-decoration: none;">推荐音乐</a>
</div>
<div class="he1">
<a href="热歌榜.html" style="text-decoration: none;">热歌榜</a>
</div>
<div class="he2">
<font color="darkred">搜索</font>
</div>
</div>
<div class="a">
<div class="a1">
<img src="放大镜.png">
<div class="a11">
<input type="text" name="firstname" value="搜索歌曲、歌手、专辑" >
</div>
</div>
</div>
<div class="b">
<font color="gray">
<font size="5">热门搜索</font>
</font>
</div>
<div class="b1">
<div class="b2">够钟</div>
<div class="b2">爱丫爱丫</div>
<div class="b2">TOMBOY</div>
<div class="b2">Letting GO</div>
<div class="b2">林俊杰</div>
<div class="b2">孤勇者</div>
<div class="b2">哪里都是你</div>
<div class="b2">who says</div>
<div class="b2">白羊座</div>
<div class="b2">陈奕迅</div>
</div>
</div>
</body>
</html>