完成商品购买界面浏览

最新推荐文章于 2024-07-25 11:52:08 发布

An-新

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量94

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_60636922/article/details/130140360

版权

完成如下所示图：

代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

li {

list-style: none;

}

.box {

display: flex;

justify-content: space-between;

width: 1226px;

height: 614px;

background-color: rgb(245, 245, 245);

margin: 0 auto;

}

.left {

width: 234px;

height: 614px;

}

.right ul {

width: 978px;

height: 614px;

/* background-color: burlywood; */

}

.right ul {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-content: space-between;

}

.right ul li {

width: 234px;

height: 300px;

}

.box1{

width: 234px;

height: 300px;

margin: 0 auto;

text-align: center;

}

</style>

</head>

<body>

<ul>

<li>

<div>Redmi Note 12 Turbo</div>

<div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div>

</div>

</li>

<li>

<div>Redmi K60</div>

<div style="color:rgb(131, 132, 132)">骁龙8+|2K高光直屏</div>

</div>

</li>

<li>

<div>Redmi K60 Pro</div>

<div style="color:rgb(131, 132, 132)">【第二代骁龙8】</div>

</div>

</li>

<li>

<div>Redmi Note 12 Pro 极速版</div>

</div>

</li>

<li>

<div>Redmi Note 12 Turbo</div>

<div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div>

</div>

</li>

<li>

<div>Redmi Note 12 Turbo</div>

<div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div>

</div>

</li>

<li>

<div>Redmi Note 12 Turbo</div>

<div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div>

</div>

</li>

<li>

<div>Redmi Note 12 5G</div>

<div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div>

</div>

</li>

</ul>

</div>

</body>

</html>

代码运行结果如下：

An-新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完成商品购买界面浏览

狂暴引擎超强性能释放</div><div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div><div style="color:rgb(131, 132, 132)">狂暴引擎超强性能释放</div><div>Redmi Note 12 Pro 极速版
复制链接

扫一扫