一、问题' W4 p: Z! ?* U: a4 C8 I
在我们刚开始学习网页的时候，我们并不了解一个网页包含哪些部分，不知道网页的基本框架，导致自己写出的网页杂乱无章。
! I1 W' X- i9 T- g q5 l3 B/ g二、方法" a/ }* A1 p2 U9 u2 F9 w8 Y
在一个基本的网页布局当中，我们往往是需要这几个基础部分，1.头部 2.导航栏 3.内容部分 4.底部信息部分 ，这四个大部分。
& k+ h* C _. z9 D% f 在body内放入一个div的大盒子作为头部标签，并在head中的style中设置这个盒子的高（由于默认是无色的，我们用粉色来表示）;接下来在头标签的下面再放一个大盒子作为导航标签，同理在style中设置该盒子的样式（指的是宽和高及颜色）;在下一步我们在导航标签下放一个大内盒子作为内容盒子，我们可以再盒子里面放一些相应的小盒子放我们需要放入的内容，同理在style中设置这些盒子的样式（包括这些盒子的宽高和颜色）;在网页的最下面放入一个大盒子div标签作为我们的底部栏，同样设置该盒子的样式。7 e! V: A* F: D
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>
三、结语
7 W B+ h2 m* J& i3 _; A 以上就是页网页所需要的基本布局了，其中内容部分，盒子和盒子之间的间距，盒子的边框线等可以根据自己的需要来进行改变。 | 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2022-5-15 22:12:15