黑马前端p296练习 品优购列表页 产品页
- 效果图
- 代码(代码有待优化 欢迎指出)
<div class="sk_bd">
<ul>
<li>
<img src="upload/list.png" alt="">
<h4 class="style_margin">Apple苹果iPhone 6s Plus(A1699)32G 金色 移动联通电信4G手机
</h4>
<div class="price style_margin">
<h3>6088</h3><h4><del>¥6988</del></h4>
</div>
<div class="progress style_margin">
<h4>已售出87%</h4>
<div class="bar">
<div class="bar_in"></div>
</div>
<div class="progress_text">
<h4>剩余</h4>
<h4 class="style_red" style="font-size:16px;line-height: 18px;">29</h4>
<h4>件</h4>
</div>
</div>
<button>立即抢购</button>
</li>
</ul>
</div>
.sk_bd{
height: 1000px;
}
.sk_bd ul li{
float: left;
margin-top: 25px;
margin-right: 13px;
height: 460px;
width: 290px;
border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n){
margin-right: 0px;
}
.sk_bd ul li:hover{
border: 1px solid #e12228;
}
.sk_bd ul li img{
text-align: center;
}
.style_margin{
margin: 8px 12px 0;
overflow: hidden;
}
.sk_bd ul li>h4{
font-size: 14px;
color: 666666;
font-weight: 400;
line-height: 21px;
}
.price{
height: 22px;
}
.price h3{
float: left;
color: #e60012;
font-size: 22px;
line-height: 22px;
}
.price h3::before{
content: '¥';
color: #e60012;
font-size: 14px;
}
.price>h4{
float: left;
font-size: 14px;
color: #a4a4a4;
line-height: 28px;
padding-left: 8px;
}
.progress{
height: 20px;
width: 264px;
}
.progress h4{
font-size: 14px;
color: 666666;
font-weight: 400;
float: left;
line-height: 19px;
}
.progress > h4{
float: left;
}
.progress .bar{
float: left;
width: 128px;
height: 12px;
border: 1px solid #e12228;
border-radius: 4px;
margin: 4px 2px 0px;
border-radius: 7px;
}
.bar .bar_in{
width: 80%;
height: 100%;
background-color:#ed282e;
transition: all .7s;
border-radius: 7px;
}
.bar:hover .bar_in{
width: 90%;
}
.sk_bd ul li button{
width: 288px;
height: 50px;
background-color: #b1191a;
margin-top: 10px;
color: #fff;
font-size: 20px;
}