<div class="fancy">
<h2>
<span class="ribbon-center">50% OFF!</span>
</h2>
<p>
<img src="/uploads/160501/glass.jpg">
Check out these killer deals from Oakley!
Get an additional 50% off sale items for a limited time.
</p>
</div>
接下来给卡片和商品描述添加样式，来限定高宽和间距：
[css] view plain copy
.fancy {
width: 340px
margin: 20px auto 20px auto
background: #E7E7E7
padding: 15px
}
.fancy p {
padding-top: 10px
margin: 5px 0
line-height: 1.5
}
.fancy img {
width: 340px
}
blob.png
现在页面看起来像上面这样，接下来就是要给标签（h2元素）添加样式，一个是背景色，一个是左边的3D折纸效果。
折边效果其实就是给h2的左下角拼接一个三角形的元素，我们使用伪元素来实现，代码如下：
[css] view plain copy
.fancy h2 {
font-style: italyc
line-height: 1
padding: 5px 0
color: #FFF
margin: 0
width: 205px
left: -35px// 相对卡片向左偏移35px
background-color: #e54439
position: relative
z-index: 6
}
.fancy h2:after {// 定义一个斜三角形
content: ""
width: 0
height: 0
position: absolute
font-size: 0
line-height: 0
z-index: 5
border-top: 0 solid transparent
border-bottom: 15px solid transparent
bottom: -15px
}
.fancy h2:after {
border-right: 20px solid rgb(230, 107, 97)
left: 0
}
.fancy h2 .ribbon-center {
display: block
padding: 10px 0
background-color: #e54439
}
根据这张图片看总体是左右分布，那么先得写个左右板块，但板块最好都不要设置高，因为并不知道到底有多少商品。然后左边可以用<ul><li>,右边上面是热门品牌，下面是手机通讯，所以可以考虑再分个上下板块，也不要设置高，也可以用<ul></li>。大体就这样。块元素的之间的间距使用margin属性设置。
CSS margin 属性
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
例子 1
margin:10px 5px 15px 20px/*
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
*/例子 2margin:10px 5px 15px
/*上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/
例子 3
margin:10px 5px/*
上外边距和下外边距是 10px
右外边距和左外边距是 5px
*/
例子 4
margin:10px/*所有 4 个外边距都是 10px*/
可能的值
