masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > HTML+CSS和DIV如何实现排版布局

HTML+CSS和DIV如何实现排版布局

不言
Lepaskan： 2018-07-13 16:16:12
asal
9345 orang telah melayarinya

这篇文章主要介绍了关于HTML+CSS和DIV如何实现排版布局，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

HTML CSS + div实现排版布局

1.网页可以看成是由一个一个“盒子”组成，如图：

496770612-5b46ce6edc7b8_articlex[1].jpg

由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

  • 案例布局分析：

1376923543-5b46cf378eab4_articlex[1].jpg

单列布局案例：

代码如下：
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>单列布局</title>
    </head>
    <style>
        body{
            margin:0;
        }
        .box{
            width:960px;
            margin:0 auto;
        }
        .box .header{
            height:120px;
            border:1px solid #f00;
            line-height:120px;
        }
        .box .main{
            height:300px;
            border:1px solid #0f0;
            line-height:300px;
        }
        .box .footer{
            height:100px;
            border:1px solid #00f;
            line-height:100px;
        }
        p{
            text-align:center;
        }
    </style>    
    <body>        
        <p class="box">
            <p class="header">头部</p>
            <p class="main">主题</p>
            <p class="footer">底部</p>
        </p>            
    </body>
</html>
Salin selepas log masuk
运行结果：

4125081848-5b46d0aebc53f_articlex[1].png

双列布局案例：

代码如下：
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>双列布局</title>
    </head>
    <style>
        body{
        margin:0;
        }
        .box{
            width:80%;
            margin:0 auto;
            overflow:hidden;
        }
        .box .left{
            width:30%;
            height:400px;
            background-color:#0f0;
            float:left;
        }
        .box .right{
            width:70%;
            height:400px;
            background-color:#f00;
            float:left;
        }
    </style>
    <body>        
        <p class="box">
            <p class="left"></p>
            <p class="right"></p>
        </p>        
    </body>
</html>
Salin selepas log masuk
运行结果如下图：

644704244-5b46d3b9c6eac_articlex[1].png

三列布局案例：

代码如下：
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>三列布局</title>
    </head>
    <style>
    body{
        margin:0;
    }
    .box{
        width:960px;
        margin:0 auto;
        position:relative;
    }
    .box .left{
        width:200px;
        height:400px;
        background-color:#0f0;
        position:absolute;
    }
    .box .center{
        height:400px;
        background-color:#00f;
        margin:0 300px 0 200px;
    }
    .box .right{
        width:300px;
        height:400px;
        background-color:#f00;
        position:absolute;
        right:0;
        top:0;
    }
    </style>
    <body>        
        <p class="box">
            <p class="left"></p>
            <p class="center"></p>
            <p class="right"></p>
        </p>            
    </body>
</html>
Salin selepas log masuk
运行结果如下图：

301091421-5b46d50ad43e5_articlex[1].png

混合布局案例：

代码如下：
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>混合布局</title>
    </head>
    <style>
    body{
        margin:0;
    }
    .box{
        width:960px;
        margin:0 auto;
    }
    .header{
        height:120px;
        background-color:#ddd;    
    }
    .main{
        height:400px;
        background-color:#f00;
        position:relative;
    }

    .main .left{
        width:200px;
        height:400px;
        position:absolute;
        left:0;
        top:0;
        background-color:#0fccaa;
    }
    .main .center{
        height:400px;
        margin:0 305px 0 205px;
        background-color:#123456;
    }

    .main .right{
        width:300px;
        height:400px;
        position:absolute;
        right:0;
        top:0;
        background-color:#ff0;
    }
    .footer{
        height:80px;
        background-color:#ddd;
    }
    </style>
    <body>        
        <p class="box">
            <p class="header"></p>
            <p class="main">
                <p class="left"></p>
                <p class="center"></p>
                <p class="right"></p>        
            </p>
            <p class="footer"></p>
        </p>    
    </body>
</html>
Salin selepas log masuk
运行结果如下图：

2619066118-5b46d5e7b3d8f_articlex[1].png

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

详解前端在html页面之间传递参数的方法

Atas ialah kandungan terperinci HTML+CSS和DIV如何实现排版布局. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css html php
sumber：php.cn
Artikel sebelumnya：如何用canvas实现在线签名的示例代码 Artikel seterusnya：如何使用html中table实现td边框的效果（代码）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tatasusunan PHP yang diperoleh daripada parameter URL tidak berkelakuan seperti yang diharapkan Saya mempunyai parameter URL yang mengandungi id kategori dan saya mahu menganggapnya seba...
daripada 2024-04-06 22:09:02
0
1
1428
Di mana saya harus meletakkan arahan CustomLog dalam apache Saya menggunakan php:7.2-apachedocker. Saya perlu melumpuhkan log akses log masuk url sema...
daripada 2024-04-06 22:03:59
0
1
990
Apakah format pembolehubah dalam nilai pulangan? Saya seorang pelajar baru php. Saya menjumpai sekeping kod: if($x<time()){return[false,...
daripada 2024-04-06 21:55:20
0
1
778
Masalah yang dihadapi apabila menggunakan opentbs untuk menjana fail odt: nilai kunci yang sama dipaparkan dalam baris yang sama dan bukannya lajur yang berasingan. Saya menggunakan perpustakaan yang dipanggil OpenTbs untuk mencipta odt menggunakan PHP, s...
daripada 2024-04-06 20:18:18
0
1
483
Kumpulkan hasil MySQL mengikut ID untuk menggelung Saya mempunyai jadual dengan data penerbangan dalam mysql. Saya sedang menulis kod php yan...
daripada 2024-04-06 17:27:56
0
1
406
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan