目录
css
【例】飙升榜
【源码】
css
【例】飙升榜
【源码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飙升榜</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.rank-container {
width: 300px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.rank-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.rank-logo {
width: 60px;
height: 60px;
background-color: #800080;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
margin-right: 30px;
border-radius: 5px;
}
.rank-title {
font-size: 20px;
font-weight: bold;
}
.icon-container {
margin-left: auto;
}
.icon-container img {
width: 20px;
height: 20px;
margin-left: 10px;
}
.rank-list {
list-style: none;
padding: 0;
margin: 0;
}
.rank-item {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 10px;
border-bottom: 1px solid #e0e0e0;
opacity: 0.95;
}
.rank-number1{
color: red;
}
.rank-item:nth-child(1),
.rank-item:nth-child(3),
.rank-item:nth-child(5),
.rank-item:nth-child(7),
.rank-item:nth-child(9),
.view-all {
background-color: #f0f0f0;
}
.rank-number {
width: 30px;
font-weight: bold;
}
.rank-song {
flex: 1;
margin-left: 10px;
}
.view-all {
text-align: right;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="rank-container">
<div class="rank-header">
<div class="rank-logo">
<img src="http://p4.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=100y100" alt="图片">
</div>
<div class="rank-title">飙升榜</div>
<div class="icon-container">
<img src="https://img.51miz.com/Element/00/77/76/82/c724ec62_E777682_e6cce56a.png" alt="图片">
<img src="https://pic.616pic.com/ys_bnew_img/00/17/29/shqaSi6AP7.jpg" alt="图片">
</div>
</div>
<ul class="rank-list">
<li class="rank-item red-item">
<span class="rank-number1">1</span>
<span class="rank-song">不重逢</span>
</li>
<li class="rank-item">
<span class="rank-number1">2</span>
<span class="rank-song">温暖的房子</span>
</li>
<li class="rank-item red-item">
<span class="rank-number1">3</span>
<span class="rank-song">永不熄灭的火焰</span>
</li>
<li class="rank-item">
<span class="rank-number">4</span>
<span class="rank-song">怪诞心理学</span>
</li>
<li class="rank-item red-item">
<span class="rank-number">5</span>
<span class="rank-song">忒修斯的船</span>
</li>
<li class="rank-item">
<span class="rank-number">6</span>
<span class="rank-song">晨光里有你</span>
</li>
<li class="rank-item red-item">
<span class="rank-number">7</span>
<span class="rank-song">No Cap ( Phonk口水)</span>
</li>
<li class="rank-item">
<span class="rank-number">8</span>
<span class="rank-song">Fire! (feat. YUQI ((G)I-DLE)),...</span>
</li>
<li class="rank-item red-item">
<span class="rank-number">9</span>
<span class="rank-song">Teeth</span>
</li>
<li class="rank-item">
<span class="rank-number">10</span>
<span class="rank-song">你是旷野 是山间的风</span>
</li>
</ul>
<div class="view-all red-item">查看全部></div>
</div>
</body>
</html>
【例】功能页面
【源码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>功能页面</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 10px;
width: 300px;
height: 500px;
}
.function-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.function-item img {
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.function-item span {
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/243763/35/24566/3672/673721d6F52f8c4cb/7bf1c6789ac01133.png" alt="图片">
<span>京豆</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/231444/6/27383/10280/66e3fbc2Fc1563e2a/409eb5bd94d0519f.png" alt="图片">
<span>充值中心</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/134819/19/50541/5635/67331508F5b88970c/b73e5f373ec68849.png" alt="图片">
<span>政府消费券</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/180341/28/47616/8886/66e3fba4F5feb619f/be2b1eb936ae3d36.png" alt="图片">
<span>礼品卡</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/134976/1/47793/8944/6724bf2cF55a1eb05/21d0f2d84f63b505.png" alt="图片">
<span>金条借款</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/191442/19/49010/10556/67111e93F323e2874/0aed1c833b4f56f9.png" alt="图片">
<span>国家补贴</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/8914/18/28174/7383/66e3fb71Fdee563de/2d210624a9db00c2.png" alt="图片">
<span>爱回收</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/121165/19/48769/4730/66e3fb4dFce8171da/ba0bea3ac8695b3e.png" alt="图片">
<span>企业计划购</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/57352/4/28760/7863/66c85d19F3996c5fc/eb2a21548881adac.png" alt="图片">
<span>买贵双倍赔</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/240435/32/18037/4804/66e3fbb9F9da337a9/88a1c1e8b63e5620.png" alt="图片">
<span>游戏</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/182702/10/52541/8896/6724a006F04b32dfd/1385120b646a81a8.png" alt="图片">
<span>企采返E卡</span>
</div>
<div class="function-item">
<img src="https://m.360buyimg.com/babel/jfs/t1/240820/30/27462/9749/675a97f1Ffa35586b/bbe10af2117e199b.png" alt="图片">
<span>酒店</span>
</div>
</div>
</body>
</html>
