弹性盒子 html css

作者：不正经 | 2024-04-05 19:24:29

踩

弹性盒子 html css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 整体容器样式 */
        #container {
            margin: 0 auto;/* div 设置水平居中*/
            width: 500px;
            height: 400px;
            display: flex;
            flex-direction: column;/*垂直方向为列布局*/
            align-items: center;/*  在主轴方向（垂直方向）上居中对齐容器内部元素 */
        }

        /* 顶部标题样式 */
        #header {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;  /* 垂直居中对齐*/
            border: 1px solid black;
            font-size: 30px;
            color: white;
            background-color: purple;
            margin-bottom: 5px;
        }

        /* 主体内容区样式 */
        #main {
            display: flex;
            justify-content: space-between; /*两端对齐*/
            width: 100%;
            margin-bottom: 10px;
        }

        /* 左侧内容块样式 */
        #left {
            flex: 1; /*flex-grow, flex-shrink, 和 flex-basis*/
            display: flex;
            flex-direction: column; /*垂直方向为列布局*/
            justify-content: center;/*主轴上居中对齐*/
            width: 240px;
            height: 200px;
            margin-right: 10px;
            background-color: #ccc;
            font-size: 20px;
        }

        /* 右侧内容块样式 */
        #right {
            flex: 1;
            display: flex;
            flex-direction: column;/*主轴为列*/
            justify-content: center;
            width: 240px;
            height: 200px;
            background-color: #ccc;
            font-size: 20px;
        }

        /* 底部内容样式 */
        #footer {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 10px;
            background-color: #ccc;
            font-size: 20px;
            height: 100px;
        }

        p {
            font-size: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <!-- 顶部标题 -->
    <div id="header">web前端开发
    </div>
    <!-- 主体内容区 -->
    <div id="main">
        <!-- 左侧内容块 -->
        <div id="left">HTML<p>超文本标记语言，用于构建网页结构，定义网页包括的内容.</p></div>
        <!-- 右侧内容块 -->
        <div id="right">CSS <p>层叠样式表，用于构建网页布局，外观，美化页面</p></div>
    </div>
    <!-- 底部内容 -->
    <div id="footer">JavaScript <p>JavaScripe,脚本语言，用于构建网页行为，与用户进行交互，使用户获得更好的体验</p></div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/367548