前言
本文主要介绍了淘宝产品详情的制作
一、示例图
二、制作步骤
1.HTML结构
代码如下(示例):
<!-- 外部容器 -->
<div class="wrap">
<!-- 产品图片 -->
<div class="picture">
<img src="./img/taobao.jpg" alt="">
</div>
<!-- 产品介绍 -->
<div class="good-info">
<div class="title">
<p><a href="">外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边单人枕套 头部天然空调</a></p>
</div>
<div class="tag-item">
<span>送运费险</span>
</div>
</div>
<!-- 产品价格 -->
<div class="price">
<a href="" class="money1">¥</a>
<a href="" class="money2">39.9</a>
</div>
</div>
2.CSS样式
代码如下(示例):
<style>
.wrap {
position: relative;
width: 348px;
height: 152px;
padding: 11px;
border-radius: 10px;
margin-top: 100px;
margin-left: 100px;
background-color: rgb(247, 249, 250);
border: 1px solid rgba(247, 249, 250, alpha);
}
.wrap:hover {
border: 1px solid #FAB596;
background-color: #fefefe;
box-shadow: 0 5px 10px -5px #FAB596;
}
.wrap .picture img {
position: absolute;
float: left;
width: 150px;
height: 150px;
border-radius: 10px;
}
.wrap .picture img:hover{
opacity: .9;
}
.wrap .good-info {
position: absolute;
float: left;
margin-left: 160px;
margin-top: 7px;
}
.wrap .good-info .title {
width: 186px;
height: 46px;
overflow: hidden;
}
.wrap .good-info .title a {
color: #333333;
font-size: 16px;
font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
line-height: 23px;
}
.wrap .good-info .title:hover a {
color: #fe5405f3;
}
.wrap .good-info .tag-item {
width: 58px;
height: 20px;
padding: 0px 4px;
}
.wrap .good-info .tag-item span {
color: #FF5000;
background: #FFFFFF;
height: 20px;
line-height: 20px;
display: block;
font-size: 12px;
font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
border: 1px solid #ff5000;
border-color: #FAB596;
border-radius: 3px;
text-align: center;
margin-top: 8px;
margin-left: -4px;
}
.wrap .price {
position: absolute;
float: right;
width: 279px;
height: 24.33px;
margin-left: 162px;
margin-top: 116px;
}
.wrap .price .money1 {
font: 14px "Microsoft Yahei";
color: #ff5000;
}
.wrap .price .money2 {
font-size: 22px;
color: #ff5000;
margin-left: -3px;
font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
</style>
总结
以上就是有关产品详情的制作,希望可以帮助到你吧~