学习了视口和弹性盒子flex布局写的小案例

最新推荐文章于 2024-05-23 16:57:23 发布
最新推荐文章于 2024-05-23 16:57:23 发布
阅读量100 收藏
点赞数
文章标签： 学习 css less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64962776/article/details/124773919
版权 
<!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, maximum-scale=1.0, user-scalable=0">
    <title>填写订单</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 引入初始化css文件 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入自己的页面的css -->
    <link rel="stylesheet" href="./css/order.css">
</head>
<body>
    <!-- 主体内容 -->
    <main>
        <!-- 用户订单信息 -->
        <div class="order-msg panel">
            <!-- 地址 -->
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <!-- 用户信息 -->
            <div class="info">
                <p>林丽    <span>18500667882</span></p>
                <p>北京市  海淀区  中关村软件园   信息科技大厦1号楼410#</p>
            </div>
            <!-- 右边的小箭头 -->
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 商品信息模块 -->
        <div class="goods panel">
            <!-- 左边的 -->
            <div class="pic">
                <img src="./uploads/pic.png" alt="">
            </div>
            <!-- 中间的 -->
            <div class="info">
                <p>
                    康尔贝 非接触式红外体温仪
                    领券立减30元 婴儿级材质 测温…
                </p>
                <p>
                    粉色   红外体温计
                </p>
                <p>
                    <span>¥299</span>
                    <span>¥499</span>
                </p>
            </div>
            <!-- 右边的 -->
            <div class="count">
                <i class="iconfont icon-x"></i>1
            </div>
        </div>
        <!-- 配送模块 -->
        <div class="rest panel">
            <p>
                <span>配送方式</span>
                <span>顺丰快递</span>
            </p>
            <p>
                <span>买家备注</span>
                <span>希望可以尽快发货，谢谢~</span>
            </p>
            <p>
                <span>支付方式</span>
                <span>支付宝 <i class="iconfont icon-more"></i></span>
            </p>
        </div>
        <!-- 商品价格模块 -->
        <div class="amount panel">
            <p>
                <span>商品总价</span>
                <span>￥299.00</span>
            </p>
            <p>
                <span>运费</span>
                <span>￥0.00</span>
            </p>
            <p>
                <span>折扣</span>
                <span>-￥30.00</span>
            </p>
        </div>
    </main>
    <!-- 底部 -->
    <div class="pay-order">
        <div class="sun">合计：<span>￥</span><span>266.00</span></div>
        <div class="pay">
            <a href="">去支付</a>
        </div>
    </div>
</body>
</html>

body{
    background-color: #f7f7f7;
}

// 面板,相当于版心的东西
.panel{
    width: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    // 面板四周距离边框有10px所以需要调整一下
    padding: 10px;
    // 每个panel的距离都有10px 所以每个向下调整10px
    margin-bottom: 10px;
}
// 主体内容
main{
    // 主体盒子距离边框有10px,下面80px是定位为了防住内容被定位覆盖
    padding: 10px 10px  80px;
    // 用户订单信息
    .order-msg{
        // 设置盒子的高度
        height: 85px;
        // 设置成为弹性容器
        display: flex;
        // 让子盒子两边靠边对齐
        justify-content: space-between;
        // 设置子盒子全部居中
        align-items: center;
        .location{
            // 左边的
            // 设置宽高和其他的东西
            width: 30px;
	        height: 30px;
	        background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
            text-align: center;
            line-height: 30px;
            // 让盒子变成一个圆
            border-radius: 50%;
            // 更改字体图标颜色
            color: #ffffff;
        }
        .info{
            // 让盒子的宽度自适应
            flex: 1;
            margin: 0 0 0 10px;
            // background-color: red;
            p{
                &:first-child{
                    // 设置第一个p的字体大小和颜色
                    font-size: 15px;
                    color: #262626;
                    span{
                        // 设置电话的字体和颜色
                        font-size: 13px;
                        color: #333333;
                    }
                }
                &:last-child{
                    // 设置下面的字体和颜色
                    margin-top: 13px;
                    font-size: 12px;
                    line-height: 18px;
                    color: #333333;
                }
            }
        }
        .more{
            // 右边的
            // 设置宽高和颜色边框
            width: 44px;
	        height: 44px;
            // 取消掉右边箭头的边框和背景色
	        // background-color: #2ad1ff;
	        // border: solid 1px #3a9cff;
            text-align: center;
            line-height: 44px;
            // 更改字体图标颜色
            color: #808080;
        }
    }
    // 商品信息模块
    .goods{
        height: 107px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // 左边的
        .pic{
            width: 85px;
            height: 85px;
            border-radius: 2px;
            img{
                width: 100%;
            }
        }
        // 中间的自适应
        .info{
            flex: 1;
            padding: 0 10px;
            p{
                &:first-child{
                    font-size: 13px;
                    line-height: 19px;
                    color: #262626;
                }
                &:nth-child(2){
                    width: 95px;
                    height: 16px;
                    background-color: #f7f7f8;
                    border-radius: 2px;
                    font-size: 12px;
                    color: #888888;
                    text-align: center;
                    line-height: 16px;
                    margin: 11px 0;
                }
                &:last-child{
                    span{
                        font-size: 16px;
                        line-height: 21px;
                        color: #cf4444;
                        &:last-child{
                            text-decoration: line-through;
                            font-size: 9px;
                            font-weight: bold;
                            line-height: 21px;
                            color: #999999;
                        }
                    }
                }
            }
        }
        // 右边的
        .count{
            // text-align: center;
            line-height: 33px;
            width: 33px;
	        height: 33px;
            color: #333333;
        }
    }
    // 配送模块
    .rest{
        height: 125px;
        background-color: #ffffff;
        border-radius: 5px;
        p{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #262626;
            &:nth-child(2){
                margin: 25px 0;
                // 把第二个p单独设置从左对齐
                justify-content: flex-start;
                span{
                    &:nth-child(2){
                        margin-left: 19px;
                        font-size: 12px;
                        color: #989898;
                    }
                }
            }
        }
    }
    justify-content: space-evenly;
    // 商品价格模块
    .amount{
        p{
            font-size: 13px;
            color: #262626;
            display: flex;
            justify-content: space-between;
            &:nth-child(2){
                margin: 30px 0;
            }
            // 找到商品模块的最后一个p里面最后一个span
            &:last-child span:last-child{
                font-size: 13px;
                color: #cf4444;
            }
        }
    }
}

