二、6-1小兔鲜确认订单移动端页面-flex-总结

最新推荐文章于 2024-05-29 15:35:36 发布

一束光亮

最新推荐文章于 2024-05-29 15:35:36 发布

阅读量443

点赞数

分类专栏：前端第一阶段：html5css3，移动端、网页布局文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_52766105/article/details/127579532

版权

前端第一阶段：html5css3，移动端、网页布局专栏收录该内容

26 篇文章 0 订阅

订阅专栏

小兔鲜确认订单移动端页面-flex-总结

文章目录

小兔鲜确认订单移动端页面-flex-总结

1.公共样式，样式相同的直接引用样式就行

 <div class="price">
                <span class="red">¥<i>266</i></span>
                <span>¥299</span>

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

2.百分比布局

 width: 100%;
  height: 80px;

3.剩余部分user占一份这样写，内容可以充满剩余部分

.user-msg  .user{
  flex: 1;
}

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>
<body>
    <!-- 主题内容 -->
    <div class="main">
        <div class="user-msg pannel">
             <div class="location">
                <i class="iconfont icon-location"></i>
             </div>
             <div class="user">
                <div class="top">
                    <h5>林丽 </h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">
                    <p>北京市  海淀区  中关村软件园   信息科技大厦1号
                        楼410#   </p>
                </div>
             </div>
             <div class="more">
                <i class="iconfont icon-more"></i>
             </div>
        </div>
       <div class="goods pannel">
        <div class="pic">
            <a href="#"><img src="./uploads/pic.png" alt=""></a>
        </div>
        <div class="info">
            <h5>康尔贝 非接触式红外体温仪 <br>
                领券立减30元 婴儿级材质 测温…</h5>
            <p><span>粉色</span><span> 红外体温计</span></p>
            <div class="price">
                <span class="red">¥<i>266</i></span>
                <span>¥299</span>
            </div>
        </div>
        <div class="count">
            <i class="iconfont icon-x"></i>
             <p>1</p>
           
        </div>
       </div>
       <div class="section pannel">
          <div>
            <h5>配送方式</h5>
          <p>顺丰快递</p></div>
          <div><h5>配送方式</h5>
            <p>希望可以尽快发货，谢谢~</p></div>
          <div><h5>配送方式</h5>
            <p>支付宝 <i class="iconfont icon-more"></i></p></div>
           
       </div>
    </div>

    <!-- 底部支付 -->
    <div class="pay">
        <div class="left">
         合计：<span class="red">￥<i>266.00</i></span>
        </div>
        <div class="right">
            <a href="">去支付</a>
        </div>
    </div>
</body>
</html>

body{
    background-color: #f7f7f8;
   
}
/*1. 公共样式 */
.red{
    color: #cf4444;
}
.pannel{
    background-color: #ffffff;
	border-radius: 5px;
}
.main{
    padding: 11px 11px 80px;
}
.pay{
    position: fixed;
    left: 0;
    bottom: 0;
    /*2. 百分比布局 */
    width: 100%;
    height: 80px;
    display: flex;
   justify-content:space-between;
    align-items: center;
    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}
.pay .left{
    font-size: 12px;
}

.pay .left i{
    font-size: 20px;
}
.pay .right{
    display: block;
    width: 91px;
	height: 35px;
	background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
	border-radius: 3px;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    line-height: 35px;
}
.user-msg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 14px 11px;
    height: 85px;
    
}
.user-msg .location{

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

}
/* 3.剩余部分user占一份这样写，内容可以充满剩余部分 */
.user-msg  .user{
    flex: 1;
}
.user-msg  .user .top{
    
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 13px;
    color: #262626;
}
.user-msg  .user .top h5{
 width: 50px;
 font-size: 15px;
}
.user-msg .more{
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
}
.user-msg .user .bottom p{
    font-size: 12px;
    line-height: 18px;
    color: #333333;
}
.goods {
    display: flex;
    justify-content: space-between;
    height: 107px;
    margin-top: 9px;
    margin-bottom: 6px;
    padding: 11px 0 11px 11px;

}
.goods .pic{
   width: 85px;
   height: 85px;
  margin-right: 12px;
}
.goods .info{
   flex: 1;

}
.goods .info h5{
    font-size: 13px;
    color: #262626;
    margin-bottom: 3px;
 
}
.goods .info p{
    font-size: 11px;
    color: #888888;
    margin-bottom:2px;
}


.goods .info .price span:nth-child(1){
   font-size: 9px; 
   font-weight: normal;
   margin-right: 6px;
}
.goods .info .price span:nth-child(1) i{
    font-size: 16px;
}
.goods .info .price span:last-child{
    font-size: 9px;
    color: #999999;
}
.goods .count{
    display: flex;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
}
.section{
   
    height: 125px;
	background-color: #ffffff;
	border-radius: 5px;
    padding: 13px;
}
.section div{
    display: flex;
    align-items: center;
}
.section div h5,
.section div p{
    
    font-size: 13px;
   
	font-weight: normal;
    color: #262626;
}
.section div:nth-child(2n+1){
  
   justify-content: space-between;
   
}

.section div:nth-child(2n){
    margin: 10px 0;
   
}
.section div:nth-child(2n) p{
    margin-left: 19px;
    font-size: 12px;
	font-weight: normal;
    color: #989898;
}