当前位置： 首页 > article >正文

【CSS】常见 CSS 布局

article 2025/3/15 16:07:43

1. 响应式布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的响应式布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 导航样式 */
        nav {
            background-color: #f2f2f2;
            padding: 10px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        nav ul li a:hover {
            background-color: #ccc;
        }

        nav ul li a {
            color: #333;
            text-decoration: none;
            padding: 5px;
        }

        /* 主要内容样式 */
        main {
            padding: 20px;
        }

        section {
            margin-bottom: 20px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>响应式布局示例</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>欢迎来到我们的网站！</h2>
            <p>这是一个简单的响应式布局示例。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
    </script>
</body>

</html>

在这里插入图片描述

2. 块级布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的块级布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 主要内容样式 */
        main {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        section {
            flex-basis: 48%;
            background-color: #f2f2f2;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .left-section {
            /* order 规定 section 出现的先后顺序 */
            order: 1;
        }

        .right-section {
            order: 2;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>块级布局示例</h1>
    </header>
    <main>
        <section class="left-section">
            <h2>左侧区域</h2>
            <p>这是左侧区域的内容。</p>
        </section>
        <section class="right-section">
            <h2>右侧区域</h2>
            <p>这是右侧区域的内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

3. 流式布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的流式布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 内容区域样式 */
        #content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        .box {
            flex-basis: 300px;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>流式布局示例</h1>
    </header>
    <div id="content">
        <div class="box">
            <h2>盒子 1</h2>
            <p>这是盒子 1 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 2</h2>
            <p>这是盒子 2 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 3</h2>
            <p>这是盒子 3 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 4</h2>
            <p>这是盒子 4 的内容。</p>
        </div>
    </div>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

4. 定位布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的定位布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: #f2f2f2;
        }

        /* 盒子样式 */
        .box {
            position: absolute;
            padding: 20px;
            background-color: #333;
            color: #fff;
        }

        #box1 {
            top: 20px;
            left: 20px;
        }

        #box2 {
            bottom: 20px;
            right: 20px;
        }

        #box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div id="container">
        <div
            id="box1"
            class="box"
        >盒子 1</div>
        <div
            id="box2"
            class="box"
        >盒子 2</div>
        <div
            id="box3"
            class="box"
        >盒子 3</div>
    </div>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

5. 多列布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的多列布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        /* 列样式 */
        .column {
            flex-basis: 30%;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="column">
            <h2>列 1</h2>
            <p>这是列 1 的内容。</p>
        </div>
        <div class="column">
            <h2>列 2</h2>
            <p>这是列 2 的内容。</p>
        </div>
        <div class="column">
            <h2>列 3</h2>
            <p>这是列 3 的内容。</p>
        </div>
    </div>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

6. 网格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1700px;
            height: 500px;
            border: 10px solid gray;
            margin: 100px auto;
            display: grid;
            /* 13 列，每列列宽为 100px */
            grid-template-columns: repeat(13, 100px);
            /* 4 行，每行高度为 100px */
            grid-template-rows: repeat(4, 100px);
            /* 单元格间距 垂直 水平 */
            grid-gap: 10px 10px;
            /* 整体网格居中 */
            place-content: center center;
        }

        .box>div {
            background: pink;
        }

        .box1 {
            /* 横向网格线起始位置 */
            grid-row: 1/3;
            /* 纵向网格线起始位置 */
            grid-column: 12/14;
        }

        .box2 {
            grid-row: 1/2;
            grid-column: 10/12;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <div>40</div>
        <div>41</div>
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <!-- <div>49</div> -->
        <!-- <div>50</div>
        <div>51</div>
        <div>52</div> -->
    </div>
</body>

</html>

在这里插入图片描述

7. 浮动布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        .nav {
            width: 100%;
            overflow: hidden;
        }

        .nav li {
            float: left;
            margin-right: 15px;
        }

        .nav li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

</html>

在这里插入图片描述


http://www.kler.cn/a/103649.html

相关文章：

  • NFS性能瓶颈分析
  • Linux简单安装ffmpeg 实现用PHP压缩音频
  • 使用jdbc技术连接数据库
  • 2023中国物流系统集成商百强榜研究报告（附下载）
  • 论文-分布式-并发控制-Lamport逻辑时钟
  • 深度学习使用Keras进行迁移学习提升网络性能
  • Linux 内核定时器（高级字符设备五）
  • 【STM32】标准库的引入
  • 网站、小程序常见布局样式记录
  • ESP32网络开发实例-使用NTP获取当前时间
  • C# 串口通信简单示例
  • Linux友人帐之日志与备份
  • 《动手学深度学习 Pytorch版》 10.2 注意力汇聚：Nadaraya-Watson 核回归
  • python集合
  • CentOS 系统安装和使用Docker服务
  • 【单元测试】--维护和改进单元测试
  • GIS 数据结构BSP树
  • 如何在 Bash 脚本中添加注释
  • 新成果展示：AlGaN/GaN基紫外光电晶体管的设计与制备
  • SylixOS BSP开发(八)