How to implement typesetting layout with HTML+CSS and DIV

This article mainly introduces how to implement typesetting layout in HTML CSS and DIV. It has certain reference value. Now I share it with you. Friends in need can refer to it

HTML CSS div implements typesetting layout

1. A webpage can be seen as consisting of "boxes", as shown in the figure:

As can be seen from the above figure, the page is divided into ( Website navigation), middle, and bottom (copyright statement).
The middle part is divided into left (product classification), middle (main part), and right. These sections are like
boxes. Various contents are placed in the "boxes", and the page is put together from these "boxes"

• Case layout analysis:

Single column layout case:

The code is as follows:

nbsp;html>

    
        <meta>
        <title>单列布局</title>
    
    <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>    
            
        <p>
            </p><p>头部</p>
            <p>主题</p>
            <p>底部</p>
                    
    

Running results:

Double column layout case:

The code is as follows:

nbsp;html>

    
        <meta>
        <title>双列布局</title>
    
    <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>
            
        <p>
            </p><p></p>
            <p></p>
                
    

The running result is as follows:

Three column layout case:

The code is as follows:

nbsp;html>

    
        <meta>
        <title>三列布局</title>
    
    <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>
            
        <p>
            </p><p></p>
            <p></p>
            <p></p>
                    
    

The running result is as shown below:

Mixed layout case:

The code is as follows:

nbsp;html>

    
        <meta>
        <title>混合布局</title>
    
    <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>
            
        <p>
            </p><p></p>
            <p>
                </p><p></p>
                <p></p>
                <p></p>        
            
            <p></p>
            
    

The running result is as shown below :

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Detailed explanation of the front-end method of passing parameters between html pages

html uses table layout to implement user registration form Example

The above is the detailed content of How to implement typesetting layout with HTML+CSS and DIV. For more information, please follow other related articles on the PHP Chinese website!