知识总结：
今天主要学习了实现页面的双飞燕结构的几种方法：
1、BFC实现左右两侧固定中间自适应(双飞翼布局)
.box{
width:100%;
height:100%;
background:purple;
}
.left{
width:200px;
height:100%;
float:left;
background:pink;
}
.center{
height:100%;
background:green;
overflow:hidden;
}
.right{
width:200px;
height:100%;
float:right;
background:#dd0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
2、用padding实现双飞燕效果：
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
width:100%;
height:100%;
background:purple;
}
.left{
width:200px;
height:100%;
background:pink;
float:left;
}
.right{
width:200px;
height:100%;
background:#dd0;
float:right;
}
/* 中间的板块 */
.center{
height:100%;
background:red;
/* 用padding 把center的子元素挤到中间 */
padding:0 200px;
}
.center-con{
height:100%;
background:#ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div class="center-con"></div>
</div>
3、用margin实现双飞燕效果：
*{
margin:0;
padding:0;
}
body,html{
height:100%;
}
.box{
width:100%;
height:100%;
background:grey;
}
.left{
width:200px;
height:90%;
background:pink;
float:left;
}
.right{
width:200px;
height:90%;
background:blue;
float:right;
}
.center{
height: 100%;
background:#dd0;
margin:0 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
今天还练习了psd页面，对于页面的布局有了更深一层的理解，希望自己能够继续加油！
2629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
