当前位置：网站首页>Flex layout (actual Xiaomi official website)

Flex layout (actual Xiaomi official website)

2022-07-27 08:55:00 【Old Duan in battle】

1、 Xiaomi official website address
Xiaomi official website
2、 Original rendering of Xiaomi official website
Insert picture description here
3、 Achieve the effect diagram

4、 Code implementation

<!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>
        .banner{
            width: 1226px;
            /*  Top and bottom margin  */
            margin: 14px auto;
            height: 170px;
            display: flex;
            /*  Evenly arrange the first element of each element and place it at the starting point , End element placed at end  */
            justify-content: space-between;
        }
        .iconList{
            width: 234px;
            height: 170px;
            display: flex;
            /*  Line break  */
            flex-wrap: wrap;
        }
        /*  Set width and height  */
        .bannerImag{
            width: 316px;
            height: 170px;
        }
        /*  picture 100% */
        .bannerImag>img{
            width: 100%;
            height: 100%;
        }
        .iconItem{
            width: 33.33%;
            height: 50%;
            display: flex;
            /*  Vertical up and down      Flexible items will be displayed vertically , Just like a column . */
            flex-direction: column;
            background-color: #5F5750;
            /*  Center the spindle      center alignment */
            justify-content: center;
            /*  The element is in the center of the container . */
            align-items: center;
            /*  Relative positioning  */
            position: relative;
        }
        .iconItem .text{
            color: #999;
            font-size: 12px;
        }
        .iconItem>.icon img{
            width: 24px;
            height: 24px;
            /* background-image: url(./img/ls1.png); */
            /*  contain  */
            background-size: contain;
            /*  Pictures don't repeat  */
            background-repeat: no-repeat;
            /*  Picture transparency     Put the mouse on and light it up  */
            opacity: 0.5;
            /*  Text and chart margins  */
            margin-bottom: 4px;
        }
        /*  Move the mouse to display brightness  */
        .iconItem>.icon img:hover{
            width: 36px;
            height: 36px;
            opacity: 1;
        }
        .iconItem>.text:hover{
            color: red;
            font-size: 16px;
        }
        /* :before  The selector inserts content in front of the selected element .
         Use content  Property to specify what to insert . */
        .h::before{
            content: '';
            /*  The width and height can only be set by setting the block element  */
            display: block;
            width: 88%;
            height: 1px;
            background-color: #757575;
            position: absolute;
            bottom: 0;
        }
        /* :after  The selector inserts content after the last child element of the selected element .
         Use content  Property to specify what to insert . */
        .v::after{
            content: '';
            /*  The width and height can only be set by setting the block element  */
            display: block;
            width: 1px;
            height: 88%;
            background-color: #757575;
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
    <!--  Outermost layer    Big box  -->
    <div class="banner">
        <!--  Big box on the left  -->
        <div class="iconList">
            <!--  Inside the box on the left   Content and icons  -->
            <div class="iconItem h v">
                <div class="icon">
                    <img src="./img/ls1.png" alt="">
                </div>
                <div class="text"> Security services </div>
            </div>
            <div class="iconItem h v">
                <div class="icon">
                    <img src="./img/ls2.png" alt="">
                </div>
                <div class="text"> Enterprise group buying </div>
            </div>
            <div class="iconItem h">
                <div class="icon">
                    <img src="./img/ls3.png" alt="">
                </div>
                <div class="text">F Code channel </div>
            </div>
            <div class="iconItem v">
                <div class="icon">
                    <img src="./img/lx1.png" alt="">
                </div>
                <div class="text"> Rice noodle card </div>
            </div>
            <div class="iconItem v">
                <div class="icon">
                    <img src="./img/lx2.png" alt="">
                </div>
                <div class="text"> To old change new </div>
            </div>
            <div class="iconItem ">
                <div class="icon">
                    <img src="./img/lx3.png" alt="">
                </div>
                <div class="text"> More credit </div>
            </div>
        </div>
        <!--  picture  -->
        <div class="bannerImag">
            <img src="./img/left.jpg" alt="">
        </div>
        <div class="bannerImag">
            <img src="./img/center.jpg" alt="">
        </div>
        <div class="bannerImag">
            <img src="./img/right.jpg" alt="">
        </div>
    </div>
</body>
</html>

5、 picture
Insert picture description here
6、 Icon