案例七---支付宝弹性盒布局

最新推荐文章于 2024-07-17 15:26:15 发布

阿茶阿茶

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量248

点赞数

分类专栏：案例文章标签：前端学习 html css

本文链接：https://blog.csdn.net/Flora_hsx/article/details/127474792

版权

一：代码

<!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>Document</title>
    <link rel="stylesheet" href="./history/material/font_3724085_b2nkdmmbdqh/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 955px;
            height: 1420px;
            margin: 0 auto;
            background: yellow;
            display: flex;
            flex-direction: column;
            /* 主轴为纵轴 */
        }

        /* ------header------ */
        header{
            height: 124px;
            background: #232939;
            display: flex;
            color: white;
        }

        header i{
            /* 选择header i{}，设置font-size不生效，，优先级不够
               换为了header i[class]，font-size生效，也可以尝试在font-size后加!important */
            width: 118px;
            height: 124px;
            line-height: 124px;
            text-align: center;
            font-size : 48px !important;
            /* 记住这个！important用法 */
        }

        header span{
            flex: 1;
            /* 将剩余的空间占满 */
            width: 118px;
            height: 124px;
            line-height: 124px;
            font-size: 40px;
        }

        /* ------section------ */

        /* 用法一 */
        section{
            flex: 1;
            /* 高度自适应 */
            background: #f4f5f9;
        }

        .box1{
            display: flex;
            height: 278px;
            background: #232939;
            justify-content: space-around;
            align-items: center; 
        }

        .box2{
            width: 120px;