前端实践记录| 豆包MarsCode AI刷题

陌上花开162
64 阅读5分钟

CSS 布局学习笔记

  1. 浮动（float） - 原理：通过设置元素的 float 属性，使元素脱离文档流，向左或向右浮动。 - 应用场景： - 实现多栏布局，如新闻网站的侧边栏和内容栏。 - 图片与文字环绕效果。 - 实操实践： - 创建一个两栏布局，左侧栏宽度固定，右侧栏自适应宽度。可以将左侧栏的 float 属性设置为 left，右侧栏不设置浮动，利用文档流的特性实现自适应宽度。 - 在图片与文字环绕的场景中，将图片的 float 属性设置为 left 或 right，文字会自动围绕图片排列。
  2. 定位（position） - 原理：通过设置元素的 position 属性，可以将元素相对于其正常位置、父元素或浏览器窗口进行定位。 - 应用场景： - 固定导航栏或页脚，始终保持在页面的特定位置。 - 绝对定位元素，用于实现弹出窗口、下拉菜单等效果。 - 实操实践： - 实现固定导航栏，将导航栏的 position 属性设置为 fixed，并设置 top、left、right、bottom 等属性来确定其位置。 - 制作弹出窗口时，可以将窗口元素的 position 属性设置为 absolute，并根据需要调整其位置和大小。
  3. 弹性盒子布局（Flexbox） - 原理：Flexbox 是一种一维的布局模型，通过设置容器和子元素的属性，可以轻松实现灵活的布局。 - 应用场景： - 实现响应式布局，适应不同屏幕尺寸。 - 对齐和分布子元素，如水平居中和垂直居中。 - 实操实践： - 创建一个响应式的导航栏，当屏幕宽度较小时，将导航项折叠显示。可以使用 Flexbox 的 flex-wrap 属性来实现。 - 实现水平居中和垂直居中，可以将容器设置为 Flexbox 布局，并使用 justify-content 和 align-items 属性来调整子元素的对齐方式。

三、不同布局技巧的比较

  1. 浮动布局相对简单，但容易出现布局混乱的情况，需要清除浮动。定位布局可以精确控制元素的位置，但可能会影响页面的其他元素。Flexbox 布局更加灵活，适用于复杂的布局需求，但需要一定的学习成本。
  2. 在响应式布局方面，Flexbox 布局具有明显的优势，可以轻松实现自适应和响应式设计。浮动布局和定位布局在响应式设计中需要更多的技巧和调整。
  3. 对于对齐和分布子元素，Flexbox 布局提供了丰富的属性，可以轻松实现各种对齐方式。浮动布局和定位布局则需要借助其他技巧来实现对齐。

CSS 布局技巧是网页设计和开发中不可或缺的一部分。浮动、定位和弹性盒子布局等技巧各有其特点和应用场景。在实际开发中，需要根据具体需求选择合适的布局技巧，并结合使用，以实现美观、响应式的网页界面。同时，不断学习和掌握新的 CSS 布局技术，将有助于提高网页开发的效率和质量。

