css 总结

最新推荐文章于 2024-08-26 19:13:51 发布

一切顺势而行

最新推荐文章于 2024-08-26 19:13:51 发布

阅读量91

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/x17809211858/article/details/137724762

版权

本文介绍了如何使用HTML和CSS创建一个响应式的容器，其中包含六个大小相等、背景颜色各异的div元素，展示如何利用Flexbox布局技术进行动态调整。

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

<html>
    <header>
        <meta charset="utf-8">
    </header>
    <body>
        <div class="container">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
            <div class="div4">div4</div>
            <div class="div5">div5</div>
            <div class="div6">div6</div>
            <div class="div7">div7</div>
        </div>
    </body>
    <style type="text/css">
        div{
            border-radius: 50%;
            flex-direction: row;
            flex-wrap: wrap;
            margin-right: 10px;
            justify-content: space-between
        }

        .container{
            width:800px;
            display: flex;
            margin: 0,auto;
            align-items: center;
        }

        .div1,.div2,.div3,.div4,.div5,.div6,.div7 {
            width:200px;
            height:200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .div1 {
            background-color: aqua;
        }


        .div2 {
            background-color: yellowgreen
        }

        .div3 {
            background-color: pink
        }

        .div4 {
            background-color: #ff0
        }

        .div5 {
            background-color: #f0f
        }

        .div6 {
            background-color: #0ff;
        }

        .div7 {
            background-color: #0f0
        }
    </style>
</html>