目录
一，音乐排行榜
1，程序代码
2，运行结果
二，京东服务中心
1，程序代码
2，运行结果
三，网易云服务
1，程序代码
2，运行结果
一，音乐排行榜
1，程序代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.bang {
width: 280px;
height: 620px;
background-color: #EEE;
border-radius: 3px;
box-shadow: 2px 2px 5px #999;
}
.bang li {
width: 280px;
height: 41px;
line-height: 41px;
}
.bang li > span {
margin-left: 30px;
}
.bang li.active {
width: 280px;
height: 170px;
}
.bang > li > img {
width: 110px;
margin-left: 25px;
padding-top: 25px;
float: left;
}
.img-left {
width: 120px;
height: 120px;
float: right;
margin-top: 25px;
}
.img-left > p {
width: 120px;
height: 50px;
margin-top: 20px;
}
.img-left > p >img {
float: left;
}
.even {
background-color: #EEE;
}
.odd {
background-color: #DDD;
}
.all {
text-align: right;
}
.all > a{
color: #222;
}
</style>
</head>
<body>
<ul class="bang">
<li class="active even">
<img src="./img/飙升榜.png" alt="">
<div class="img-left">
<h3>飙升榜</h3>
<p>
<img src="./img/保存.jpg" alt="">
<img src="./img/播放.jpg" alt="">
</p>
</div>
</li>
<li class="odd">
<span>1 不重逢</span>
</li>
<li class="even">
<span>2 温暖的房子</span>
</li>
<li class="odd">
<span>3 永不熄灭的火焰</span>
</li>
<li class="even">
<span>4 怪诞心理学</span>
</li>
<li class="odd">
<span>5 忒修斯的船</span>
</li>
<li class="even">
<span>6 晨光里有你</span>
</li>
<li class="odd">
<span>7 No Cap（Phonk口水）</span>
</li>
<li class="even">
<span>8 Fire!</span>
</li>
<li class="odd">
<span>9 Teeth</span>
</li>
<li class="even">
<span>10 你是旷野 是山间的风</span>
</li>
<li class="odd all">
<a href="#">查看全部></a>
</li>
</ul>
</body>
</html>
2，运行结果
二，京东服务中心
1，程序代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.box {
width: 300px;
height: 400px;
background-color: #F7F8FC;
border-radius: 10px;
text-align: center;
}
.row {
width: 300px;
height: 100px;
/* border: 1px solid red; */
}
.row .col {
/* border: 1px solid red; */
width: 80px;
height: 80px;
float: left;
margin: 10px;
}
.col > img {
width: 55px;
margin-left: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="col">
<img src="./img/dou.png" alt="">
<p>京豆</p>
</div>
<div class="col">
<img src="./img/chongzhi .png" alt="">
<p>充值中心</p>
</div>
<div class="col">
<img src="./img/quan.png" alt="">
<p>政府消费券</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="./img/ka.png" alt="">
<p>礼品卡</p>
</div>
<div class="col">
<img src="./img/jie.png" alt="">
<p>金条借款</p>
</div>
<div class="col">
<img src="./img/tie.png" alt="">
<p>国家补贴</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="./img/huishou .png" alt="">
<p>爱回收</p>
</div>
<div class="col">
<img src="./img/gou.png" alt="">
<p>企业计划购</p>
</div>
<div class="col">
<img src="./img/pei.png" alt="">
<p>买贵双倍赔</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="./img/uouxi.png" alt="">
<p>游戏</p>
</div>
<div class="col">
<img src="./img/E.png" alt="">
<p>企采返E卡</p>
</div>
<div class="col">
<img src="./img/jiudian.png" alt="">
<p>酒店</p>
</div>
</div>
</div>
</body>
</html>
2，运行结果
三，网易云服务
1，程序代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐相关页面</title>
<link rel="stylesheet" href="styles.css">
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
}
.icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.icon.music:before {
content: "\f001";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.icon.exchange:before {
content: "\f15c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.icon.studio:before {
content: "\f121";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.icon.auth:before {
content: "\f023";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.icon.ai:before {
content: "\f5ff";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.icon.push:before {
content: "\f0e7";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.icon.reward:before {
content: "\f004";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="./img/kaifang.png" alt="">
<span>音乐开放平台</span>
</div>
<div class="item">
<img src="./img/jiaoyi.png" alt="">
<span>云村交易所</span>
</div>
<div class="item">
<img src="./img/X.png" alt="">
<span>X StudioAI歌手</span>
</div>
<div class="item">
<img src="./img/renzheng.png" alt="">
<span>用户认证</span>
</div>
<div class="item">
<img src="./img/AI.png" alt="">
<span>AI 免费写歌</span>
</div>
<div class="item">
<img src="./img/yun.png" alt="">
<span>云推歌</span>
</div>
<div class="item">
<img src="./img/shang.png" alt="">
<span>赞赏</span>
</div>
</div>
</body>
</html>
2，运行结果
