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

互联网 18-7-13

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

HTML CSS + div实现排版布局

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

案例布局分析：

单列布局案例：

代码如下：

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

运行结果：

双列布局案例：

代码如下：

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

运行结果如下图：

三列布局案例：

代码如下：

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

运行结果如下图：

混合布局案例：

代码如下：

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