要求如下:新建一个HTML 文件,以test801.html命名,页面标题为“三栏布局的实现--计网 2001张三(每个人的姓名)”,完成以下的HTML 文本样式的编辑。实验要求及步骤: 整个页面分为三部分:top、content、footer,其中 content 部分又分为左中右三块,top 宽度 380px,高度 50px,颜色红色,文字离上边框距离为 10px; content 宽度 380px,高度为 300px,其中左边宽度为 100px,右边宽度为 225px,颜色绿色,居左3中间宽度 150px,颜色粉色;右边宽度 120px,颜色黄色,居右footer 宽度380px,高度90px,颜色灰色,文字离上边框距离为10px; 整个页面居中对齐,上边外边距为 10px;头部和尾部通栏布局,背景颜色分别为(#ccc、#999)
时间: 2023-07-16 16:16:12 浏览: 45
以下是实现三栏布局的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>三栏布局的实现--计网 2001张三</title>
<style type="text/css">
body{
margin: 10px auto;
width: 760px;
}
#top{
width: 380px;
height: 50px;
background-color: red;
margin-bottom: 10px;
padding-top: 10px;
}
#left{
width: 100px;
height: 300px;
background-color: green;
float: left;
}
#middle{
width: 150px;
height: 300px;
background-color: pink;
float: left;
}
#right{
width: 120px;
height: 300px;
background-color: yellow;
float: right;
}
#footer{
width: 380px;
height: 90px;
background-color: gray;
margin-top: 10px;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="top">这是头部</div>
<div id="left">左边</div>
<div id="middle">中间</div>
<div id="right">右边</div>
<div id="footer">这是底部</div>
</body>
</html>
```
注意事项:
1. 本题要求整个页面居中对齐,上边外边距为10px,因此需要设置body元素的margin属性为"10px auto"。
2. 头部和尾部通栏布局,需要设置宽度为380px。
3. content部分宽度为380px,因此左边、中间、右边三个部分的宽度之和必须为380px。
4. 左边、中间、右边三个部分使用float属性实现左、中、右对齐。