正文

h5单页面布局

IP云
IP云V管理员/3 阅读
09/05
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前段时间做了一个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;
}