web作业--项目布局+项目页面

password大鸭梨

已于 2023-07-29 02:19:30 修改

阅读量64

点赞数

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

于 2023-07-26 02:59:42 首次发布

本文链接：https://blog.csdn.net/m0_73163437/article/details/131929789

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用HTML和CSS中的Flexbox布局创建一个1240px宽的网页布局，包含一个固定宽度的左侧栏和一个动态调整的右侧栏。右侧栏使用了flex-wrap属性以适应多行排列，并通过justify-content和align-content属性实现内容在主轴和侧轴上的均匀间隔分布。

摘要由CSDN通过智能技术生成

项目布局：

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 避免盒子的改变对结果的影响 */
        .xiaomi{
            display: flex;
            /* 设置弹性盒子：可使得儿子在父亲的范围内变化 */
            width: 1240px;
            height: 600px;
            border: 2px solid black;
            margin: 0 auto;
            /* 大盒子居中 */
        }
        .left{
            width: 300px;
            height: 600px;
            background-color: pink;
        }
        .right ul{
            display: flex;
            /* 弹性项目，用于缩放空间 */
            width: 940px;
            height: 600px;
            flex-wrap: wrap;
            /* 可分多行排列 */
            justify-content: space-between;
            /* 主轴排列：左右两个贴边框，其他按行均匀间隔分布 */
            align-content: space-between;
            /* 侧轴排列：上下两个贴边框，其他按列均匀间隔分布 */
        }
        ul li{
            list-style: none;
            /* 不显示列表项的标记 */
            width: 220px;
            height: 270px;
            background-color: aqua;
        }

    </style>
</head>
<body>
    <div class="xiaomi">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</body>
</html>