页面布局
1.不建议方法
<style>
* {
padding: 0;
margin: 0;
}
.top {
position: fixed;
height: 80px;
right: 0;
left: 0;
top: 0;
background-color: pink;
}
.main {
margin-top: 80px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
</div>
</body>
</html>
2.上中下结构
<style>
.top {
position: absolute;
height: 70px;
top: 0;
left: 0;
right: 0;
background-color: pink;
}
.main {
position: absolute;
top: 70px;
bottom: 80px;
right: 0;
left: 0;
overflow: auto;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: skyblue;
}
</style>
3. top main结构
<style>
.top {
position: absolute;
height: 80px;
top: 0;
left: 0;
right: 0;
background-color: pink;
}
.main {
position: absolute;
top: 80px;
left: 0;
right: 0;
overflow: auto;
}
</style>
4.main bottom
<style>
.main {
overflow: auto;
position: absolute;
bottom: 80px;
top: 0;
left: 0;
right: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: skyblue;
}
</style>
5.全屏结构
<style>
.main {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
本文探讨了五种不同的页面布局方法：不建议的全局样式重置、上中下结构、topmain结构、mainbottom结构以及全屏结构。每种方法都有其特点，例如固定顶部的导航栏、自适应内容区域以及底部固定元素。通过实例代码展示了如何实现这些布局，为前端开发者提供了布局选择的参考。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
