Apakah teknik susun atur untuk halaman html?-html tutorial-php.cn

Apakah teknik susun atur untuk halaman html?

青灯夜游

Lepaskan： 2021-12-03 11:13:37

asal

10563 orang telah melayarinya

Teknologi susun atur HTML termasuk: 1. Teknologi susun atur terapung, agak serasi, tetapi ia akan menjejaskan reka letak apabila lebar halaman tidak mencukupi 2. Teknologi susun atur kedudukan mutlak 3. Teknologi susun atur elastik yang fleksibel; dan berprestasi tinggi Pengembangan automatik; 4. teknologi susun atur meja sel;

Apakah teknik susun atur untuk halaman html?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Teknologi reka letak halaman HTML

1. keserasian reka letak agak baik, tetapi terapung mempunyai lebih banyak impak Apabila lebar halaman tidak mencukupi, ia akan menjejaskan reka letak.

<!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>

Salin selepas log masuk

2. Teknologi susun atur kedudukan mutlak

Susun letak kedudukan mutlak adalah pantas, tetapi keberkesanannya agak lemah kerana ia dipisahkan daripada aliran dokumen.

<!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>

Salin selepas log masuk

3. Teknologi reka letak anjal fleksibel

Kebolehsuaian yang baik, ketinggian boleh dikembangkan secara automatik

<!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>

Salin selepas log masuk

4 Teknologi susun atur meja

mempunyai keserasian yang baik, tetapi kadangkala ketinggian tidak boleh diperbaiki kerana ia akan ditahan oleh kandungan.

<!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>

Salin selepas log masuk

5. Teknologi reka letak grid

Tutorial yang disyorkan: tutorial video html

<!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>

Salin selepas log masuk

tutorial video css

Atas ialah kandungan terperinci Apakah teknik susun atur untuk halaman html?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!