制作拼多多界面
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 0px solid red;
margin: auto;
}
.box1{
width: 393px;
height: 545px;
border: 0px solid rgb(28, 9, 231);
background-color: rgb(254, 254, 254);
box-shadow: 2px 2px 2px 2px rgb(167, 162, 162);/*设置盒子阴影*/
margin: auto;/*将盒子居中*/
}
.box2{
width: 100px;
height: 150px;
border: 0px solid rgb(0, 251, 71);
line-height: 1px;/*设置行高*/
float: left;/* float: left 使标签向左聚集(浮动)*/
margin: 15px 15px 15px 15px;/*设置box2盒子间的间距 根据 上 右 下 左 的顺序*/
}
.box3{
width: 100px;
height: 120px;
border: 0px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220829.png">
<p> 政府消费券</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113233220.png">
<p> 国家补贴</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
<div class="box2">
<img class="box3" src="img/微信截图_20250113220726.png">
<p> 充值中心</p>
</div>
</div>
</div>
</body>
</html>结果:
扫一扫
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
