<body>
<div class="goods">
<div class="left">
<img src="./大图.webp" width="234" height="600">
</div>
<div class="right">
<ul>
<li>
<a href="#">
<img src="./图一.webp" width="160" height="210">
<h3>Redmi Note 12T Pro</h3>
<p>年度LCD屏幕之光</p>
<div>1499元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图二.webp" width="160" height="210">
<h3>Xiaomi Civi 3</h3>
<p>仿生双眸 天生双色</p>
<div>2499元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图三.webp" width="160" height="210">
<h3>Xiaomi 13 Ultra</h3>
<p>徕卡光学全焦段四摄</p>
<div>5999元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图四.webp" width="160" height="210">
<h3>Redmi Note 12 Turbo</h3>
<p>狂暴引擎 超强性能释放</p>
<div>1699元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图五.webp" width="160" height="210">
<h3>Redmi k60</h3>
<p>2k高光直屏</p>
<div>2599元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图六.webp" width="160" height="210">
<h3>Xiaomi Civi 3</h3>
<p>仿生双眸 天生双色</p>
<div>2499元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图七.webp" width="160" height="210">
<h3>Redmi K60 pro</h3>
<p>狂暴引擎</p>
<div>2599元起</div>
</a>
</li>
<li>
<a href="#">
<img src="./图八.webp" width="160" height="210">
<h3>Xiaomi Civi 3</h3>
<p>仿生双眸 天生双色</p>
<div>2499元起</div>
</a>
</li>
</ul>
</div>
</div>
* {
padding:0;
margin:0;
}
.goods {
display: flex;
width:1220px;
height:600px;
border:2px solid black;
margin:0 auto;
background-color: #fff;
}
.left {
width: 300px;
height: 600px;
background-color:pink;
}
.right ul {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 990px;
height: 600px;
}
ul li{
list-style: none;
width: 230px;
height: 275px;
background-color:red;
}
a{
text-decoration:none;
text-align:none;
}
ul li{
width:234px;
height:290px;
background-color:rgba(0,0,0,0);
text-align: center;
}
h3{
font-size:14px;
font-weight:400;
color:black;
}
a p{
font-size:12px;
color:#B0B0B0;
}
a div{
font-size: 14px;
color: orange;
2234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
