<!-- 上一节是产品图片，这一节是基本信息，class仍然是imgAndInfo -->
<div class="imgAndInfo">
<!-- class是imgInimgAndInfo,这是上一节的内容 -->
<div class="imgInImgAndInfo">
<img width="100px" src="http://how2j.cn/tmall/img/productSingle/8619.jpg">
</div>
<!-- 这节内容,基本信息infoInImgAndInfo -->
<div class="infoInImgAndInfo">
<!-- 1.产品介绍，productTitle产品标题-->
<div class="productTitle">名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女</div>
<!-- 2.产品介绍，productSubTitle产品副标题 -->
<div class="productSubTitle"> 高端定制 高档棉麻 现货即发 加购物车 领优惠卷</div>
<!-- 3.大div，里面有几层，介绍价格-->
<div class="productPrice">
<!-- 3(1)聚划算第一行 -->
<!-- class直接用拼音，聚划算juhuasuan -->
<div class="juhuasuan">
<!-- div设置宽高，颜色，用span因为文字都是同一行，且用2个span来编写易于设置样式 -->
<!-- 聚划算文字，要加粗放大 juhuasuanBig 聚划算放大-->
<span class="juhuasuanBig">聚划算</span>
<!-- 时间的class为聚划算时间,juhuasuanTime -->
<span >此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<!-- 3(2)购物劵，价格，促销价 -->
<!-- class用产品价格div,productPriceDiv -->
<div class="productPriceDiv">
<!-- 3(2)(1)天猫购物劵(图片)+文字(span)(两个独占一行，用div) -->
<!-- class用购物劵div,gouwujuanDiv -->
<div class="gouwujuanDiv">
<!-- 图片没class，设置高，宽度也会成比例的 -->
<img height="16px" src="http://how2j.cn/tmall/img/site/gouwujuan.png">
<!-- span也没有class， -->
<span> 全天猫实物商品通用 </span>
</div>
<!-- 3(2)(2)价格，初始价 -->
<!-- div+3*span div.class=originalDiv,初始div-->
<div class="originalDiv">
<!-- Desc:description描述 -->
<span class="originalPriceDesc">价格</span>
<!-- Yuan:元，人民币标志 -->
<span class="originalPriceYuan"">￥</span>
<!-- price价格 -->
<span class="originalPrice">399.00</span>
</div>
<!-- 3(2)(3)促销价 -->
<!-- div+3*span div.class=promotionDiv,促销div -->
<div class="promotionDiv">
<!-- Desc:description描述 -->
<span class="promotionPriceDesc">促销价</span>
<!-- Yuan:元，人民币标志 -->
<span class="promotionPriceYuan"">￥</span>
<!-- price价格 -->
<span class="promotionPrice">379.05</span>
</div>
</div>
</div>
<!-- 4.产品销量(sale)和评价(review)数目(number) -->
<!-- 大div+2*小div（外面虚线边框，要设置宽高）+2*span(文字要居中)， -->
<!-- class：product销量和评价 productSaleAndReviewNumber -->
<div class="productSaleAndReviewNumber"">
<!-- div+span(设置数字样式))(左右各一半)，div在外面，不用class也可以设置样式 -->
<!-- 怎么设置居中？？？ -->
<div>
<!-- redColor红颜色 boldWord粗体词汇 -->
销量<span class="redColor boldWord">50</span>
</div>
<div>
<!-- redColor红颜色 boldWord粗体词汇 -->
累计评价<span class="redColor boldWord">19</span>
</div>
</div>
<!-- 5.产品数量，库存(有些复杂)) -->
<!-- div+小span，都是一行，所以不需要换行（没div） -->
<div class="productNumber">
<!-- 5(1)全是span(都是一行) -->
<span>数量</span>
<!-- 5(2)span内有input加几个图 -->
<span>
<!-- 5(2)(1)span(父span)+span(子span)+input -->
<!-- class是产品数量设置span productNumberSettingSpan -->
<span class="productNumberSettingSpan">
<!-- 在点击（focus）input时，会出现蓝框 -->
<!-- class是产品数量设置 productNumberSetting -->
<input class="productNumberSetting" type="text" value="1">
</span>
<!-- 5(2)(2)class为arrow （箭头）-->
<!-- 上升箭头+下降箭头 -->
<span class="arrow">
<!-- 5(2)(2)(1)可以点击的，一般是链接，或者输入框 -->
<!-- 上升increase数量Number -->
<!-- a内放置一个上升的图片，我以为是bootstrap图标 -->
<a class="increaseNumber" href="nowhere">
<!-- img外有span包裹 -->
<!-- 上下箭头用用一个class:updown -->
<span class="updown">
<img src="http://how2j.cn/tmall/img/site/increase.png">
<span>
</a>
<!-- 5(2)(2)(2)上下的中间（无内容，一片小空白） -->
<span class="updownMiddle""></span>
<!-- 5(2)(2)(3)下降 -->
<!-- 具体跟increase差不多 -->
<a class="decreaseNumber" href="nowhere">
<!-- class都是updown -->
<span class="updown">
<img src="http://how2j.cn/tmall/img/site/decrease.png">
</span>
</a>
</span>
</span>
</div>
<!-- 6.服务保证，承诺serviceCommitment，以下文字 -->
<!-- div+n*span（一行内，有链接） -->
<div class="serviceCommitment">
<!-- desc：description描述 -->
<span class="serviceCommitmentDesc">服务承诺</span>
<!-- 以下span+n*a(链接) -->
<!-- link:链接 -->
<span class="serviceCommitmentLink">
<a href="nowhere">正品保证</a>
<a href="nowhere">极速退款</a>
<a href="nowhere">赠运费险</a>
<a href="nowhere">七天无理由退换</a>
</span>
</div>
<!-- 7.购买按钮+加入购物车按钮 -->
<!-- class为buyDiv -->
<div class="buyDiv">
<!-- 用链接使得点击会变暗，有hover的效果 -->
<!-- 链接1：class为buyLink+按钮购买 -->
<a class="buyLink" href="nowhere">
<!-- 按钮1：class为buyButton -->
<button class="buyButton">立即购买</button>
</a>
<!-- add to cart加入购物车 -->
<!-- 链接2：class为addCartLink+按钮加入购物车-->
<a class="addCartLink" href="nowhere">
<!-- 按钮1：class为buyButton -->
<!-- 图标用bootstrap -->
<button class="addCartButton">
<span class="glyphicon glyphicon-shopping-cart"></span>
加入购物车
</button>
</a>
</div>
</div>
<!-- 习惯性的清除浮动 -->
<div style="clear:both"></div>
</div>
/* 清一色body */
body {font-size: 12px;font-family: Arial;}
/* 包括图片和基本信息的div */
div.imgAndInfo {margin:40px 20px;/*外边距，不贴边*/}
/* 图片div，这里为了强调右边的基本信息，左侧只放了一个图片。 */
/* 这里我改了 原本是imgInimgAndInfo*/
div.imgInImgAndInfo {
width: 100px;/*设置宽度，使其能被看清楚*/
float:left;/*浮动：左，右边也可以放下东西*/
}
/* 基本信息div infoInImgAndInfo */
div.infoInImgAndInfo {
/* float: left; */
/*float先后顺序，加float就排列好了，以图片右边线分割线，
左边是上面图片+下面一堆空白，右边是文字,占用剩余所有宽度*/
padding: 0px 20px;/*左右内边距*/
overflow: hidden;/*和float：left一样的效果*/
/* 隐藏溢出部分。 结合图片div的float:left,
就可以做到基本信息div和图片div水平摆放，
并且基本信息div自动占用剩下所有的宽度 */
}
/* 产品标题productTitle*/
div.infoInImgAndInfo div.productTitle {
color:black;/*加不加好像都行*/
font-size: 16px;/*文字稍微要大点*/
font-weight: bold;/*加粗*/
margin:0 10px;/*在一个div内，小div的10px上下外边距*/
}
/* 产品副标题（小标题）productSubTitle */
div.infoInImgAndInfo div.productSubTitle {
color:#DD2727;/*天猫红*/
font-size:12px;/*body已经设置font-size:12px，可以省略*/
margin: 0 10px;/*在一个div内，小div的10px上下外边距*/
}
/* 聚划算div juhuasuan(在productPrice中)*/
div.infoInImgAndInfo div.productPrice div.juhuasuan {
background-color: #2DA77A;
color: white;
text-align: center;/*文字居中*/
line-height: 40px;/*设置高度40px，并且还是垂直居中*/
margin-top: 10px;/*上外边距10px,拉开距离*/
}
/* 聚划算几个大字 juhuasuanBig */
div.infoInImgAndInfo div.productPrice div.juhuasuan span.juhuasuanBig {
font-size: 18px;
font-weight: bold;/*加粗*/
font-family: 黑体;/*可以忽略，本来就是黑体*/
}
/* 聚划算日期 juhuasuanTime */
div.infoInImgAndInfo div.productPrice div.juhuasuan span.juhuasuanTime {
color: #FFC057;
font-weight: bold;
}
/* 产品价格信息 productPriceDiv*/
div.infoInImgAndInfo div.productPrice div.productPriceDiv {
/*背景（png）,上半部分是聚划算*/
background-image:url(http://how2j.cn/tmall/img/site/priceBackground.png);
}
/* 购物劵div gouwujuanDiv */
div.infoInImgAndInfo div.productPrice div.productPriceDiv div.gouwujuanDiv {
margin-top:5px;/*设置距离*/
/* 设置后中间分隔 */
}
/* 原始价格所在div orginalDiv*/
div.infoInImgAndInfo div.productPrice div.productPriceDiv div.originalDiv{
margin-top: 5px;/*设置距离*/
}
/* 原始价格文字 originalPriceDesc */
div.infoInImgAndInfo div.originalDiv span.originalPriceDesc{
color:#999;
display: inline-block;/*显示为内联，既可以设置大小，又能够不换行*/
width: 68px;/*设置宽度*/
}
/* 原始价格-价格数字 orginalPrice */
div.infoInImgAndInfo div.originalDiv span.originalPrice {
font-family:Arial;/*body已经设置，可以忽略*/
font-size: 12px;/*body已经设置，可以忽略*/
color: #333333;
text-decoration: line-through;/*中划线*/
}
/* 促销价格 人民币标示 promotionlPriceYuan*/
div.infoInImgAndInfo div.promotionDiv span.promotionPriceYuan {
font-family: Arial;/*body已经设置，可以忽略*/
font-size: 18px;
color: #C40000;
}
/* 促销价格-价格数字 promotionPrice */
div.infoInImgAndInfo div.promotionDiv span.promotionPrice {
color: #c40000;
font-family: Arial;/*body已经设置，可以忽略*/
font-size: 30px;
font-weight: bold;
}
/* 促销价格文字 promotionPriceDesc */
div.infoInImgAndInfo div.promotionDiv span.promotionPriceDesc {
color: #999999;
display: inline-block;/*显示为内联，既可以设置大小，又能够不换行*/
width: 68px;/*设置宽度*/
/*本来价格与379底部齐平，现在要将文字上移，使用定位*/
/* relative 相对于div，div是promotionDiv */
position: relative;
left: 0px;
top: -10px;/*上移10px*/
}
/* 销量和累计评价共同的div productSaleAndReviewNumber*/
div.infoInImgAndInfo div.productSaleAndReviewNumber {
/*上下外边距各20px*/
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;
/* 内边距10px（这是一个div） */
padding: 10px;
}
/* 销量和累计评价分别的div */
div.infoInImgAndInfo div.productSaleAndReviewNumber div {
display: inline-block;/*显示为内联，既可以设置大小，又能够不换行*/
width: 49%;/*49%*2=98%，中间还有虚线*/
text-align: center;/*文字居中*/
color: #999999;
font-size: 12px;/*body已经设置，可以忽略*/
}
/* 销量所处的div */
div.infoInImgAndInfo div.productSaleAndReviewNumber div:first-child {
/* 有边框实线 */
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E5DFDA;
}
/* 产品数量和库存所在div productNumber */
div.infoInImgAndInfo div.productNumber{
color: #999999;
}
/* 输入数字的input所在的span productNumberSettingSpan */
div.infoInImgAndInfo div.productNumber span.productNumberSettingSpan {
border:1px solid #999;
display: inline-block;/*显示为内联，既可以设置大小，又能够不换行*/
width: 43px;
height: 32px;
padding-top: 7px; /*上内边距，把input顶下去*/
}
/* 输入数字的input productNumberSetting */
div.infoInImgAndInfo div.productNumber span.productNumberSettingSpan input.productNumberSetting {
border: 0px;/*无边框*/
height: 80%;/*相对于span*80%-7px(padding)*/
width: 80%;/*宽度: 80%*/
}
/* 上下箭头所使用的图片 ,这个我还没搞懂*/
div.infoInImgAndInfo div.productNumber span.arrow span.updown img {
display:inline-block;/*设置成内联块，可以调整其垂直向上对齐*/
vertical-align:top;
/* 确保垂直向上对齐，因为在不同的浏览器下，
img元素可能表现出不贴在上面的现象。 贴在上面之后，
再借助其所在span的内边距的padding-top就可以很方便的调整其位置 */
}
/* 上下箭头所在的两个span */
div.infoInImgAndInfo div.productNumber span.arrow span.updown {
border: 1px solid #999;/*边框*/
/* 在span内的箭头span以块状形式显示，即有2行，不算middle */
/* 以块状显示，自动换行 */
display: block;
width: 20px;
height: 14px;
/* 不加居中，箭头贴着左边框,span可以居中，img可以居中(这个不确定)， */
/* 左右居中 */
text-align: center;
/* vertical-align:top的原因，箭头都贴着上边框 */
/* 加上padding-top：4px,可以起到居中 */
/* 上下居中 */
padding-top:4px;
}
/* 上下箭头中间的span */
div.infoInImgAndInfo div.productNumber span.arrow span.updownMiddle {
/*不加display：block，不能设置宽高，因为span是内联元素*/
/* 变成一段空白 */
display: block;/* 以块状显示，自动换行 */
height: 4px;/* 高度: 4px */
}
/* 上下箭头图标所在的span的父span */
div.infoInImgAndInfo div.productNumber span.arrow {
/* 不换行，同一行 */
display: inline-block;/*显示为内联，既可以设置大小，又能够不换行*/
width: 22px;/* 宽度: 22px */
height: 32px;/* 高度: 32px */
/* 不加这个，箭头图标的span的最上边比输入框的最上边要高，不能水平对齐 */
/* 加上后，水平对齐了,贴着上面 */
/* 与上下箭头所使用的图片一样，都设置了vertic-align:top，
而且也是同一层级的元素，贴的上面都是同一上面 */
vertical-align:top;/* 垂直贴在上面 */
}
/* 服务承诺信息所在div serviceCommitment */
div.infoInImgAndInfo div.serviceCommitment{
margin: 20px 0px;/* 上下外边距20px */
}
/* 服务承诺四个字所在span serviceCommitmentDesc */
div.infoInImgAndInfo div.serviceCommitment span.serviceCommitmentDesc {
color: #999999;
}
/* 服务承诺右侧四个连接所在span serviceCommitmentLink 链接a */
div.infoInImgAndInfo div.serviceCommitment span.serviceCommitmentLink a {
color: #666666;
}
/* 立即购买和加入购物车所在div buyDiv */
div.infoInImgAndInfo div.buyDiv{
/* 块级元素居中（div等），margin: 0 auto; */
/* div居中不代表链接a+button在右边div中间， */
margin: 20px auto;/* div本身居中显示 */
/* 文字或span等内联元素居中 */
/* 一定要加下面那段，那么两个按钮都在中间，在右边div中线上的一左一右 */
text-align: center;/* 内容水平居中显示 */
}
/* 立即购买和加入购物车按钮 */
div.infoInImgAndInfo div.buyDiv button {
display: inline-block;/*显示为内联，既可以设置大小，又能够不换行*/
margin: 0px 10px;/*左右外边距10px*/
/* 可以设置宽高，因为display: inline-block */
width: 180px;
height: 40px;
}
/* 立即购买按钮 */
div.infoInImgAndInfo div.buyDiv a.buyLink button.buyButton {
border: 1px solid #C40000;/* 边框 */
background-color: #FFEDED;/* 背景色 */
/* 内容水平居中 */
text-align: center;
/* 上面button设置了height：40px,加上line-height居中 */
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;/*body已经设置，可以忽略*/
}
/* 加入购物车按钮 */
div.infoInImgAndInfo div.buyDiv a.addCartLink button.addCartButton {
/* 与购买按钮一样 */
border: 1px solid #C40000;/* 边框 */
background-color: #FFEDED;/* 背景色 */
/* 内容水平居中 */
text-align: center;
/* 上面button设置了height：40px,加上line-height居中 */
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;/*body已经设置，可以忽略*/
}
/* 加入购物车前的图标 */
div.infoInImgAndInfo div.buyDiv button.addCartButton span.glyphicon {
font-size: 12px;/*body已经设置，可以忽略*/
/* 加这个margin-right可以让图标与字体保持一定距离 */
margin-right: 8px;
/* 右外边距8px */
}
/* 超链鼠标悬停 */
/* 全部链接a */
a:hover{
text-decoration:none;
/* 超链鼠标悬停的时候,没有下划线 */
}
/* 销量和累计评价后的数字 */
.redColor{
color: #C40000;
/* 字体颜色: #C40000 */
}
/* 销量和累计评价后的数字 */
.boldWord{
font-weight: bold;
/* 粗体 */
}