收藏
批改状态：合格
老师批语：
1、三列网站双飞翼布局实现的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼网站布局</title>
<style>
/*设定头部和底部相同的属性（宽度、高度、背景颜色）*/
.header,.footer{
width:100%;
height:60px;
background-color:#999;
}
/*设定头部和底部块内元素相同的属性（宽度、高度、背景颜色，水平和垂直居中）*/
.content{
width: 960px;
height:100%;
background-color: #666;
margin:0 auto;
text-align: center;
line-height: 60px;
}
/*设定中间部分的父级属性（宽度、高度、背景颜色，水平和垂直居中和定位属性）*/
.contaienr{
width:960px;
height: 600px;
background-color:#DFC7EB;
margin:0 auto;
position:relative;
}
/*设定左边部分的属性（宽度、高度、背景颜色，块内元素水平和垂直居中、绝对定位属性）*/
.left{
width:200px;
height: 100%;
background-color: #8BC7EB;
position: absolute;
top:0;
left:0;
text-align: center;
line-height: 600px;
}
/*设定右边部分的属性（宽度、高度、背景颜色，块内元素水平和垂直居中、绝对定位属性）*/
.right{
width:200px;
height: 100%;
background-color: #B9EDA1;
position: absolute;
top:0;
right:0;
text-align: center;
line-height: 600px;
}
/*设定中间主体部分的属性（宽度、高度、背景颜色，块内元素水平和垂直居中）*/
.main{
width:960px;
height: 100%;
background-color: #F5967A;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="contaienr">
<div class="left">左</div>
<div class=main>中</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果如下：
此布局方法说明：
中间主体部分要用一个盒子即父级contaienr包起来，并对它进行相对定位，然后子元素中用绝对定位。
2、圣杯式网站布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列圣杯网站布局</title>
<style>
/*设定头部和底部相同的属性（宽度、高度、背景颜色）*/
.header,.footer{
width:100%;
height:60px;
background-color:#999;
}
/*清除底部浮动*/
.footer{
clear:both;
}
/*设定头部和底部块内元素相同的属性（宽度、高度、背景颜色、居中）*/
.content{
width: 960px;
height:100%;
background-color: #666;
margin:0 auto;
text-align: center;
}
/*设定中间部分的父级属性（宽度、高度、背景颜色，居中、左右边距）*/
.contaienr{
width:560px;
background-color:#DFC7EB;
margin:0 auto;
padding:0 200px;
}
/*设定中间部分的属性（宽度、高度、背景颜色、向左浮动）*/
.main{
width: 100%;
height: 600px;
background-color: #F5967A;
float:left;
}
/*设定左边部分的属性（宽度、高度、背景颜色、向左浮动、相对定位）*/
.left{
width: 200px;
height: 600px;
background-color: #8BC7EB;
float:left;
margin-left: -100%;
position: relative;
left:-200px;
}
/*设定右边部分的属性（宽度、高度、背景颜色、向左浮动、相对定位）*/
.right{
width: 200px;
height: 600px;
background-color: #B9EDA1;
float:left;
margin-left: -200px;
position: relative;
right:-200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="contaienr">
<div class=main>中</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果如下：
此方法和前面说的方法实现了一样的布局效果，只是些方法中用到了浮动，只需将它们分别进行浮动和定位即可实现，要注意的是，必须要对底部清除浮动，否则会错位。中间部分必须先定位
手抄代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
