要求如下:新建一个HTML 文件,以test801.html命名,页面标题为“三栏布局的实现--计网 2001张三(每个人的姓名)”。实验要求及步骤: 整个页面分为三部分:top、content、footer,其中 content 部分又分为左中右三块,top 宽度 380px,高度 50px,颜色红色,文字离上边框距离为 10px; content 宽度 380px,高度为 300px,其中左边宽度为 120px,颜色绿色,居左,中间宽度 120px,颜色粉色;右边宽度 120px,颜色黄色,居右,footer 宽度380px,高度90px,居下,颜色灰色,文字离上边框距离为10px; 整个页面居中对齐,上边外边距为 10px;头部和尾部通栏布局,背景颜色分别为(#ccc、#999)
时间: 2023-09-03 16:10:56 浏览: 198
```html
<!DOCTYPE html>
<html>
<head>
<title>三栏布局的实现--计网 2001张三</title>
<style type="text/css">
body {
margin: 10px auto;
width: 760px;
background-color: #fff;
font-family: Arial, sans-serif;
}
#top {
width: 380px;
height: 50px;
background-color: #f00;
margin-bottom: 10px;
padding-top: 10px;
text-align: center;
color: #fff;
}
#content {
width: 380px;
height: 300px;
margin-bottom: 10px;
overflow: hidden;
}
#left {
float: left;
width: 120px;
height: 300px;
background-color: #0f0;
text-align: left;
}
#center {
float: left;
width: 120px;
height: 300px;
background-color: #f0f;
text-align: center;
}
#right {
float: right;
width: 120px;
height: 300px;
background-color: #ff0;
text-align: right;
}
#footer {
width: 380px;
height: 90px;
background-color: #ccc;
clear: both;
padding-top: 10px;
text-align: center;
color: #000;
}
</style>
</head>
<body>
<div id="top">这里是头部</div>
<div id="content">
<div id="left">左边内容</div>
<div id="center">中间内容</div>
<div id="right">右边内容</div>
</div>
<div id="footer">这里是尾部</div>
</body>
</html>
```
阅读全文