网页布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/u010200033/article/details/79768004

---------X轴可带滚动条三段身布局------------------------------

*{margin: 0; padding: 0;}

html,body{width: 100%;height: 100%;}
.header{width: 100%; height: 80px; border: solid 1px #ccc;margin:0;}
.body>.nav{width: 200px; position:absolute;top:80px;left: 0;bottom:0;}

.body>.homeCont{position:absolute;top:80px;left: 200px;bottom:0;right: 0;overflow:auto;}

---------两列布局--------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 100%;height: 500px;
}
.left{
width: 100px;height: 100%;float:left;background-color: skyblue;
}
.right{

width:100%;height: 100%;background-color:red;

//margin-left:120px;

}

</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>

</html>

------------------------三列布局--------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;padding: 0;
}
.box{
width: 100%;height: 500px;
}
.left{
width: 100px;height: 100%;float:left;background-color: skyblue;
}
.right{
width: 100px;height: 100%;float:right;background-color: skyblue;
}
.main{
height: 100%; background-color: red;margin:0 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div> //注意中间盒子放最后
</div>
</body>
</html>

经典左右布局的样式