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

最新推荐文章于 2022-11-15 13:53:33 发布

m0_64962776

最新推荐文章于 2022-11-15 13:53:33 发布

阅读量111

点赞数

文章标签：学习 css less

本文链接：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&g