// 底部
.pay-order{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 79px;
	background-color: #ffffff;
    // 两边都向内挤10px
    padding: 0 10px;
    // 设置成为弹性容器
    display: flex;
    // 让子盒子两边对齐
    justify-content: space-between;
    // 让子盒子垂直居中
    align-items: center;
    .sun{
        font-size: 11px;
        color: #1e1e1e;
        span{
            &:first-child{
                color: #cf4444;
            }
            &:last-child{
                font-size: 20px;
                color: #cf4444;
            }
        }
    }
    .pay{
        width: 91px;
	    height: 35px;
	    background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
	    border-radius: 3px;
        text-align: center;
        line-height: 35px;

        a{
            color: #ffffff;
        }
    }
}

m0_64962776
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端小白移动端布局总结（含四大实战项目）及笔记
01-08
那么我们正式步入正题吧，为了方便大家查阅，我把页面效果，部分源代码，以及我整理的学习笔记，以文本和xmind的格式导出了，如有需要，可以私信。 1.移动端基础 浏览器现状 国内的UC和QQ等手机浏览器都是根据...
flex布局：携程网移动端首页案例
weixin_55701027的博客
12-21 911
html + css 前端flex布局基础案例
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1231
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
前端学习笔记之flex布局 3.26
qq_36450483的博客
03-26 271
前端学习笔记之flex布局
移动WEB开发之flex布局--携程网首页案例制作
薛定谔的猫
11-30 759
做法：1.打开PS缩放一半 2.量出需要的图标，在css中设置top和left负值 3.css中将缩放后的大小重新给就是background-size。起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是top。方案：我们采取单独制作移动页面方案。要设置为主轴为y轴,侧轴居中。背景渐变必须添加浏览器私有前缀。技术：布局采取flex布局。利用属性选择器更换背景图片。sales-bd模块制作。第一个a要取消下边框。
web容器如何自适应视口大小
12-10
在前端生涯上，经常会遇到需要容器自适应视口高度这种情况，本文将介绍我能想到的解决这个问题的方案。 基础知识 html元素的高度默认是auto（被内容自动撑开），宽度默认是100%（等于浏览器可视区域宽度），没有...
vw-layout：带有视口单元的移动网站布局
02-02
大众布局 带有视口单位的移动网站布局。 vw-layout是一个NPM软件包，可帮助您使用视口单位创建移动网站布局。 它依赖于 ， 和 。 另外，为了与更多的移动设备兼容，视口单元需要使用视口单元中的polyfill。 我们可以...
如何退出CAD布局的视口.pdf
05-19
精品资源 欢迎下载
javascript获取文档坐标和视口坐标
10-24
制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。有需要的小伙伴可以参考下。
FME学习之旅---day27
summer_corner的博客
05-17 253
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1283
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
引用实战学习
qiuzhiuser的博客
05-19 117
【代码】引用实战学习。
学习kong官方文档
好好学习日记
05-17 307
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
sheng的学习笔记-AI-贝叶斯（Bayesian）分类
coldstarry的专栏
05-23 516
贝叶斯网络，贝叶斯算法，朴素贝叶斯分类器，半朴素贝叶斯分类器，拉普拉斯修正
C语言查漏补缺学习【精简版】
qq_49288362的博客
05-18 726
逗号的组合关系是自左向右，所以左边的表达式会先计算，而右边的表达式的值就留下来作为逗号运算的结果。枚举类型名字通常并不真的使用，要用的是在大括号里的名字，因为它们就是常量符合，它们的类型是int,值则一次从0到n。当要传递的参数的类型比地址大的时候，这是常用的手段：既能用比较少的字节数传递值给参数，又能避免函数对外面的变量的修改。当需要一些可以排列起来的常量值时，定义枚举的意义就是给了这些常量的值的名字。16.*：是一个单目运算符，用来访问指针的值所表示的地址上的变量。
[BT]小迪安全2023学习笔记（第27天：Web攻防-SQL数据类型注入）
Bluetuan的博客
05-23 70
在SQL中，数字可以不需要单引号，但是字符串需要单引号闭合（不然识别不了）
llama-factory学习个人记录
qq_55736201的博客
05-22 655
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
学习其他推理判断
最新发布
小琳猫的博客
05-23 650
学习其他推理判断
写一个弹性盒子模型
05-26
好的，以下是一个简单的弹性盒子模型： ```html <div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .item { flex: 1; height: 100px; margin: 10px; } .item-1 { background-color: red; } .item-2 { background-color: blue; } .item-3 { background-color: green; } ``` 这个例子中，我们创建了一个容器 `container`，设置它为弹性盒子布局，并将其高度设置为视口高度。然后我们创建了三个项目 `item`，并将它们放在容器中。 我们使用 `flex: 1` 来设置每个项目的伸缩性，这意味着它们将平均分配可用空间。我们还设置了项目的高度和外边距，以便它们更好地呈现。 最后，我们使用不同的背景颜色来区分每个项目，并使用 `justify-content` 和 `align-items` 属性将项目水平和垂直居中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值