HTML和CSS示例（三）——网页布局I
网页布局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 © 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规定了高度和宽度，以及灰色实线边框。
上述源代码生成的页面效果如下：
