目录
一.主要思路
二.完整代码
三.最终效果
一.主要思路
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>| <!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://www.toymoban.com/news/detail-485356.html
文章来源地址https://www.toymoban.com/news/detail-485356.html
到了这里，关于html+css简单仿制淘宝商品界面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
