一.主要思路
1.写一个大盒子，将内部分为如图几个部分，分别写对应的内容
2.首先给整个盒子宽高，传进图片后调整图片宽高
3.重点在于“找同款”和“买家秀”的隐藏效果写法
4.需要考虑到图片与“找同款”“买家秀”的相对绝对位置关系，图片作为父级元素，“找同款”“买家秀”作为子元素
5.还需要注意的是底部活动图标的位置大小调整，需要先给小盒子合适的宽高，再根据盒子的宽高调整图片的大小，最后调整左右间距，达到理想效果即可
二.完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>仿制淘宝商品界面</title>
<style type="text/css">
.all{
width: 250px;
height: 380px;
float: left;
margin: 50px;
border: 1px solid rosybrown;
}
.imagehover,img{
width: 250px;
height: 250px;
}
.imagehover{
position: relative;
}
.imagehoverchild{
position: absolute;
bottom: 0px;
display: none;
}
.imagehoverchild>div{
width: 125px;
float: left;
background-color: orangered;
text-align: center;
color: white;
}
.imagehoverchild>div:first-child{
width: 124px;
border-right: 1px solid white;
border-top-left-radius: 25%;
}
.imagehoverchild>div:last-child{
border-top-right-radius: 25%;
}
.imagehover:hover>.imagehoverchild{
display: block;
}
.message{
height: 0px;
}
.message>span:first-child{
font-size: 20px;
font-weight: 200px;
color: orange;
}
.message>span:nth-child(2){
font-size: 14px;
background-color: red;
color: white;
padding-left: 2px;
padding-right: 2px;
}
.message>span:nth-child(3){
font-size: 14px;
float: right;
color: #999;
padding-right: 5px;
padding-top: 4px;
}
.message>span:nth-child(4){
font-size: 15px;
color: black;
}
.store>a{
font-size: 15px;
padding-left: 3px;
}
.store>span{
font-size: 14px;
vertical-align: middle;
float: right;
color: #999;
}
.store{
margin-right: 2px;
}
.activitiesimg>a:first-child{
display: inline-block;
width: 60px;
height: 30px;
background-size: 60px 30px;
background-image: url("双十一1.png");
}
.activitiesimg>a:nth-child(2){
display: inline-block;
width: 30px;
height: 30px;
background-size: 30px 30px;
background-image: url("天猫.png");
}
.activitiesimg>a:last-child{
display: inline-block;
width: 30px;
height: 30px;
background-size: 30px 30px;
background-image: url("小精灵.png");
float: right;
}
.activitiesimg{
padding-top: 5px;
}
</style>
</head>
<body>
<div class="all">
<div class="imagehover">
<img src="狼.png" alt="">
<div class="imagehoverchild">
<div>找同款</div>
<div>买家秀</div>
</div>
<div class="message">
<span>￥666.00 </span>
<span>包邮 </span>
<span>6万+人付款</span>
<span>xxxxxx加绒卫衣男冬款<span style="color: red;">衣服</span>情侣xx秋装上衣xx印花外套</span>
<div class="store">
<a href="#">xxxxxxxx旗舰店</a>
<span>四川-成都</span>
</div>
<div class="activitiesimg">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</div>
</div>
</body>
</html>
本文转载自: https://blog.csdn.net/weixin_64334766/article/details/128944244
版权归原作者 树下一少年 所有， 如有侵权，请联系我们删除。
版权归原作者 树下一少年 所有， 如有侵权，请联系我们删除。