【京东商城首页实战7】制作购物车

今天开始做右边的购物车。

要点分析：
1.构架：一个盒子里面有一个a标签和3个小元件，可用span标签里做。
2.小车图标，可以作为背景图片，通过定位在大盒子的左padding部分显示出来。
3.带数字的红色圆角图形，可以先做一个小正方形，利用boder-raduis做圆角。如果是小于宽高小于12px的微型盒子，ie6不兼容，要加上_font-size：0；。
4.箭头图标可以利用定位做，也可以margin或padding挤开间距，这里用定位做。
附上购物车精灵图：

HTML代码：

<div class="shoppingcar">
    <a href="#">俺的购物车</a>
    <span class="icon1"></span>
    <span class="icon2">></span>
    <span class="icon3">8</span>
</div> → 效果1

效果1

这只有了一个框架，下面就开始一步一步丰富购物车的样式。

CSS代码：

.shoppingcar{
    width: 96px;
    padding-left: 43px;
    float: right;
    margin: 25px 65px 0 0;
    /*上右下左*/
    border: 1px solid #DFDFDF;
    line-height: 34px;
    /*行高等于盒子高，文本垂直居中*/
    position: relative;
    /*后面三个元素需要绝对定位，父亲盒子要相对定位*/
}  → 效果2
.shoppingcar .icon1{
    position: absolute;
    width: 16px;
    height: 13px;
    /*设置盒子的宽高*/
    background: url(../images/sprite.png) no-repeat -1px -59px; → 效果3
    /*利用精灵图插入图片。精灵图的坐标以左上角为原点，所以一般为负值。*/
    top: 10px;
    left: 20px;
} → 效果4
.shoppingcar .icon2{
    font: 400 13px/13px simsun;
    /*加粗、字号、行高、字体*/
    position: absolute;
    top: 10px;
    right: 10px;
} → 效果5
.shoppingcar .icon3{
    position: absolute;
    width: 16px;
    height: 14px;
    background-color: #C81623;
    font-size: 12px;
    line-height: 14px;
    text-align: center; → 效果6
    color: #fff; 
    top: -4px;     → 效果7
    /*负值是往上移*/
    border-radius: 7px 7px 7px 0;  → 效果8
    /*给左上角、右上角、和右下角，圆角7px。*/
}

效果2：

效果3：

效果4：

效果5：

效果6：

效果7：

效果8：

好了，购物车就到这里了，topbanner下面的这个大盒子，就差一个热词列表，下篇再做。谢谢！