CSS学习——完成指定布局

最新推荐文章于 2025-05-15 09:33:53 发布

原创最新推荐文章于 2025-05-15 09:33:53 发布 · 1.9k 阅读

46 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文介绍了CSS浮动布局的使用，涉及百分比单位、边框圆角、列表样式调整，以及选择器权重的概念。同时强调了后续学习方向，如深入盒模型、不同布局类型、定位和响应式设计的重要性。

本文主要依靠浮动布局完成指定布局。

完成指定布局

浮动布局：使用了float属性来实现元素的水平排列。这是CSS中一种传统的布局方式。
以下几点需要注意：

百分比单位：用百分比设置了元素的宽度和高度。这是一个相对单位，它相对于父元素的尺寸。这种设置方式可以使元素在不同尺寸的屏幕上都有好的表现，从而实现响应式布局。
边框半径：border-radius属性用于设置元素边框的圆角程度。设置元素的border-radius使得元素的角看起来是圆滑的。
列表样式：使用list-style: none;移除了列表前的默认标记（小圆点），这是常见的列表样式调整。
选择器权重：选择器权重是一个衡量CSS选择器优先级的重要概念。选择器的优先级取决于选择器的类型和特定性。计算权重时，比较id、类、标签的数量。

<!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>
        body,
        html {
            height: 100%;
            /* 确保html和body元素占满视口高度 */
            margin: 0;
            padding: 0;
        }

        /* 绘制上部分 */
        li {
            list-style: none;
        }

        .top {
            width: 100%;
            height: 12.5%;
            background-color: green;
            margin: 0;
            padding: 0;
        }

        .top li {
            width: 200px;
            height: 60px;
            background-color: rgb(196, 255, 216);
            float: left;
            margin: 10px;
            border-radius: 5px;
            margin-bottom: 0;
        }

        /* 绘制左部分 */
        .left {
            width: 20%;
            height: 87.5%;
            background-color: rgb(192, 255, 219);
            margin: 0;
            padding: 0;
            float: left;
        }

        .left li {
            width: 190px;
            height: 50px;
            background-color: rgb(135, 232, 235);
            margin: 15px;

        }

        /* 绘制右部分 */
        .right {
            width: 80%;
            height: 87.5%;
            background-color: white;
            float: right;
            margin: 0;
            padding: 0;
        }

        .shang {
            width: 1010px;
            height: 282.35px;
            background-color: palegreen;
            float: right;
        }

        .xia {
            width: 1010px;
            height: 282.35px;
            background-color: palegreen;
            float: right;
        }

        .right .shang li {
            width: 200px;
            height: 200px;
            background-color: rgb(136, 222, 135);
            float: right;
            margin: 10px;
            margin-right: 30px;
            border-radius: 8px;
        }

        .right .shang .one {
            margin-right: 200px;
        }

        .right .xia li {
            width: 200px;
            height: 200px;
            background-color: rgb(136, 222, 135);
            float: right;
            margin: 10px;
            margin-right: 30px;
            border-radius: 8px;
        }

        .right .xia .two {
            margin-right: 200px;
        }
    </style>
</head>

<body>

    <ul class="top">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="left">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="right">
        <div class="shang">
            <li class="one"></li>
            <li></li>
            <li></li>
        </div>
        <div class="xia">
            <li class="two"></li>
            <li></li>
            <li></li>
        </div>
    </ul>

</body>

</html>

下图为布局效果图：
完成指定布局

几点反思

盒子间的距离是人为调动的，并不严谨，稍不小心便会溢出，但以现在的能力无法系统解决，只能不断检查、不断改
对盒子的四个参数还是不够清晰，仍需要多加练习
对选择器权重的理解不够深刻，经常无法正确显示

后期学习方向

理解盒模型：深入学习CSS的盒模型，包括内容、填充、边框和边距。
学习布局类型：掌握不同类型的CSS布局，如流动布局、定位布局、弹性盒子布局（Flexbox）和网格布局（Grid）。了解每种布局的特点和适用场景，以便选择合适的布局类型来实现的设计。
掌握定位和浮动：熟悉CSS的定位属性（如static、relative、absolute和fixed）以及浮动属性（float）。
学习响应式设计：了解如何使用CSS媒体查询和弹性布局来实现响应式设计。
借鉴和参考：寻找并借鉴其他优秀网站的布局设计和代码。通过参考实际案例，通过实践项目来提升的布局技能。

标签

#css #学习 #前端