SOURCE

<!-- cart购物车 -->
<div class="cartDiv">
    <!--pull-right是bootstrap的属性，
        相当于float:right -->
    <!-- title标题 -->
    <div class="cartTitle pull-right">
        <span>已选商品  (不含运费)</span>
        <span class="cartTitlePrice">￥0.00</span>
        <!-- createOrder:创建订单 -->
        <button class="createOrderButton" 
        style="background-color: rgb(170, 170, 170);" 
        disabled="disabled">结 算</button>
    </div>
    <!-- 这段文字的定位是偏左的，一旦屏幕页面宽度变得很小，
    文字飘向右边，且左边的文字不会超过标题的最左边 -->
    <div style="text-align:center;color:gray;line-height:100px">
        订单项内容，在下个知识点讲解
    </div>
    <div class="cartFoot">
        <img class="selectAllItem" selectit="false"
        src="http://how2j.cn/tmall/img/site/cartNotSelected.png">
        <span>全选</span>
<!--    <a href="#">删除</a> -->
        <div class="pull-right">
            <span>已选商品<span class="cartSumNumber">0</span>件</span>
            <span>合计(不含运费)</span>
            <span class="cartSumPrice">￥0.00</span>
            <button class="createOrderButton" 
            style="background-color: rgb(170, 170, 170);" 
            disabled="disabled">结 算</button>
        </div>
    </div>
</div>

/* 整个body */
body{
    font-size: 12px;
    /* 把所有文字的大小调成12px,这是天猫默认的文字大小 */
    font-family: Arial;
    /* 字库使用Arial */
}

/* 整个购物车div */
div.cartDiv{
    max-width: 1013px;
    /* 拉伸页面宽度可以看见 */
    /* 最大宽度1013，有时候用户的分辨率很高，比如1600x1200,
    使用1013可以使购物车这一块仅仅显示在中间，
    而不是平铺满整个屏幕，那样不好看 */
    margin: 10px auto;/* 本元素居中显示 */
    color: black;/* 字体颜色: black */
}

/* 上面的结算按钮 */
div.cartTitle button {
    /* border-color:transparent也可以 */
    border: 1px solid #AAAAAA;
    /* 边框和背景色一个颜色 */
    background-color: #AAAAAA;
    /* 背景色: #AAAAAA */
    color: white;/* 字体颜色: white */
    width: 53px;/* 宽度: 53px */
    height: 25px;/* 高度: 25px */
    border-radius: 2px;/* 圆角 */
    /* 圆角效果不明显 */
}

/* 上面的价格信息 */
span.cartTitlePrice{
    color: #C40000;/* 字体颜色: #C40000 */
    font-size: 14px;/* 字体大小: 14px */
    font-weight: bold;/* 粗体 */
    /* 用margin比padding好，特意留点空白 */
    margin-left: 5px;/* 左外边距: 5px */
    margin-right: 3px;/* 右边距3px */
}

/* 购物车的页脚 */
div.cartFoot{
    /* 背景色加高度（居中）+内边距+颜色 */
    background-color: #E5E5E5;
    /* 背景色: #E5E5E5 */
    line-height: 50px;
    /* 文本垂直居中 */
    margin: 20px 0px;
    /* 上下外边距20px */
    color: black;
    /* 字体颜色: black */
    padding-left: 20px;
    /* 左内边距: 20px */
}

/* 下面的结算按钮 */
div.cartFoot button{
    background-color: #AAAAAA;
    /* 背景色: #AAAAAA */
    border: 0px solid #AAAAAA;
    /* 去掉边框 */
    color: white;
    /* 字体颜色: white */
    width: 120px;
    /* 宽度: 120px */
    height: 50px;
    /* 高度: 50px */
    font-size: 20px;
    /* 字体大小: 20px */
    text-align: center;
    /* 文本水平居中 */
}

/* 选择框是一个图片，当鼠标放上去呈现点击状 */
img.cartProductItemIfSelected, img.selectAllItem{
    cursor: pointer;
    /* 鼠标呈现点击状 */
}

/* 商品合计数量 */
span.cartSumNumber{
    color: #C40000;
    /* 字体颜色: #C40000 */
    font-weight: bold;
    /* 粗体 */
    font-size: 16px;
    /* 字体大小: 16px */
}

/* 下面的价格 */
span.cartSumPrice{
    color: #C40000;
    /* 字体颜色: #C40000 */
    font-weight: bold;
    /* 粗体 */
    font-size: 20px;
    /* 字体大小: 20px */
}