一、问题

在我们刚开始学习网页的时候，我们并不了解一个网页包含哪些部分，不知道网页的基本框架，导致自己写出的网页杂乱无章。今天小编就带大家来了解网页的基本框架。

二、方法

在一个基本的网页布局当中，我们往往是需要这几个基础部分，1.头部 2.导航栏  3.内容部分  4.底部信息部分 ，这四个大部分。现在小编就带大家以此来完成每一个部分:

  1. 在body内放入一个div的大盒子作为头部标签，并在head中的style中设置这个盒子的高（由于默认是无色的，我们用粉色来表示）;
  2. 接下来在头标签的下面再放一个大盒子作为导航标签，同理在style中设置该盒子的样式（指的是宽和高及颜色）;
  3. 在下一步我们在导航标签下放一个大内盒子作为内容盒子，我们可以再盒子里面放一些相应的小盒子放我们需要放入的内容，同理在style中设置这些盒子的样式（包括这些盒子的宽高和颜色）;
  4. 在网页的最下面放入一个大盒子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>

三、结语

以上就是页网页所需要的基本布局了，其中内容部分，盒子和盒子之间的间距，盒子的边框线等可以根据自己的需要来进行改变。

​

作者：谭奇

主编：欧洋