前段时间做了一个PC端单页面应用 GitHub
因为项目开始的比较仓促，加上本人前端经验特别少，虽然项目大体完成了，但是页面布局确成立它的硬伤...为了填补心里落差，专门做了一个h5的单页面布局，代码很简单，大牛请绕过。
演示：Demo-Oline
页面兼容 IE11/Chrome/FireFox(IE10以下未测试)
随浏览器大小自动缩放，不会出现可恶的滚动条
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5-page-layout</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<header>header</header>
<section>
<div class="left-menu">left-menu</div>
<div class="right-content">right-content</div>
</section>
<footer>footer</footer>
</body>
</html>layout.css
@charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
height: 100%;
color: white;
}
header {
height: 10%;
border-bottom: 1px solid gray;
box-sizing: border-box;
background: #409EFF;
}
section {
height: 70%;
box-sizing: border-box;
}
.left-menu {
width: 10%;
height: 100%;
background: #67C23A;
border-right: 1px solid gray;
box-sizing: border-box;
float: left;
}
.right-content {
width: 90%;
height: 100%;
float: left;
background: #E6A23C;
}
footer {
height: 20%;
border-top: 1px solid gray;
box-sizing: border-box;
background: #F56C6C;
}原文地址：https://www.cnblogs.com/baimeishaoxia/p/12056454.html
时间： 2024-10-10 06:01:45