简易小米官网

最新推荐文章于 2024-11-10 13:17:33 发布

她说戴了就不算给

最新推荐文章于 2024-11-10 13:17:33 发布

阅读量47

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_69814268/article/details/131648937

版权

这是一个使用HTML和CSS构建的网页布局示例，主要展示了如何使用flexbox创建一个绿色背景的主容器，包含一个红色的列和一个蓝色的列。红色列内部有多个紫色的子元素，用作内容展示，而蓝色列则用于其他布局。布局中运用了justify-content,align-content,flex-wrap等属性来调整元素的对齐和换行。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xiaomi</title>
    <style>
        .dafather{
            width: 1200px;
            height: 1200px;
            background-color: green;
            display:flex;

        }
        .father1{

            display:flex;
            width:1000px ;
            height: 1200px;
            background-color: red;
            flex-direction: column;
        }
        .father2 {

            display: flex;
            width: 200px;
            height: 1200px;
            background-color: blue;
            justify-content:space-around;
            aligen-content:space-around;
            flex-wrap:wrap;
        }

        .son1,
        .son2,
        .son3,
        .son4,
        .son5,
        .son6
        {
            display:flex;
            aligen-content:space-between;
            width: 200px;
            height: 200px;
            flex-wrap:wrap;
            background-color: purple;
            justify-content:space-between;
        }




    </style>
</head>
<body>
<div class="yizhnegye">
    <span class="daohang">
        <span claa="tubiao">xiaomitubiao</span>
       <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <a>xiaomi</a>
        <input>

    <div class="shudaohang"></div>
</div>
<div class="dafather">

    <div class="father2">
        <div class="son1">son1</div>
        <div class="son2">son1</div>
        <div class="son3">son1</div>
        <div class="son4">son1</div>
        <div class="son5">son1</div>
        <div class="son6">son1</div>
    </div>
    <div class="father1"></div>
</div>
</body>
</html>