html组合css实现音乐排行版播放器
原创
展示
先写body主体
<div class="title">
<font color="#0066CC" size="18px" white="blod">音乐排行榜</font>
</div>
<div class="box">
<div class="r">
<div class="j-box">
<div class="img">
<img src="yinyue.jpg">
<img src="wenzi.jpg">
</div>
<!-- ul 标签写错了 -->
<ul>
<li>如果可以</li>
<li>最炫民族风</li>
<li>小星星</li>
<li>两只老虎</li>
<li class="j-box-li">shuyang</li>
</ul>
</div>
</div>
</div>
</div>css样式 主要用到定位与flex布局
<style type="text/css">
.title {
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
position: relative;
}
.r {
border-radius: 50%;
background-color: rgb(51, 51, 51);
height: 650px;
width: 650px;
border: 1px solid #666;
box-shadow: 5px 5px 10px 2px #999;
}
.j-box {
height: 500px;
width: 340px;
border-radius: 20px;
background-color: #FFF;
position: relative;
/* 这里格式写错了 */
left: 150px;
top: 50px;
}
/* ul写为了 u1 */
ul {
padding: 0;
}
li {
/* 修改过 */
display: flex;
justify-content: center;
align-items: center;
border-bottom-style: solid;
list-style-type: none;
width: 100%;
background-color: #CCC;
padding: 20px 0px 20px 0px;
}
/* 新增 */
.img {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding-top: 15px;
}
/* 新增 */
.j-box-li {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>完整项目代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐排行榜</title>
<style type="text/css">
.title {
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
position: relative;
}
.r {
border-radius: 50%;
background-color: rgb(51, 51, 51);
height: 650px;
width: 650px;
border: 1px solid #666;
box-shadow: 5px 5px 10px 2px #999;
}
.j-box {
height: 500px;
width: 340px;
border-radius: 20px;
background-color: #FFF;
position: relative;
/* 这里格式写错了 */
left: 150px;
top: 50px;
}
/* ul写为了 u1 */
ul {
padding: 0;
}
li {
/* 修改过 */
display: flex;
justify-content: center;
align-items: center;
border-bottom-style: solid;
list-style-type: none;
width: 100%;
background-color: #CCC;
padding: 20px 0px 20px 0px;
}
/* 新增 */
.img {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding-top: 15px;
}
/* 新增 */
.j-box-li {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<div class="title">
<font color="#0066CC" size="18px" white="blod">音乐排行榜</font>
</div>
<div class="box">
<div class="r">
<div class="j-box">
<div class="img">
<img src="yinyue.jpg">
<img src="wenzi.jpg">
</div>
<!-- ul 标签写错了 -->
<ul>
<li>如果可以</li>
<li>最炫民族风</li>
<li>小星星</li>
<li>两只老虎</li>
<li class="j-box-li">shuyang</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录