手机端购物支付界面的设计

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

手机端购物支付界面的设计
长这样

前言

这是我跟着黑马程序员的项目做的，里面有一些自己的心得体验

一、用到了什么？

HTML5、CSS(包括Flex)

二、代码

1.HTML部分

代码如下：

## 2.CSS样式

body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red{
    color: #cf4444;
}
/* 公共样式 */

/* 主体内容 */
.main{
    /* 设置下内边距或者下外边距80px的原因是为了当我们进入
    翻到最底下的时候，底下的内容不被固定定位导致脱标的pay内容遮住
    */
    padding: 12px 11px 80px;
}

.panel{
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

/* 用户信息 */
.main .user_msg{
    display: flex;
    align-items: center;
    padding: 15px 0 14px 11px;
}

.main .location{
    width: 30px;
    height: 30px;
    background-image: linear-gradient(90deg, 
    #6fc2aa 5%, 
    #54b196 100%);
    border-radius: 50%;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.main .user_msg .user{
    flex: 1;
    /* 
    flex：整数 ，表示占用父级剩余尺寸的份数
    */
}

.main .user_msg .user .top{
    display: flex;
    font-size: 15px;
    line-height: 15px;
}

.main .user_msg .user .top h5{
    width: 55px;
}

.main .user_msg .user .buttom{
    margin-top: 5px;
    font-size: 12px;
}

.main .more{
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    /* background-color: pink; */
    color: #808080;
}

/* 商品 */
.goods{
    display: flex;
    align-items: center;
    padding: 11px 0 11px 11px;
}

.goods .pic{
    width: 85px;
    height: 85px;
    margin-right: 10px;
}

.goods .info{
    flex: 1;
}

.goods .info h5{
    font-size: 13px;
    color: #262626;
    /* 控制不加粗 */
    font-weight: 400;
}

.goods .info p{
    width: 98px;
    height: 20px;
    margin: 5px 0;
    background-color: #f7f7f8;
    font-size: 12px;
}

.goods .info p span:first-child{
    margin-right: 5px; 
}

.goods .info .price{
    font-size: 12px;
}

.goods .info .price i{
    font-size: 16px;
}

.goods .info .price span:last-child{
    margin-left: 5px;
    color: #999;
    text-decoration: line-through;
}

.goods .count{
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
}

/* 其它信息 */
.rest{
    padding: 15px ;
}

.rest div{
    display: flex;
    margin-bottom: 30px;
}

.rest div:last-child{
    margin-bottom: 0;
}

/* 找到第一个和第三个div，设置主轴对齐方式 */
.rest div:nth-child(2n+1){
    justify-content: space-between;
}

.rest div:nth-child(2) h5{
    margin-right: 20px;
}

.rest h5,
.rest p
{
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}

.rest div:nth-child(2) p{
    font-size: 12px;
    color:#989898
}

.rest div:nth-child(3) p{
    line-height: 13px;
}

/* 快递信息 */
.kuaidi{
    padding:15px;
}
.kuaidi div{
    display: flex;
    margin-bottom: 30px;
}

.kuaidi div:last-child{
    margin-bottom: 0;
}

.kuaidi div{
    justify-content: space-between;
    color: #262626;
    font-size: 13px;
}
/* 主体内容 */

/* 底部支付 */
.pay{
    /* 底部支付需要固定定位 */
    position: fixed;
    /* 正常而言，定位一般使用子绝父相，但是
    固定定位是不需要设置父元素定位的 */
    left: 0;
    bottom: 0;
    /* 正常而言，不设置宽度的话就会和父元素的宽度一样
    但是固定定位脱标了，它的宽度就会由内容撑开
    所以需要设置100%的宽度来保证它和父元素的宽度一致
    */
    display: flex;
    /* 主轴对齐 */
    justify-content: space-between;
    /* 侧轴对齐 */
    align-items: center;
    padding: 0 12px;
    width: 100%;
    height: 80px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}   

.pay .left {
    font-size: 12px;
    /* 因为浏览器的最小字号就是12px */
}

.pay .left span{
    font-size: 20px;
}

.pay .right{
    display: block;
    width: 90px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);      
    color: #fff;
}
/* 底部支付 */