浮动案例--常用的网页布局

港控/mmm° 2023-07-03 04:34 14阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>浮动元素搭配标准流父盒子</title>
        <style>
            .box{
        
                width: 1200px;
                height: 460px;
                background-color: pink;
                margin: 0 auto;
            }
            .left{
        
                float: left;
                width: 230px;
                height: 460px;
                background-color: purple;
            }
            .right{
        
                float: left;
                width: 970px;
                height: 460px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左侧</div>
            <div class="right">右侧</div>
        </div>
    </body>
    </html>

先创建有个大盒子，然后再在这个盒子里创建两个小盒子，让盒子都左浮动。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>浮动练习2</title>
    </head>
    <style>
        /* 清除所有的间距，div是没有间距的，ul是有间距的 */
        *{
        
            margin: 0;
            padding: 0;
        }
        /* 清除li前面的小圆点 */
        li{
        
            list-style: none;
        }
        .box{
        
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }
        .box li{
        
            width: 296px;
            height: 285px;
            background-color: purple;
            margin-right: 14px;
            float: left;
        }
        /* 最后一个小li不需要外边距，否则会撑出来 */
        .box .last{
        
            margin-right: 0;
    
        }
    
    </style>
    <body>
        <ul class="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>浮动页面布局3</title>
        <style>
            .box{
        
                width: 1226px;
                height: 615px;
                background-color: pink;
                margin: 0 auto;
            }
            .left{
        
                width: 234px;
                height: 615px;
                background-color: purple;
                float: left;
            }
            .right{
        
                width: 992px;
                height: 615px;
                background-color: skyblue;
                float: left;
            }
            .right>div{
        
                width: 234px;
                height: 300px;
                background-color: pink;
                float: left;
                margin-left: 14px;
                margin-bottom: 14px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左盒子</div>
            <div class="right">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
            </div>
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70 2]  
常用的网页布局：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>常用的网页布局</title>
        <style>
            *{
        
                margin: 0;
                padding: 0;
            }
            .top{
        
                height: 50px;
                background-color: gray;
            }
            .banner{
        
                width: 980px;
                height: 150px;
                background-color: gray;
                margin: 10px auto;
            }
            .box{
        
                width: 980px;
                margin: 0 auto;
                height: 300px;
                background-color: pink;
            }
            li{
        
                list-style: none;
            }
            .box li{
        
                width: 237px;
                height: 300px;
                background-color: gray;
                float: left;
                margin-right: 10px;
            }
            .box .last{
        
                margin-right: 0;
            }
            .footer{
        
                height: 200px;
                background-color: gray;
                margin-top: 10px;
            }
    
        </style>
    </head>
    <body>
        <div class="top">top</div>
        <div class="banner">banner</div>
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li class="last">4</li>
            </ul>
            
        </div>
        <div class="footer">footer</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200201212214642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200201214516109.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200201220221482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200202110456312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3,size_16,color_FFFFFF,t_70