一、呈现图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飙升榜</title>
<style>
ul{list-style: none;}
.box {
width: 280px;
height: 620px;
background-color:#f4f4f4;
border-radius: 3px;
box-shadow: 2px 2px 5px #999;
}
.box li {
width: 250px;
height: 40px;
line-height: 40px;
}
.box li > span {
margin-left: 25px;
}
.box li.active {
width: 280px;
height: 170px;
}
.box > li > img {
width: 110px;
margin-left: 20px;
padding-top: 20px;
float: left;
}
.img-left {
width: 100px;
height: 100px;
float: right;
margin-top: 20px;
}
.img-left > p {
width: 100px;
height: 30px;
margin-top: 10px;
}
.img-left > p > img {
float: left;
}
.even {
background-color: #f4f4f4;
}
.odd {
background-color: #CCC;
}
.all {
text-align: right;
margin-right: 10px;
}
.all > a {
color: black ;
}
</style>
</head>
<body>
<ul class="box">
<li class="active even">
<img src="http://p3.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=100y100">
<div class="img-left">
<h3>飙升榜</h3>
<p>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-13 224906.png">
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215112.png">
</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!feat . YUQI </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>
结果：
二、呈现图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐</title>
<style>
* {
margin: 0;
padding: 0;
}
ol, ul {
list-style: none;
}
ul.menu {
width: 900px;
height: 200px;
margin: auto;
background-color: #f2f2f2;
color:black;
}
ul.menu > li {
width: 120px;
height: 50px;
float: left;
text-align: center;
line-height: 60px;
cursor: pointer;
}
ul.menu > li:hover, .active {
background-color:#f2f2f2;
color: #ff3c48;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215556.png">
<p>音乐开放平台</p>
</li>
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215610.png">
<p>云村交易所</p>
</li>
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215626.png">
<p>X StudioAl歌手</p>
</li>
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215641.png">
<p>用户认证</p>
</li>
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215653.png">
<p>Al 免费写歌</p>
</li>
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215706.png">
<p>云推歌</p>
</li>
<li>
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-15 215719.png">
<p>赞赏</p>
</li>
</ul>
</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>
.box{
width: 300px;
height: 400px;
background-color: #f7f8fc;
border-radius: 10px;
text-align: center;
}
.row{
width: 300px;
height: 100px;
}
.row .col {
width: 80px;
height: 80px;
float: left;
margin: 10px;
}
.col > img {
width: 45px;
margin-left: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/243763/35/24566/3672/673721d6F52f8c4cb/7bf1c6789ac01133.png" >
<p>京豆</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/231444/6/27383/10280/66e3fbc2Fc1563e2a/409eb5bd94d0519f.png">
<p>充值中心</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/134819/19/50541/5635/67331508F5b88970c/b73e5f373ec68849.png">
<p>政府消费券</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/180341/28/47616/8886/66e3fba4F5feb619f/be2b1eb936ae3d36.png" >
<p>礼品卡</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/134976/1/47793/8944/6724bf2cF55a1eb05/21d0f2d84f63b505.png">
<p>金条借款</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/191442/19/49010/10556/67111e93F323e2874/0aed1c833b4f56f9.png">
<p>国家补贴</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/8914/18/28174/7383/66e3fb71Fdee563de/2d210624a9db00c2.png" >
<p>爱回收</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/121165/19/48769/4730/66e3fb4dFce8171da/ba0bea3ac8695b3e.png">
<p>企业计划购</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/57352/4/28760/7863/66c85d19F3996c5fc/eb2a21548881adac.png">
<p>买贵双倍赔</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/240435/32/18037/4804/66e3fbb9F9da337a9/88a1c1e8b63e5620.png" >
<p>游戏</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/182702/10/52541/8896/6724a006F04b32dfd/1385120b646a81a8.png">
<p>企采返E卡</p>
</div>
<div class="col">
<img src="https://m.360buyimg.com/babel/jfs/t1/240820/30/27462/9749/675a97f1Ffa35586b/bbe10af2117e199b.png">
<p>酒店</p>
</div>
</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>
<!--(flex)弹性盒子-->
<style>
.search{
display: flex;
align-items: center;
border: 1px solid #c93009;
border-radius: 5px;
overflow: hidden;
width: 559.5px;
margin: 20px auto;
}
.search-input {
border: none;
outline: none;
padding: 10px 20px;
font-size: 16px;
width: 72%;
}
.search > img{
width: auto;
height: 20px;
margin-right: 15px;
}
.search-button {
background-color: #ff4d4f;
color: white;
border: none;
cursor: pointer;
padding: 7.5px 24.5px;
font-size: 16px;
border-radius: 8px 8px 8px 8px;
}
.search-button:hover {
background-color: #ff7a7b;
}
</style>
</head>
<body>
<div class="search">
<input type="text" class="search-input" placeholder="输入关键词">
<img src="C:\Users\lenovo\Pictures\Screenshots\屏幕截图 2025-01-17 181643.png">
<button class="search-button">搜索</button>
</div>
</body>
</html>
结果：
扫一扫
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
