|
|
15分47秒 步骤 1 : 效果 步骤 2 : 布局1 步骤 3 : 布局2 步骤 4 : 布局3 步骤 5 : 纯html 步骤 6 : 加上样式 步骤 7 : 样式讲解 步骤 8 : 再整合在一起
因为需要讲解基本信息和左侧图片的水平关系，所以依然要使用左侧的图片。
但是又因为屏幕大小关系，不能使用左侧完整图片，否则右侧会被压缩，导致样式变形，不利于学习，所以把左侧的图片简化，并缩小尺寸。 <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
div.imgAndInfo{
margin: 40px 20px;
}
div.imgInimgAndInfo{
width: 100px;
float: left;
}
div.infoInimgAndInfo{
padding: 0px 20px;
overflow: hidden;
}
div.infoInimgAndInfo div.productTitle{
color: black;
font-size: 16px;
font-weight: bold;
margin: 0px 10px;
}
div.infoInimgAndInfo div.productSubTitle{
color: #DD2727;
font-size: 12px;
margin: 0px 10px;
}
div.infoInimgAndInfo div.juhuasuan{
background-color: #2DA77A;
color: white;
text-align: center;
line-height: 40px;
margin-top: 10px;
}
div.infoInimgAndInfo span.juhuasuanBig{
font-size: 18px;
font-weight: bold;
font-family: 黑体;
}
div.infoInimgAndInfo span.juhuasuanTime{
color: #FFC057;
font-weight: bold;
}
div.infoInimgAndInfo div.productPriceDiv{
background-image:url(https://how2j.cn/tmall/img/site/priceBackground.png);
height: 102px;
padding: 10px;
color: #666666;
}
div.infoInimgAndInfo div.gouwujuanDiv{
margin-top: 5px;
}
div.infoInimgAndInfo div.originalDiv{
margin-top: 5px;
}
div.infoInimgAndInfo span.originalPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
}
div.infoInimgAndInfo span.originalPrice{
font-family: Arial;
font-size: 12px;
color: #333333;
text-decoration: line-through;
}
div.infoInimgAndInfo span.promotionPriceYuan{
font-family: Arial;
font-size: 18px;
color: #C40000;
}
div.infoInimgAndInfo span.promotionPrice{
color: #c40000;
font-family: Arial;
font-size: 30px;
font-weight: bold;
}
div.infoInimgAndInfo span.promotionPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
position: relative;
left: 0px;
top: -10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber{
margin: 20px 0px;
border-top-style: dotted;
border-top-color: #C9C9C9;
border-top-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #C9C9C9;
border-bottom-width: 1px;
padding: 10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div{
display: inline-block;
width: 49%;
text-align: center;
color: #999999;
font-size: 12px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E5DFDA;
}
div.infoInimgAndInfo div.productNumber{
color: #999999;
}
div.infoInimgAndInfo span.productNumberSettingSpan{
border: 1px solid #999;
display: inline-block;
width: 43px;
height: 32px;
padding-top:7px;
}
div.infoInimgAndInfo input.productNumberSetting{
border: 0px;
height: 80%;
width: 80%;
}
div.productNumber span.updown img{
display:inline-block;
vertical-align:top;
}
div.productNumber span.updown{
border: 1px solid #999;
display: block;
width: 20px;
height: 14px;
text-align: center;
padding-top:4px;
}
div.productNumber span.updownMiddle{
height: 4px;
display: block;
}
div.productNumber span.arrow{
display: inline-block;
width: 22px;
height: 32px;
vertical-align:top;
}
div.serviceCommitment{
margin: 20px 0px;
}
div.infoInimgAndInfo span.serviceCommitmentDesc{
color: #999999;
}
div.infoInimgAndInfo span.serviceCommitmentLink a{
color: #666666;
}
div.buyDiv{
margin: 20px auto;
text-align: center;
}
div.buyDiv button{
display: inline-block;
margin: 0px 10px;
width: 180px;
height: 40px;
}
button.buyButton{
border: 1px solid #C40000;
background-color: #FFEDED;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;
}
button.addCartButton{
border: 1px solid #C40000;
background-color: #C40000;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
font-family: arial;
}
button.addCartButton span.glyphicon{
font-size: 12px;
margin-right: 8px;
}
a:hover{
text-decoration:none;
}
.redColor{
color: #C40000;
}
.boldWord{
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="imgAndInfo">
<div class="imgInimgAndInfo">
<img width="100px" src="https://how2j.cn/tmall/img/productSingle/8619.jpg">
</div>
<div class="infoInimgAndInfo">
<div class="productTitle">
名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
</div>
<div class="productSubTitle">
高端定制 高档棉麻 现货即发 加购物车 领优惠卷
</div>
<div class="productPrice">
<div class="juhuasuan">
<span class="juhuasuanBig">聚划算</span>
<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<div class="productPriceDiv">
<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
<span> 全天猫实物商品通用</span>
</div>
<div class="originalDiv">
<span class="originalPriceDesc">价格</span>
<span class="originalPriceYuan">¥</span>
<span class="originalPrice">
399.00
</span>
</div>
<div class="promotionDiv">
<span class="promotionPriceDesc">促销价 </span>
<span class="promotionPriceYuan">¥</span>
<span class="promotionPrice">
379.05
</span>
</div>
</div>
</div>
<div class="productSaleAndReviewNumber">
<div>销量 <span class="redColor boldWord"> 50</span></div>
<div>累计评价 <span class="redColor boldWord"> 19</span></div>
</div>
<div class="productNumber">
<span>数量</span>
<span>
<span class="productNumberSettingSpan">
<input type="text" value="1" class="productNumberSetting">
</span>
<span class="arrow">
<a class="increaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/increase.png">
</span>
</a>
<span class="updownMiddle"> </span>
<a class="decreaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/decrease.png">
</span>
</a>
</span>
件</span>
<span>库存66件</span>
</div>
<div class="serviceCommitment">
<span class="serviceCommitmentDesc">服务承诺</span>
<span class="serviceCommitmentLink">
<a href="#nowhere">正品保证</a>
<a href="#nowhere">极速退款</a>
<a href="#nowhere">赠运费险</a>
<a href="#nowhere">七天无理由退换</a>
</span>
</div>
<div class="buyDiv">
<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
</div>
</div>
<div style="clear:both"></div>
</div>
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="imgAndInfo">
<div class="imgInimgAndInfo">
<img width="100px" src="https://how2j.cn/tmall/img/productSingle/8619.jpg">
</div>
<div class="infoInimgAndInfo">
<div class="productTitle">
名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
</div>
<div class="productSubTitle">
高端定制 高档棉麻 现货即发 加购物车 领优惠卷
</div>
<div class="productPrice">
<div class="juhuasuan">
<span class="juhuasuanBig">聚划算</span>
<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<div class="productPriceDiv">
<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
<span> 全天猫实物商品通用</span>
</div>
<div class="originalDiv">
<span class="originalPriceDesc">价格</span>
<span class="originalPriceYuan">¥</span>
<span class="originalPrice">
399.00
</span>
</div>
<div class="promotionDiv">
<span class="promotionPriceDesc">促销价 </span>
<span class="promotionPriceYuan">¥</span>
<span class="promotionPrice">
379.05
</span>
</div>
</div>
</div>
<div class="productSaleAndReviewNumber">
<div>销量 <span class="redColor boldWord"> 50</span></div>
<div>累计评价 <span class="redColor boldWord"> 19</span></div>
</div>
<div class="productNumber">
<span>数量</span>
<span>
<span class="productNumberSettingSpan">
<input type="text" value="1" class="productNumberSetting">
</span>
<span class="arrow">
<a class="increaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/increase.png">
</span>
</a>
<span class="updownMiddle"> </span>
<a class="decreaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/decrease.png">
</span>
</a>
</span>
件</span>
<span>库存66件</span>
</div>
<div class="serviceCommitment">
<span class="serviceCommitmentDesc">服务承诺</span>
<span class="serviceCommitmentLink">
<a href="#nowhere">正品保证</a>
<a href="#nowhere">极速退款</a>
<a href="#nowhere">赠运费险</a>
<a href="#nowhere">七天无理由退换</a>
</span>
</div>
<div class="buyDiv">
<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
</div>
</div>
<div style="clear:both"></div>
</div>
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
div.imgAndInfo{
margin: 40px 20px;
}
div.imgInimgAndInfo{
width: 100px;
float: left;
}
div.infoInimgAndInfo{
padding: 0px 20px;
overflow: hidden;
}
div.infoInimgAndInfo div.productTitle{
color: black;
font-size: 16px;
font-weight: bold;
margin: 0px 10px;
}
div.infoInimgAndInfo div.productSubTitle{
color: #DD2727;
font-size: 12px;
margin: 0px 10px;
}
div.infoInimgAndInfo div.juhuasuan{
background-color: #2DA77A;
color: white;
text-align: center;
line-height: 40px;
margin-top: 10px;
}
div.infoInimgAndInfo span.juhuasuanBig{
font-size: 18px;
font-weight: bold;
font-family: 黑体;
}
div.infoInimgAndInfo span.juhuasuanTime{
color: #FFC057;
font-weight: bold;
}
div.infoInimgAndInfo div.productPriceDiv{
background-image:url(https://how2j.cn/tmall/img/site/priceBackground.png);
height: 102px;
padding: 10px;
color: #666666;
}
div.infoInimgAndInfo div.gouwujuanDiv{
margin-top: 5px;
}
div.infoInimgAndInfo div.originalDiv{
margin-top: 5px;
}
div.infoInimgAndInfo span.originalPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
}
div.infoInimgAndInfo span.originalPrice{
font-family: Arial;
font-size: 12px;
color: #333333;
text-decoration: line-through;
}
div.infoInimgAndInfo span.promotionPriceYuan{
font-family: Arial;
font-size: 18px;
color: #C40000;
}
div.infoInimgAndInfo span.promotionPrice{
color: #c40000;
font-family: Arial;
font-size: 30px;
font-weight: bold;
}
div.infoInimgAndInfo span.promotionPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
position: relative;
left: 0px;
top: -10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber{
margin: 20px 0px;
border-top-style: dotted;
border-top-color: #C9C9C9;
border-top-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #C9C9C9;
border-bottom-width: 1px;
padding: 10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div{
display: inline-block;
width: 49%;
text-align: center;
color: #999999;
font-size: 12px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E5DFDA;
}
div.infoInimgAndInfo div.productNumber{
color: #999999;
}
div.infoInimgAndInfo span.productNumberSettingSpan{
border: 1px solid #999;
display: inline-block;
width: 43px;
height: 32px;
padding-top:7px;
}
div.infoInimgAndInfo input.productNumberSetting{
border: 0px;
height: 80%;
width: 80%;
}
div.productNumber span.updown img{
display:inline-block;
vertical-align:top;
}
div.productNumber span.updown{
border: 1px solid #999;
display: block;
width: 20px;
height: 14px;
text-align: center;
padding-top:4px;
}
div.productNumber span.updownMiddle{
height: 4px;
display: block;
}
div.productNumber span.arrow{
display: inline-block;
width: 22px;
height: 32px;
vertical-align:top;
}
div.serviceCommitment{
margin: 20px 0px;
}
div.infoInimgAndInfo span.serviceCommitmentDesc{
color: #999999;
}
div.infoInimgAndInfo span.serviceCommitmentLink a{
color: #666666;
}
div.buyDiv{
margin: 20px auto;
text-align: center;
}
div.buyDiv button{
display: inline-block;
margin: 0px 10px;
width: 180px;
height: 40px;
}
button.buyButton{
border: 1px solid #C40000;
background-color: #FFEDED;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;
}
button.addCartButton{
border: 1px solid #C40000;
background-color: #C40000;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
font-family: arial;
}
button.addCartButton span.glyphicon{
font-size: 12px;
margin-right: 8px;
}
a:hover{
text-decoration:none;
}
.redColor{
color: #C40000;
}
.boldWord{
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="imgAndInfo">
<div class="imgInimgAndInfo">
<img width="100px" src="https://how2j.cn/tmall/img/productSingle/8619.jpg">
</div>
<div class="infoInimgAndInfo">
<div class="productTitle">
名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
</div>
<div class="productSubTitle">
高端定制 高档棉麻 现货即发 加购物车 领优惠卷
</div>
<div class="productPrice">
<div class="juhuasuan">
<span class="juhuasuanBig">聚划算</span>
<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<div class="productPriceDiv">
<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
<span> 全天猫实物商品通用</span>
</div>
<div class="originalDiv">
<span class="originalPriceDesc">价格</span>
<span class="originalPriceYuan">¥</span>
<span class="originalPrice">
399.00
</span>
</div>
<div class="promotionDiv">
<span class="promotionPriceDesc">促销价 </span>
<span class="promotionPriceYuan">¥</span>
<span class="promotionPrice">
379.05
</span>
</div>
</div>
</div>
<div class="productSaleAndReviewNumber">
<div>销量 <span class="redColor boldWord"> 50</span></div>
<div>累计评价 <span class="redColor boldWord"> 19</span></div>
</div>
<div class="productNumber">
<span>数量</span>
<span>
<span class="productNumberSettingSpan">
<input type="text" value="1" class="productNumberSetting">
</span>
<span class="arrow">
<a class="increaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/increase.png">
</span>
</a>
<span class="updownMiddle"> </span>
<a class="decreaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/decrease.png">
</span>
</a>
</span>
件</span>
<span>库存66件</span>
</div>
<div class="serviceCommitment">
<span class="serviceCommitmentDesc">服务承诺</span>
<span class="serviceCommitmentLink">
<a href="#nowhere">正品保证</a>
<a href="#nowhere">极速退款</a>
<a href="#nowhere">赠运费险</a>
<a href="#nowhere">七天无理由退换</a>
</span>
</div>
<div class="buyDiv">
<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
</div>
</div>
<div style="clear:both"></div>
</div>
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
div.imgAndInfo{
margin: 40px 20px;
}
div.imgInimgAndInfo{
width: 100px;
float: left;
}
div.infoInimgAndInfo{
padding: 0px 20px;
overflow: hidden;
}
div.infoInimgAndInfo div.productTitle{
color: black;
font-size: 16px;
font-weight: bold;
margin: 0px 10px;
}
div.infoInimgAndInfo div.productSubTitle{
color: #DD2727;
font-size: 12px;
margin: 0px 10px;
}
div.infoInimgAndInfo div.juhuasuan{
background-color: #2DA77A;
color: white;
text-align: center;
line-height: 40px;
margin-top: 10px;
}
div.infoInimgAndInfo span.juhuasuanBig{
font-size: 18px;
font-weight: bold;
font-family: 黑体;
}
div.infoInimgAndInfo span.juhuasuanTime{
color: #FFC057;
font-weight: bold;
}
div.infoInimgAndInfo div.productPriceDiv{
background-image:url(https://how2j.cn/tmall/img/site/priceBackground.png);
height: 102px;
padding: 10px;
color: #666666;
}
div.infoInimgAndInfo div.gouwujuanDiv{
margin-top: 5px;
}
div.infoInimgAndInfo div.originalDiv{
margin-top: 5px;
}
div.infoInimgAndInfo span.originalPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
}
div.infoInimgAndInfo span.originalPrice{
font-family: Arial;
font-size: 12px;
color: #333333;
text-decoration: line-through;
}
div.infoInimgAndInfo span.promotionPriceYuan{
font-family: Arial;
font-size: 18px;
color: #C40000;
}
div.infoInimgAndInfo span.promotionPrice{
color: #c40000;
font-family: Arial;
font-size: 30px;
font-weight: bold;
}
div.infoInimgAndInfo span.promotionPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
position: relative;
left: 0px;
top: -10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber{
margin: 20px 0px;
border-top-style: dotted;
border-top-color: #C9C9C9;
border-top-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #C9C9C9;
border-bottom-width: 1px;
padding: 10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div{
display: inline-block;
width: 49%;
text-align: center;
color: #999999;
font-size: 12px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E5DFDA;
}
div.infoInimgAndInfo div.productNumber{
color: #999999;
}
div.infoInimgAndInfo span.productNumberSettingSpan{
border: 1px solid #999;
display: inline-block;
width: 43px;
height: 32px;
padding-top:7px;
}
div.infoInimgAndInfo input.productNumberSetting{
border: 0px;
height: 80%;
width: 80%;
}
div.productNumber span.updown img{
display:inline-block;
vertical-align:top;
}
div.productNumber span.updown{
border: 1px solid #999;
display: block;
width: 20px;
height: 14px;
text-align: center;
padding-top:4px;
}
div.productNumber span.updownMiddle{
height: 4px;
display: block;
}
div.productNumber span.arrow{
display: inline-block;
width: 22px;
height: 32px;
vertical-align:top;
}
div.serviceCommitment{
margin: 20px 0px;
}
div.infoInimgAndInfo span.serviceCommitmentDesc{
color: #999999;
}
div.infoInimgAndInfo span.serviceCommitmentLink a{
color: #666666;
}
div.buyDiv{
margin: 20px auto;
text-align: center;
}
div.buyDiv button{
display: inline-block;
margin: 0px 10px;
width: 180px;
height: 40px;
}
button.buyButton{
border: 1px solid #C40000;
background-color: #FFEDED;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;
}
button.addCartButton{
border: 1px solid #C40000;
background-color: #C40000;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
font-family: arial;
}
button.addCartButton span.glyphicon{
font-size: 12px;
margin-right: 8px;
}
a:hover{
text-decoration:none;
}
.redColor{
color: #C40000;
}
.boldWord{
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="imgAndInfo">
<div class="imgInimgAndInfo">
<img width="100px" src="https://how2j.cn/tmall/img/productSingle/8619.jpg">
</div>
<div class="infoInimgAndInfo">
<div class="productTitle">
名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
</div>
<div class="productSubTitle">
高端定制 高档棉麻 现货即发 加购物车 领优惠卷
</div>
<div class="productPrice">
<div class="juhuasuan">
<span class="juhuasuanBig">聚划算</span>
<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<div class="productPriceDiv">
<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
<span> 全天猫实物商品通用</span>
</div>
<div class="originalDiv">
<span class="originalPriceDesc">价格</span>
<span class="originalPriceYuan">¥</span>
<span class="originalPrice">
399.00
</span>
</div>
<div class="promotionDiv">
<span class="promotionPriceDesc">促销价 </span>
<span class="promotionPriceYuan">¥</span>
<span class="promotionPrice">
379.05
</span>
</div>
</div>
</div>
<div class="productSaleAndReviewNumber">
<div>销量 <span class="redColor boldWord"> 50</span></div>
<div>累计评价 <span class="redColor boldWord"> 19</span></div>
</div>
<div class="productNumber">
<span>数量</span>
<span>
<span class="productNumberSettingSpan">
<input type="text" value="1" class="productNumberSetting">
</span>
<span class="arrow">
<a class="increaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/increase.png">
</span>
</a>
<span class="updownMiddle"> </span>
<a class="decreaseNumber" href="#nowhere">
<span class="updown">
<img src="https://how2j.cn/tmall/img/site/decrease.png">
</span>
</a>
</span>
件</span>
<span>库存66件</span>
</div>
<div class="serviceCommitment">
<span class="serviceCommitmentDesc">服务承诺</span>
<span class="serviceCommitmentLink">
<a href="#nowhere">正品保证</a>
<a href="#nowhere">极速退款</a>
<a href="#nowhere">赠运费险</a>
<a href="#nowhere">七天无理由退换</a>
</span>
</div>
<div class="buyDiv">
<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
</div>
</div>
<div style="clear:both"></div>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-10-07
样式讲解没有了
2020-04-05
我发现动态演示的时候写反了
2019-11-24
站长这代码结构太乱，希望能加上合理的注释和结构的排版
2019-05-07
听上去站长在给学生讲课，还招学生吗 站长
2019-04-07
这里的overflow:hidden不理解
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 15 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
