CSS布局案例(float-position-flex)

空寻
509 阅读1分钟

CSS布局案例(float-position-flex)

熟练掌握float-position-flex三种布局，一个案例就够了，话不多说，直接上效果图

在这里插入图片描述

1.Position布局

<!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>
        .container{
            width: 1200px;
            height: 1100px;
            margin: 0 auto;
            /* position: relative; */
        }
        .header{
            height: 260px;
            /* width: 1200px; */
            /* position: relative; */
            background-color: #0098FE;
        }
        .header_title{
            background-color: #0032FE;
            /* width: 1200px; */
            height: 190px;
            position: relative;
            top: 70px;
        }
        .header_left{
            width: 280px;
            height: 100px;
            background-color: #F7117E;
            position: absolute;
            margin:65px 50px;
        }
        .header_right{
            height: 40px;
            width: 500px;
            position: absolute;
            background-color: #F411F7;
            right: 50px;
            top: 130px;
        }
        .content{
            height: 720px;
            /* width: 1200px; */
            position: absolute;
        }
        .content_left{
            width: 250px;
            height: 700px;
            position: relative;
            margin-top: 10px;
            background-color: #0180FB;
        }
        .content_left_top{
            width: 250px;
            height: 414px;
            background-color: #0099CB;
            /* position: relative; */
        }
        .content_left_bottom{
            width: 250px;
            height: 276px;
            background-color: #5785D0;
            margin-top: 10px;
            /* position: relative; */
        }
        .content_right{
            width: 200px;
            height: 700px;
            left: 1000px;
            bottom: 10px;
            position: absolute;
            background-color: #0064FE;
        }
        .content_center{
            width: 730px;
            height: 700px;
            position: absolute;
            bottom: 10px;
            left: 260px;
            background-color: #867CFC;
        }
        .content_center_top{
            height: 345px;
            width: 730px;
            position: relative;
            background-color: #31CBFD;
        }
        .content_center_top_left{
            height: 120px;
            width: 120px;
            background-color: #0000FD;
            position: absolute;
            top: 145px;
        }
        .content_center_top_center{
            height: 160px;
            width: 380px;
            background-color: #527136;
            position: absolute;
            top: 25%;
            right: 25%;
        }
        .content_center_top_right{
            height: 80px;
            width: 140px;
            background-color: #27FC4A;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .content_center_bottom{
            height: 345px;
            width: 730px;
            position: absolute;
            top: 355px;
        }
        .rectangle1{
            width: 50%;
            height: 50%;
            background-color: #FD4200;
            position: absolute;
        }
        .rectangle2{
            width: 50%;
            height: 50%;
            background-color: #00FD30;
            position: absolute;
            right: 0;
        }
        .rectangle3{
            width: 50%;
            height: 50%;
            background-color: #FDED01;
            position: absolute;
            top: 50%;
        }
        .rectangle4{
            width: 50%;
            height: 50%;
            background-color: #D8AFFE;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .footer{
            width: 1200px;
            height: 120px;
            position: relative;
            top: 720px;
            background-color: #0164CA;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header_title">
                <div class="header_left"></div>
                <div class="header_right"></div>
            </div>
        </div>
        <div class="content">
            <div class="content_left">
                <div class="content_left_top"></div>
                <div class="content_left_bottom"></div>
            </div>
            <div class="content_center">
                <div class="content_center_top">
                    <div class="content_center_top_left"></div>
                    <div class="content_center_top_center"></div>
                    <div class="content_center_top_right"></div>
                </div>
                <div class="content_center_bottom">
                    <div class="rectangle1"></div>
                    <div class="rectangle2"></div>
                    <div class="rectangle3"></div>
                    <div class="rectangle4"></div>
                </div>
            </div>
            <div class="content_right">
            </div>  
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

2.flex布局

<!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>
        .container{
            width: 1200px;
            height: 1100px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* position: relative; */
        }
        .header{
            height: 260px;
            /* width: 1200px; */
            /* position: relative; */
            background-color: #0098FE;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .header_title{
            background-color: #0032FE;
            /* width: 1200px; */
            height: 190px;
            /* position: relative; */
            display: flex;
            justify-content: space-between;
            
        }
        .header_left{
            width: 280px;
            height: 100px;
            background-color: #F7117E;
            /* position: absolute; */
            display: flex;
            margin-left: 50px;
            flex-direction: column;
            align-self: center;
        }
        .header_right{
            height: 40px;
            width: 500px;
            /* position: absolute; */
            background-color: #F411F7;
            display: flex;
            margin-right: 50px;
            margin-bottom: 42px;
            flex-direction: column;
            align-self: flex-end;
        }
        .content{
            height: 700px;
            /* width: 1200px; */
            /* position: absolute; */
            display: flex;
            justify-content: space-between;
        }
        .content_left{
            width: 250px;
            height: 700px;
            /* position: relative; */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #0180FB;
        }
        .content_left_top{
            width: 250px;
            height: 414px;
            background-color: #0099CB;
            /* position: relative; */
        }
        .content_left_bottom{
            width: 250px;
            height: 276px;
            background-color: #5785D0;
         
            /* position: relative; */
        }
        .content_right{
            width: 200px;
            height: 700px;
          
            /* position: absolute; */
            background-color: #0064FE;
        }
        .content_center{
            width: 730px;
            height: 700px;
            /* position: absolute; */
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           background-color: #867CFC;
        }
        .content_center_top{
            height: 345px;
            width: 730px;
            /* position: relative; */
            display: flex;
            justify-content: space-between;
            background-color: #31CBFD;
        }
        .content_center_top_left{
            height: 120px;
            width: 120px;
            background-color: #0000FD;
            /* position: absolute; */
            display: flex;
            flex-direction: column;
            align-self: center;
            margin-top: 60px;
        }
        .content_center_top_center{
            height: 160px;
            width: 380px;
            background-color: #527136;
            /* position: absolute; */
            display: flex;
            flex-direction: column;
            align-self: center;
        }
        .content_center_top_right{
            height: 80px;
            width: 140px;
            background-color: #27FC4A;
            /* position: absolute; */
            display: flex;
            flex-direction: column;
            align-self: flex-end;
        }
        .content_center_bottom{
            height: 345px;
            width: 730px;
            /* position: absolute; */
            display: flex;
            flex-wrap: wrap;
        }
        .rectangle1{
            width: 50%;
            height: 50%;
            background-color: #FD4200;
            /* position: absolute; */
        }
        .rectangle2{
            width: 50%;
            height: 50%;
            background-color: #00FD30;
            /* position: absolute; */
        
        }
        .rectangle3{
            width: 50%;
            height: 50%;
            background-color: #FDED01;
            /* position: absolute; */
            top: 50%;
        }
        .rectangle4{
            width: 50%;
            height: 50%;
            background-color: #D8AFFE;
            /* position: absolute; */
           
        }
        .footer{
            width: 1200px;
            height: 120px;
            /* position: relative; */
            background-color: #0164CA;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header_title">
                <div class="header_left"></div>
                <div class="header_right"></div>
            </div>
        </div>
        <div class="content">
            <div class="content_left">
                <div class="content_left_top"></div>
                <div class="content_left_bottom"></div>
            </div>
            <div class="content_center">
                <div class="content_center_top">
                    <div class="content_center_top_left"></div>
                    <div class="content_center_top_center"></div>
                    <div class="content_center_top_right"></div>
                </div>
                <div class="content_center_bottom">
                    <div class="rectangle1"></div>
                    <div class="rectangle2"></div>
                    <div class="rectangle3"></div>
                    <div class="rectangle4"></div>
                </div>
            </div>
            <div class="content_right">
            </div>  
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

3.float布局

<!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>
        .container{
            width: 1200px;
            height: 1100px;
            margin: 0 auto;
        }
        .header{
            height: 260px;
            width: 1200px;
            float: left;
            background-color: #0098FE;
        }
        .header_title{
            background-color: #0032FE;
            width: 1200px;
            height: 190px;
            float: left;
            margin-top: 70px;
        }
        .header_left{
            width: 280px;
            height: 100px;
            background-color: #F7117E;
            float: left;
            margin:65px 50px;
        }
        .header_right{
            height: 40px;
            width: 500px;
            float: right;
            background-color: #F411F7;
            margin: 130px 50px;
        }
        .content{
            height: 720px;
            width: 1200px;
            float: left;
        }
        .content_left{
            width: 250px;
            height: 700px;
            float: left;
            margin-top: 10px;
            background-color: #0180FB;
        }
        .content_left_top{
            width: 250px;
            height: 414px;
            background-color: #0099CB;
            float: left;
        }
        .content_left_bottom{
            width: 250px;
            height: 276px;
            background-color: #5785D0;
            margin-top: 10px;
            float: left;
        }
        .content_right{
            width: 200px;
            height: 700px;
            float: right;
            margin-top: 10px;
            background-color: #0064FE;
        }
        .content_center{
            width: 730px;
            height: 700px;
            float: left;
            margin: 10px 10px;
            background-color: #867CFC;
        }
        .content_center_top{
            height: 345px;
            width: 730px;
            float: left;
            background-color: #31CBFD;
        }
        .content_center_top_left{
            height: 120px;
            width: 120px;
            background-color: #0000FD;
            float: left;
            margin-top: 145px;
        }
        .content_center_top_center{
            height: 160px;
            width: 380px;
            background-color: #527136;
            margin: 100px auto;
        }
        .content_center_top_right{
            height: 80px;
            width: 140px;
            background-color: #27FC4A;
            float: right;
            margin-top: 265px;
        }
        .content_center_bottom{
            height: 345px;
            width: 730px;
            float: left;
            margin-top: 10px;
        }
        .rectangle1{
            width: 50%;
            height: 50%;
            background-color: #FD4200;
            float: left;
        }
        .rectangle2{
            width: 50%;
            height: 50%;
            background-color: #00FD30;
            float: right;
        }
        .rectangle3{
            width: 50%;
            height: 50%;
            background-color: #FDED01;
            float: left;
        }
        .rectangle4{
            width: 50%;
            height: 50%;
            background-color: #D8AFFE;
            float: right;
        }
        .footer{
            width: 1200px;
            height: 120px;
            float: left;
            background-color: #0164CA;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header_title">
                <div class="header_left"></div>
                <div class="header_right"></div>
            </div>
        </div>
        <div class="content">
            <div class="content_left">
                <div class="content_left_top"></div>
                <div class="content_left_bottom"></div>
            </div>
            <div class="content_right">
            </div>
            <div class="content_center">
                <div class="content_center_top">
                    <div class="content_center_top_left"></div>
                    <div class="content_center_top_right"></div>
                    <div class="content_center_top_center"></div>
                </div>
                <div class="content_center_bottom">
                    <div class="rectangle1"></div>
                    <div class="rectangle2"></div>
                    <div class="rectangle3"></div>
                    <div class="rectangle4"></div>
                </div>
            </div>   
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