HTML常用布局方式

不念不忘少年蓝@ 2024-04-01 18:30 36阅读 0赞

**前言**：对HTML的学习，在了解了基础的语法之后，需要学习与掌握的是，HTML的基础布局方式，这个是网页布局的基础，本文讲解是当前常用布局。

## 布局一 ##

**示例图**：

![在这里插入图片描述][250afccb97e24c408311d647c9e32067.png]

**代码部分**：

<!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>
            .header{
          
                border-style: solid;  /*设置边框样式*/
                text-align: center; /*让文字居中*/
                height: 100px;
                width: 100%; /*设置宽度为浏览器100%*/
            }
            .left{
          
                height: 500px;
                width: 20%;
                margin-top: 10px;
                display: inline-block; /*设置块类元素为行内块*/
                border-style: solid;
                text-align: center;
            }
            .center{
          
                height: 500px;
                width: 79%;
                margin-top: 10px;
                display: inline-block;
                border-style: solid;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="header">header</div>
        <div class="left">left</div>
        <div class="center">center</div>
    </body>
    </html>

## 布局二 ##

![在这里插入图片描述][ad711d913cfc4cbd9666ab50790a1332.png]  
**代码部分**：

## 布局三 ##

![在这里插入图片描述][040735adfbdb41d99b47cc5ec92a0d75.png]  
**代码部分**：

## 布局四 ##

![在这里插入图片描述][c3ed5472da614bb5be7612622bd4e2c4.png]  
**代码部分**：

<!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>
            .border1{
          
                border-style: solid;
                text-align: center;
            }
            .header{
          
                height: 200px;
                width: 100%;
            }
            .left{
          
                width: 23.5%;
                display: inline-block;
            }
            .center{
          
                width: 50%;
                display: inline-block;
            }
            .right{
          
                width: 23.5%;
                display: inline-block;
            }
            .buttom1{
          
                margin-top: 10px;
                margin-bottom: 10px;
                height: 200px;
            }
            .buttom{
          
                height: 200px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="header border1" >header</div>
        <div class="left border1 buttom1">left</div>
        <div class="center border1 buttom1">center</div>
        <div class="right border1 buttom1">right</div>
        <div class="buttom border1">buttom</div>
    </body>
    </html>

[250afccb97e24c408311d647c9e32067.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/886d59b27be84d47b9e7fd653c9a9c32.png
[ad711d913cfc4cbd9666ab50790a1332.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2e3e660cc9c645e5a1129f71f9c5782f.png
[040735adfbdb41d99b47cc5ec92a0d75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8ea32b1f8f7f4dc19c5ca1c044f03aba.png
[c3ed5472da614bb5be7612622bd4e2c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0f3e9fd6ef3e494bafa60efd6f97858f.png