块级元素<div>，用于组合其他HTML元素的容器
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h1>页面左边区域</h1>
</div>
<div class="middle">
<h1>页面中间区域</h1>
</div>
<div class="foot">
<h1>页面底部区域</h1>
</div>
CSS层叠样式表：表现形式如字体大小、背景颜色、布局等
1.直接将样式<style></style>放入HTML的头标签<head></head>之中
<style>
.head{
background-color: blue;
color: white;
text-align: center;
padding: 5px;
}
.left{
line-height: 30px;
background-color: #eeeeee;
color: black;
height: 300px;
width: 100px;
float: left;
text-align: center;
padding: 5px;
}
.middle{
background-color: yellow;
width: 350px;
color: white;
text-align: center;
padding: 5px;
}
.head{
background-color: blue;
color: white;
text-align: center;
padding: 5px;
}
</style>
2.引入样式，并将引入的代码放入HTML的头标签<head></head>之中
<link rel="stylesheet" type="text/css" href="1.css">
并新建一个名为“1.css”的文件，代码内容如下
.head{
background-color: pink;
color: black;
text-align: center;
padding: 5px;
}
.left{
line-height: 30px;
background-color: #eeeeee;
color: black;
height: 300px;
width: 100px;
float: left;
text-align: center;
padding: 5px;
}
.middle{
background-color: yellow;
width: 350px;
color: white;
text-align: center;
padding: 5px;
}
.foot{
background-color: blue;
color: white;
text-align: center;
padding: 5px;
}
