购物车（侧拉 、购物 、个人中心）

首页的效果：

购物车的效果：

我的效果：

侧拉的效果：

------------------------------------------------------------------------------------------------

代码：

1、创建购物车的包

在购物车的包里创建css包在css里面创建main.css文件是给图片文字调动距离的或他们的边距。

.home .picture {
    float: left;
}

.home .details h3 {
    margin-top: 16px;
}

.home .details div {
    margin-top: 48px;
}

.home .details span {
    color: red;
    font-size: large;
}

.home .details .ion-ios-cart {
    position: absolute;
    right: 16px;
}

.cart .picture {
    float: left;
}

.cart .details h3 {
    margin-top: 16px;
    color: red;
    font-size: large;
}

.cart .details div {
    margin-top: 16px;
}

.cart .details div .ion-android-delete {
    position: absolute;
    right: 16px;
}

.cart .item {
    border-width: 0;
}

.cart hr {
    border: 1px dotted #999;
    margin-left: 12px;
    margin-right: 12px;
}

.mine .avatar {
    width: 100%;
    height: 160px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;
}

.mine .avatar img {
    border-radius: 50%;
    margin-top: 30px;
}

------------------------------------------------------------------------------------------------

在购物车的包里创建img文件把图片放进去

------------------------------------------------------------------------------------------------

在购物车的包里创建lib依赖包

------------------------------------------------------------------------------------------------

在购物车的包里创建views的文件

1、views文件包里面创建cart文件

<ion-view title="购物车" class="cart">
    <ion-content>
        <ion-list>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{
 { 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{
 { 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item></