html+css实现商品简单布局效果图：
这是基于float实现的，建议替换成flex布局
页⾯结构
<div class="container">
<div class="left">
<div class="wrap">
<h3>olay</h3>
borderbox
<div class="a-wrap">
<a href="#">点击进⼊</a>
</div>
<p>123</p>
<img src="./images/3.jpg!q90!cc_230x306"alt=""/> </div>
</div>
<div class="right">
<ul>
<li class="right-li">
<h3>1</h3>
<div class="a-wrap">
<a href="">2</a>
</div>
<p>3</p>
<img src="./images/2.png!q90!cc_180x260"alt=""/> </li>
<li class="right-li">
<h3>2</h3>
<div class="a-wrap">
<a href="">3</a>
</div>
<p>4</p>
<img src="./images/3.webp"alt=""/>
</li>
<li class="right-li">
<h3>3</h3>
<div class="a-wrap">
<a href="">4</a>
</div>
<p>4</p>
<img src="./images/4.webp"alt=""/>
</li>
<li class="right-li">
<h3>4</h3>
<div class="a-wrap">
<a href="">5</a>
</div>
<p>6</p>
<img src="./images/5.webp"alt=""/>
</li>
<li class="right-li">
<h3>5</h3>
<div class="a-wrap">
<a href="">6</a>
</div>
<p>7</p>
<img src="./images/6.webp"alt=""/>
</li>
<li class="right-li">
<h3>6</h3>
<div class="a-wrap">
<a href="">7</a>
</div>
<p>8</p>
<img src="./images/7.webp"alt=""/>
</li>
</ul>
</div>
</div>
css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.container{
margin: 50px auto;
border-top: 5px solid red; border-right: 3px solid red; border-bottom: 3px solid red; border-left: 5px solid red; width: 1000px;
height: 300px;
}
.left{
float: left;
position: relative;
box-sizing: border-box;
width: 400px;
height: 300px;
border-right: 1px dashed #ddd; }
.left .wrap{
padding: 40px;
}
h3{
font-size: 26px;
padding-bottom: 20px;
}
.
a-wrap{
background:rgb(233, 51, 51); width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border-top-right-radius: 15px; border-bottom-right-radius: 15px; margin-bottom: 20px;
}
.left-wrap a{
color:rgb(26, 26, 25);
padding-bottom: 20px;
}
.
left img{
position: absolute;
top:50px;
right: 35px;
width: 40%;
}
.right{
.right{
box-sizing: border-box;
width: 600px;
height: 300px;
float: left;
}
ul li{
box-sizing: border-box;
float: left;
width: 200px;
height: 150px;
}
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3){
border-bottom: 1px dashed #ddd; }
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(4),
ul li:nth-child(5){
border-right: 1px dashed #ddd; }
.right-li{
padding: 20px;
position: relative;
}
.right-li img{
position: absolute;
top:25px;
right: 17px;
width: 100px;
height: 100px;
}
.right-li img:hover{
transform:translateX(-10px); transition: all .5s ease;
}
.right .a-wrap{
width: 50px;
height: 20px;
line-height: 20px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 10px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。