一、问题
在我们刚开始学习网页的时候，我们并不了解一个网页包含哪些部分，不知道网页的基本框架，导致自己写出的网页杂乱无章。今天小编就带大家来了解网页的基本框架。
二、方法
在一个基本的网页布局当中，我们往往是需要这几个基础部分，1.头部 2.导航栏 3.内容部分 4.底部信息部分 ，这四个大部分。现在小编就带大家以此来完成每一个部分:
在body内放入一个div的大盒子作为头部标签，并在head中的style中设置这个盒子的高（由于默认是无色的，我们用粉色来表示）;
接下来在头标签的下面再放一个大盒子作为导航标签，同理在style中设置该盒子的样式（指的是宽和高及颜色）;
在下一步我们在导航标签下放一个大内盒子作为内容盒子，我们可以再盒子里面放一些相应的小盒子放我们需要放入的内容，同理在style中设置这些盒子的样式（包括这些盒子的宽高和颜色）;
在网页的最下面放入一个大盒子div标签作为我们的底部栏，同样设置该盒子的样式；
代码清单 1
Courier New字体，23磅行间距 | <!DOCTYPE html> | <html lang="en"> | <head> | <meta charset="UTF-8"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | <title>Document</title> | <style> | * { | padding: 0; | margin: 0; | } | .top { | background-color: pink; | height: 100px; | } | .top p { | text-align: center; | padding-top:43px; | } | .nav { | height: 200px; | background-color: antiquewhite; | margin-top: 20px; | } | .nav p { | text-align: center; | line-height: 200px; | } | .body { | background-color: aqua; | height: 1000px; | width: 1024px; | margin: auto; | margin-top: 10px; | } | .body .body-1 { | height: 300px; | background-color: aquamarine; | width: 300px; | float: left; | margin: 40px 20px 0 20px; | } | .body .body-2 { | height: 300px; | width: 1024px; | background-color: blueviolet; | float: left; | margin-top: 40px; | } | .body .body-3 { | height: 200px; | width: 450px; | background-color: brown; | float: left; | margin: 50px 40px 0 20px; | } | .foot { | background-color: blue; | height: 100px; | margin-top: 10px; | } | .foot p { | text-align: center; | padding-top: 45px; | } | </style> | </head> | <body> | <div class="top"> | <p>top</p> | </div> | <div class="nav"> | <p>this is nav</p> | </div> | <div class="body"> | <div class="body-1"> | </div> | <div class="body-1"> | </div> | <div class="body-1"> | </div> | <div class="body-2"> | </div> | <div class="body-3"> | </div> | <div class="body-3"> | </div> | </div> | <div class="foot"> | <p>foot</p> | </div> | </body> | </html> |
三、结语
以上就是页网页所需要的基本布局了，其中内容部分，盒子和盒子之间的间距，盒子的边框线等可以根据自己的需要来进行改变。
