一、问题
, x; N Z4 x4 l m% K 在我们刚开始学习网页的时候,我们并不了解一个网页包含哪些部分,不知道网页的基本框架,导致自己写出的网页杂乱无章。
4 T2 ?' B+ j$ J2 U- i( T, U二、方法
0 m" T9 T: f+ H- f: v9 l 在一个基本的网页布局当中,我们往往是需要这几个基础部分,1.头部 2.导航栏 3.内容部分 4.底部信息部分 ,这四个大部分。
L! p y* n6 {6 @6 u 在body内放入一个div的大盒子作为头部标签,并在head中的style中设置这个盒子的高(由于默认是无色的,我们用粉色来表示);接下来在头标签的下面再放一个大盒子作为导航标签,同理在style中设置该盒子的样式(指的是宽和高及颜色);在下一步我们在导航标签下放一个大内盒子作为内容盒子,我们可以再盒子里面放一些相应的小盒子放我们需要放入的内容,同理在style中设置这些盒子的样式(包括这些盒子的宽高和颜色);在网页的最下面放入一个大盒子div标签作为我们的底部栏,同样设置该盒子的样式。
E0 I9 |- }* e+ A
- 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>
三、结语
2 Y* A) D x. H) T+ _% g# M# m 以上就是页网页所需要的基本布局了,其中内容部分,盒子和盒子之间的间距,盒子的边框线等可以根据自己的需要来进行改变。 |