Quelles sont les techniques de mise en page des pages HTML ?-tutoriel HTML-php.cn

Quelles sont les techniques de mise en page des pages HTML ?

青灯夜游

Libérer： 2021-12-03 11:13:37

original

10594 Les gens l'ont consulté

La technologie de mise en page HTML comprend : 1. Technologie de mise en page flottante, relativement compatible, mais elle affectera la mise en page lorsque la largeur de la page n'est pas suffisante ; 2. Technologie de mise en page à positionnement absolu 3. Technologie de mise en page élastique flexible, bonne adaptabilité et hauteur ; peut être automatiquement étendu ; 4. technologie de disposition de table-cellule ; 5. technologie de disposition de grille.

Quelles sont les techniques de mise en page des pages HTML ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Technologie de mise en page HTML

1. Technologie de mise en page flottante

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>浮动布局</title>
    <style type="text/css">
      .wrap1 div{
            min-height: 200px;
        }
        .wrap1 .left{
            float: left;
            width: 300px;
            background: red;
        }
        .wrap1 .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .wrap1 .center{
            background: pink;
        }  

    </style>
</head>
<body>

    <div class="wrap1">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            浮动布局
        </div>  
    </div>
    
</body>
</html>

Copier après la connexion

La mise en page flottante a une meilleure compatibilité, mais le flottement a plus d'impact Lorsque la largeur de la page n'est pas suffisante, cela affectera la mise en page.

2. Technologie de mise en page de positionnement absolu

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>绝对定位布局</title>
    <style type="text/css">
      .wrap2 div{
            position: absolute;
            min-height: 200px;
        }
        .wrap2 .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .wrap2 .right{
            right: 0;
            width: 300px;
            background: blue;
        }
        .wrap2 .center{
            left: 300px;
            right: 300px;
            background: pink;
        } 

    </style>
</head>
<body>

    <div class="wrap2 wrap">
        <div class="left"></div>
        <div class="center">
            绝对定位布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

Copier après la connexion

La mise en page de positionnement absolu est rapide, mais l'efficacité est relativement faible car elle est séparée du flux de documents.

Troisième technologie de disposition élastique flexible

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>flex布局</title>
    <style type="text/css">
      .wrap3{
            display: flex;
            min-height: 200px;
        }
        .wrap3 .left{            
            flex-basis: 300px;
            background: red;
        }
        .wrap3 .right{            
            flex-basis: 300px;
            background: blue;
        }
        .wrap3 .center{
            flex: 1;
            background: pink;
        }

    </style>
</head>
<body>

    <div class="wrap3 wrap">
        <div class="left"></div>
        <div class="center">
            flex布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

Copier après la connexion

Bonne adaptabilité, la hauteur peut être automatiquement étendue

Quatrièmement, technologie de disposition de table à cellules de table

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>table-cell表格布局</title>
    <style type="text/css">
      .wrap4{
            display: table;
            width: 100%;
            height: 200px;
        }
        .wrap4>div{
            display: table-cell;
        }
        .wrap4 .left{           
            width: 300px;
            background: red;
        }
        .wrap4 .right{          
            width: 300px;
            background: blue;
        }
        .wrap4 .center{
            background: pink;
        }

    </style>
</head>
<body>

    <div class="wrap4 wrap">
        <div class="left"></div>
        <div class="center">
            表格布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

Copier après la connexion

Bonne compatibilité, mais parfois la hauteur ne peut pas être fixée car elle le fera Boosté par le contenu.

5. Technologie de mise en page de grille

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>网格布局</title>
    <style type="text/css">
      .wrap5{
            display: grid;
            width: 100%;
            grid-template-rows: 200px;
            grid-template-columns: 300px auto 300px;
        }
        .wrap5 .left{   
            background: red;
        }
        .wrap5 .right{  
            background: blue;
        }
        .wrap5 .center{
            background: pink;
        }

    </style>
</head>
<body>

    <div class="wrap5 wrap">
        <div class="left"></div>
        <div class="center">
            网格布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

Copier après la connexion

Tutoriels recommandés : Tutoriel vidéo HTML, Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!