首页的效果:
购物车的效果:
我的效果:
侧拉的效果:
------------------------------------------------------------------------------------------------
代码:
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></