【京东商城首页实战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下面的这个大盒子，就差一个热词列表，下篇再做。谢谢！