产品详细信息区域为整个大盒子命名为: 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;
}