我的实践记录

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <title>Tlias智能学习辅助系统</title>
    <style>
        body{
            margin:0;
            font-family: Arial,sans-serif;
        }
        .navbar {
            background-color: #808080;
            /* 设置背景颜色为浅灰色 */
            padding: 10px;
            /* 内边距，使内容不紧贴边缘 */
            display: flex;
            /* 使用Flexbox布局,弹性布局 */
            justify-content: space-between;
            /* 主轴上的空间分配，这里是指左右对齐 */
            align-items: center;
            /* 垂直居中对齐 */
        }

        .navbar h1 {
            margin: 0;
            /* 移除默认的外边距 */
            font-weight: bold;
            /* 加粗字体 */
            color: white;
            /* 设置字体颜色 */
            font-family: "楷体";
            /* 设置字体 */
        }

        .navbar a {
            text-decoration: none;
            /* 移除下划线 */
            color: white;
            /* 文字颜色 */
            font-weight: bold;
            /* 加粗字体 */
        }
        .table-container {
            margin: 20px; /* 外边距，用于设置表格与页面之间的距离 */
        }
        table {
            width: 100%; /* 宽度为100%，即占满整个容器宽度 */
            border-collapse: collapse; /* 合并相邻的边框 */
            margin-top: 20px; /* 添加一个20px的顶部外边距，用于设置表格与标题之间的距离 */
        }
        th, td {
            border:1px solid #ddd; /* 设置边框 */
            padding: 12px; /* 设置单元格内边距 */
            text-align: center; /* 水平居中 */
        }
         th {
            background-color: #f2f2f2; /* 设置背景颜色为浅灰色 */
            font-weight: bold; /* 加粗字体 */
        }
        tr:nth-child(even) { /* 隔行换色 */
            background-color: #f9f9f9; /* 设置背景颜色为浅灰色 */
        }
        tr:hover { /* 鼠标悬停时高亮显示 */
            background-color: #f1f1f1; /* 设置背景颜色为浅灰色 */
        }
        img {
            width: 50px;
            height: 50px;
            border-radius: 30%; /* 设置头像为圆形 */
        }
        .buttons {
            display: flex; /* 使用Flexbox布局，将按钮垂直居中 */
            gap: 10px; /* 设置按钮之间的间距 */
        }
        .buttons button {
            padding: 5px 10px; /* 设置按钮的内边距 */
            border: none;   /* 移除默认的边框 */
            background-color: #007bff;
            color: white; /* 设置字体颜色 */
            cursor: pointer; /* 显示为手型指针 */
        }
        .buttons button:hover { /* 鼠标悬停时按钮颜色变化 */
            background-color: #0056b3;
        }
        
        /* 页脚版权区域 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
        }
        .footer p {
            margin: 0;
            font-size: 14px;
        }
        /* #con{
            width: 80%;
            margin: 0 auto;
        } */
    </style>
</head>

<body>
                          <!-- 导航栏 -->
    <div id="con">
        <div class="navbar">
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#logout">退出登录</a> <!-- 这里#logout只是一个占位符，实际使用时应替换为真实的退出链接 -->
        </div>
        <form class="search-form" action="/search" method="post"></form>
        <!-- 表格内容 -->
        <div class="table-container">
            <h2>人员信息表</h2>
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>头像</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>最后操作时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 这里可以添加表格内容 -->
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td><img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.c-I6QGVea_XcqjihjmqSawAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
                                alt="张三的头像"></td>
                        <td>经理</td>
                        <td>2023-04-15</td>
                        <td>2023-04-18 12:30</td>
                        <td>
                            <div class="buttons">
                                <button>编辑</button>
                                <button>删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>任盈盈</td>
                        <td>女</td>
                        <td><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Renm-g-WBoLXkyl4Njd8HAAAAA?rs=1&pid=ImgDetMain"
                                alt="任盈盈"></td>
                        <td>讲师</td>
                        <td>2021-02-01</td>
                        <td>2023-10-02 11:00</td>
                        <td>
                            <div class="buttons">
                                <button>编辑</button>
                                <button>删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>东方不败</td>
                        <td>男</td>
                        <td><img src="https://ts1.cn.mm.bing.net/th/id/R-C.528cf5fb9b9315327bb3c7f299352162?rik=CECeqEfeVsm93Q&riu=http%3a%2f%2fimg.touxiangkong.com%2fzb_users%2fupload%2f2022%2f12%2f202212111670753009584669.jpg&ehk=BeyY4qF32aPD0qbxVnoEG0B6yGEaCpKHntdHhkvFa9s%3d&risl=&pid=ImgRaw&r=0"
                                alt="东方不败"></td>
                        <td>学工主管</td>
                        <td>2021-03-01</td>
                        <td>2023-10-03 12:00</td>
                        <td>
                            <div class="buttons">
                                <button>编辑</button>
                                <button>删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 页面其他部分可在此处添加 -->
        <!-- 页脚版权区域 -->
        <div class="footer">
            <p>科技有限公司</p>
            <p>版权所有 © 2806-2024 All Rights Reserved</p>
        </div>
    </div>
</body>

</html>
avatar
文章
阅读
粉丝