下面举了个简单的双飞翼布局，还有运用绝对定位知识点完成的遮盖功能以及用固定定位完成的广告位功能，先看一下双飞翼布局与固定广告位(颜色和布局选择的比较随意)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <link rel="stylesheet" type="text/css" href="css/style00.css"> </head> <body> <!-- 定义头部div --> <div class="header"> <div class="header_content"> <ul class="nav"> <li class="item"><a href="">首页</a></li> <li class="item"><a href="">公司新闻</a></li> <li class="item"><a href="">最新产品</a></li> <li class="item"><a href="">联系我们</a></li> </ul> </div> </div> <!-- 定义主体div --> <div class="container"> <!-- 父级容器包裹起中间主体 --> <div class="body"> <div class="main"> <h3>中间主体</h3> </div> </div> <div class="left"> <h3>左边</h3> </div> <div class="right"> <h3>右边</h3> </div> </div> <!-- 定义尾部div --> <div class="foot"> <div class="foot_content"> <p> <a href="">你好</a> | <a href="">你好</a> | <a href="">你好</a> </p> </div> </div> <!-- 广告位 --> <div class="gg"> <h3>赚钱的好方法</h3> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码如下：
*{margin: 0px;padding: 0px;}
.header{
width: 100%;
/* height: 40px; 由里面的内容挤出来*/
background-color:#ccc;
}
.header_content{
width: 1000px;
height: 40px;
background-color: lightgreen;
margin: 0px auto;
}
.nav{
margin: 0;
padding: 0;
}
.item{
list-style: none;
}
.item a{
text-decoration: none;
float: left;
min-width: 80px;
min-height: 40px;
line-height: 40px;
text-align: center;
color: #444;
padding: 0 15px;
}
.item a:hover{
background-color:#444;
color: #fff;
}
.container{
width: 1000px;
min-height:800px;/*定义最小高度*/
margin: 5px auto;
}
.body{
width:inherit;
min-height:inherit ;
background-color: cyan;
text-align: center;
}
.left{
width:200px;
min-height: 800px;
background-color: pink;
}
.right{
width: 200px;
min-height: 800px;
background-color: darkkhaki;
text-align: right;
}
.body,.left,.right{
float: left;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
/* 浮动完后中间主体内容被遮挡部分，需要调节内边距挤出来 */
.main{
padding: 0 200px;
}
.foot{
width: 100%;
/* height: 40px; 由里面的内容挤出来*/
background-color:#ccc;
}
.foot_content{
width: 1000px;
height: 40px;
background-color: lightgreen;
margin: 0px auto;
}
.foot_content a{
text-decoration: none;
color: #777;
}
.foot_content p{
text-align: center;
line-height: 40px;
}
.foot_content a:hover{
text-decoration: underline;
color: #444;
}
.gg{
width: 200px;
height: 200px;
background-color: #444;
position: fixed;/*固定定位 */
right: 0;
bottom: 0;
}
.gg h3{
text-align: center;
line-height: 200px;
color: red;
}遮盖功能：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遮盖</title> <link rel="stylesheet" href="css/style01.css"> </head> <body> <div class="shadow"></div> <div class="login" ><img src="image/login.jpg" alt=""></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
*{margin: 0px;right: 0px;}
body{
background-image: url(../image/php.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.shadow{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login{
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -230px;
}
.login img{
width: 380px;
height: 460px;
}总结：
1、在布局不理想或出错的时候，可能不是css编写错了，可能是页面中的双标签元素嵌套出现了问题
2、嵌套在里面的元素不能使用margin
