利用flex布局设计网购订单确认页面

最新推荐文章于 2024-09-21 16:05:41 发布

芹菜还是菜

最新推荐文章于 2024-09-21 16:05:41 发布

阅读量656

点赞数

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/hmcxy123/article/details/126551844

版权

为了方便我把html和css的代码分开了

首先html的布局代码如下：

后续css的样式表通过link导入

<!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="./lib/iconfont/iconfont.css">
    <!-- 引入样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/order.css">
</head>
<body>
    <!-- 主体内容，手指滑动查看 -->
    <div class="main">
    
    <!-- 用户信息 -->
    <div class="pannel user_msg">
         <div class="location orange">
            <i class="iconfont icon-location"></i>
        </div> 
         <div class="user_mesg">
            <div class="user">
                <h5 class="text_f">芹菜</h5>
                <p class="text_f">18666433822</p>
            </div>
            <div class="address text_f">上海市 祖安新区 好运来工业园 科技改变生活大厦#888</div>
        </div>
         <div class="more">
            <i class="iconfont icon-more"></i>
         </div>
    </div>
    
    <div class="pannel product_msg">
            <div class="line1">
                <img class='img' src="./images/product.png" alt="">
                <span>
                    <a class='text_f' href="">凡米粒甜甜圈水杯海绵宝宝雪糕水壶儿童吸
                        管杯hellokitty杯子可爱</