產品詳細信息區域為整個大盒子命名為： iteminfo_wrap 1號盒子命名為:sku_name 2號盒子命名為:news 3號盒子命名為:summary
step1:3個盒子搭建框架，以及完成前兩個盒子的的內容和樣式
<div class="iteminfo_wrap fr">
<div class="sku_name">
Apple iPhone 6s（A1700）64G玫瑰金色 移動通信電信4G手機
</div>
<div class="news">
推薦選擇下方[移動優惠購],手機套餐齊搞定,不用換號,每月還有花費返
</div>
<div class="summary">
</div>
</div>
.iteminfo_wrap {
/*這個盒子不給高度*/
width: 718px;
}
.sku_name {
height: 30px;/*高度剩余法： 省去添加間距的麻煩*/
font-size: 16px;
font-weight: 700;
}
.news {
height: 32px;/*高度剩余法： 省去添加間距的麻煩*/
color: #e12228;
}
step2:分析summary盒子，有很多個dl(dl=dt+dd)構成，每個dl占據一行 (1)現在寫summary的第一個dl(summary_price)
<div class="summary">
<dl class="summary_price">
<dt>價 格</dt>
<dd>
<i class="price">￥5299.00 </i>
<a href="#">降價通知</a>
<div class="remark">累計評價612188</div>
</dd>
</dl>
</div>
.summary_price {
padding: 10px 0;
background-color: #fee9eb;
}
.summary dt,
.summary dd {
float: left;
/*1 父親summary_price(也就是.summary dl)沒有給高
孩子.summary dt和.summary dd浮動后 要為父親清除浮動帶來的影響*/
line-height: 36px;
/*下面的price將字號調成24px之后把盒子給撐大了，保證dt依然居中對齊要讓行高等於高。
但不知道行高具體多大，所以要在檢查元素里面看。注意： 行高不包括內外邊距和邊框*/
}
.summary dl {
overflow: hidden;/*2 清除浮動帶來的影響 這樣就不用在summary_price后面加clearfix*/
}
.summary dt {/*這樣可以保證所以的dt左邊全部對齊*/
width: 60px;
padding-left: 10px;
}
.price {
font-size: 24px;
color: #e12228;
}
.summary_price a {
color: #c81623;
}
.remark {
/*float: right;
“累計評價612188”在dd中，而dd盒子沒有給寬
就算添加浮動，“累計評價612188”也無法貼到dl的最右邊
所以利用定位比較好*/
position: absolute;/*定位是以帶有定位的父親為准
所以同時要為summar_price(dl有寬度718：繼承了父親的)添加相對定位*/
top: 20px;
right: 10px;
}
(2)寫summary里面的第二個dl(summary_promotion)這於summary_price是並列關系
<dl class="summary_promotion">
<dt>促銷</dt>
<dd><!--注意到換行的問題，這個dd需要給寬度-->
<em>加購價</em>
滿999.00另加20.00元，或滿1999.00另加30.00元，或滿2999.00另加40.00元，
即可在購物車換購熱銷商品 詳情 》
</dd>
</dl>
.summary_promotion {
padding-bottom: 10px;
background-color: #fee9eb;
}
.summary_promotion dd{
width: 450px;/*dd添加寬度之后里面文字就會自動換行*/
line-height: 36px;/*可以通過調整dd的行高來讓dt中的文字(促銷)和dd第一行對齊*/
}
.summary_promotion em {
display: inline-block;
width: 40px;
height: 22px;
background-color: #c81623;
text-align: center;
line-height: 22px;
color: #fff;
}
(3)summary部分的第3個dl(summary_stock)
<dl class="summary_stock">
<dt>配送至</dt>
<dd>
北京海淀區中關 <i>有貨</i>
<em>支持</em>
<em>99元免運費</em>
<em>|貨到付款</em>
<em>|211限時達</em>
<br>
由自營發貨，並提供售后服務。11:00前完成下單，預計今天（08月10日）送達
</dd>
</dl>
.summary_stock dt {
line-height: 30px;
}
.summary_stock dd {
line-height: 30px;
font-family: 'icomoon';
}
.summary_stock i {
padding-right: 26px;
}
.summary_stock em {
padding-right: 6px;
}
(4)summary部分的第4個dl(choose_color)
<dl class="choose_color">
<dt>選擇顏色</dt>
<dd>
<a href="javascript:;" class="current">玫瑰金</a>
<a href="javascript:;">金色</a>
<a href="javascript:;">白色</a>
<a href="javascript:;">土豪色</a>
</dd>
</dl>
.choose_color a {
display: inline-block;/*反正這些顏色選擇鏈接之間本來就有縫隙*/
width: 80px;
height: 41px;
background-color: #f7f7f7;
border: 1px solid #ededed;
text-align: center;
line-height: 41px;
}
.choose_color a.current {
/*注意：這里a與current是同級關系 中間沒有空格 不是a .current*/
border-color: #c81623;
}
(5)summary部分的第5個dl(choose_version)
<dl class="choose_version">
<dt>選擇版本</dt>
<dd>
<a href="javascript:;">公開版</a>
<a href="javascript:;" class="current">移動4G</a>
</dd>
</dl>
.choose_version {
margin: 10px 0;
}
.choose_version a {
display: inline-block;
height: 32px;
/*寬度不用給，用padding值*/
padding: 0 12px;
background-color: #f7f7f7;
border: 1px solid #ededed;
text-align: center;
line-height: 32px;
}
.choose_version a.current {
/*注意：這里a與current是同級關系 中間沒有空格 不是a .current*/
border-color: #c81623;
}
(6)summary部分的第6個dl(choose_type)
<dl class="choose_type">
<dt>購買方式</dt>
<dd>
<a href="javascript:;" class="current">官方標配</a>
<a href="javascript:;">移動優惠購</a>
<a href="javascript:;">電信優惠購</a>
</dd>
</dl>
在之前的內容上追加
.choose_version a,
.choose_type a {
display: inline-block;
height: 32px;
/*寬度不用給，用padding值*/
padding: 0 12px;
background-color: #f7f7f7;
border: 1px solid #ededed;
text-align: center;
line-height: 32px;
}
.choose_version a.current,
.choose_type a.current {
/*注意：這里a與current是同級關系 中間沒有空格 不是a .current*/
border-color: #c81623;
}
注意到choose_color\choose_version\choose_type這3個dl中都有當前類current且他們都有共同的父級summary,所以可以簡化代碼如下： 簡化之前：
.choose_color a.current {
/*注意：這里a與current是同級關系 中間沒有空格 不是a .current*/
border-color: #c81623;
}
.choose_version a.current,
.choose_type a.current {
/*注意：這里a與current是同級關系 中間沒有空格 不是a .current*/
border-color: #c81623;
}
簡化之后：
.summary a.current {/*summary里面名字叫做current的鏈接*/
/*注意：這里a與current是同級關系 中間沒有空格 不是a .current*/
border-color: #c81623;
}
考慮到summary部分后面幾個dl（容量、套裝）都與.choose_type、.choose_version基本相同這里省略。
(7)summary部分的最后一個部分choose_btns（用div盒子裝）。choose_btns左邊是一個choose_amount（購買數量統計模塊），右邊部分是一個addcar(加入購物車模塊)。 右邊部分addcar
<div class="choose_btns">
<div class="choose_amount">123</div>
<a href="#" class="addcar">加入購物車</a>
</div>
.choose_btns {
margin-top: 20px;
}
.choose_amount {
float: left;
width: 50px;/*寬高都是帶邊框測量的*/
height: 46px;
background-color: pink;
}
.addcar {
float: left;
width: 142px;
height: 46px;
background-color: #c81623;
text-align: center;
line-height: 46px;
font-size: 18px;
color: #fff;
font-weight: 700;
margin-left: 10px;
}
左邊部分
<div class="choose_btns">
<div class="choose_amount">
<input type="text" value="1">
<a href="javascript:;" class="add">+</a>
<a href="javascript:;" class="reduce">-</a>
</div>
<a href="#" class="addcar">加入購物車</a>
</div>
.choose_amount {
position: relative;
float: left;
width: 50px;/*寬高都是帶邊框測量的*/
height: 46px;
background-color: pink;
}
.choose_amount input {
width: 33px;
height: 44px;/*這里的寬高測量的時候不帶邊框*/
border: 1px solid #ccc;
text-align: center;
}
.add,
.reduce {
position: absolute;
width: 15px;
height: 22px;
border: 1px solid #ccc;
background-color: #f1f1f1;
text-align: center;
line-height: 22px;
}
.add {
top: 0;
right: 0;
}
.reduce {
bottom: 0;
right: 0;
/*禁止鼠標樣式*/
cursor: not-allowed; /*pointer 小手 move 移動*/
}
.addcar {
float: left;
width: 142px;
height: 46px;
background-color: #c81623;
text-align: center;
line-height: 46px;
font-size: 18px;
color: #fff;
font-weight: 700;
margin-left: 10px;
}