网页布局I

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>无标题文档</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#container {
  width: 600px;
  margin: 0 auto;
  border:1px solid gray;
}
#header {
  padding:0.5em;
  height: 40px;
  color:white;
  background-color:gray;
}
#main {
  height: 300px;
}
#left {
  width: 150px;
  height: 300px;
  float: left;
  border-right:1px solid gray;
}
#right {
  width: 150px;
  height: 300px;
  float: right;
  border-left:1px solid gray;
}
#content {
  height: 300px;
}
#footer {
  padding:0.5em;
  color:white;
  background-color:gray;
  clear: both;
}
</style>
</head>
<body>
<div id="container">
  <div id="header"><h1>W3School.com.cn</h1></div>
  <div id="main">
    <div id="left"><p>111</p></div>
    <div id="right"><p>222</p></div>
    <div id="content"><p>333</p></div>
  </div>
//footer元素一般用于法律声明
  <div id="footer">Copyright &copy; 2019 Lei. All Rights Reserved</div>
</div>
</body>
</html>

首先看html代码部分：
①有一个装着页面所有内容的盒子：div id = “container”;，盒子container内包括三个盒子：header、main、footer，也正是这三个盒子组成了最终的页面内容。

②盒子header位于页面内容的开头部分，一般内容是标题，所以这里也使用了标题字的标签h1。

③盒子footer位于页面内容的尾部，这个元素的内容一般用于申明法律声明与版权内容。

④盒子main在header和footer之间，也就是页面的正中间，所谓的“C位”，当然是用来放正文和主要内容的。在这里main盒子里又分成了三个盒子，每个盒子占了一部分，这里盒子的排列方式是由css决定的。

CSS样式部分：
①* {
margin: 0;
padding: 0;
}
*表示页面的所有元素的内边距和外边距都为0。

②#header {
padding:0.5em;
height: 40px;
color:white;
background-color:gray;
}
color表示字体颜色为白色，header盒子背景颜***ackground-color为灰色，规定了盒子的高度为40px。

③#footer {
padding:0.5em;
color:white;
background-color:gray;
clear: both;
}
color表示字体颜色为白色，header盒子背景颜***ackground-color为灰***r>clear:both表示清除左右两侧的浮动。

④剩下的left、right、content规定了高度和宽度，以及灰色实线边框。

上述源代码生成的页面效果如下：
在这里插入图片描述