h5单页面布局

wzyplus 发布于2019-08-29 14:12 / 520人阅读

摘要：前段时间做了一个端单页面应用因为项目开始的比较仓促，加上本人前端经验特别少，虽然项目大体完成了，但是页面布局确成立它的硬伤为了填补心里落差，专门做了一个的单页面布局，代码很简单，大牛请绕过。

前段时间做了一个PC端单页面应用 GitHub
因为项目开始的比较仓促，加上本人前端经验特别少，虽然项目大体完成了，但是页面布局确成立它的硬伤...为了填补心里落差，专门做了一个h5的单页面布局，代码很简单，大牛请绕过。

演示：Demo-Oline

页面兼容 IE11/Chrome/FireFox(IE10以下未测试)
随浏览器大小自动缩放，不会出现可恶的滚动条

index.html




    
    h5-page-layout
    


  
  header
  
  
    left-menu
    right-content
  
  
  footer

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;
}

云服务器 GPU云服务器页面布局单页面单页面应用 h5页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112982.html

h5单页面布局

摘要：前段时间做了一个端单页面应用因为项目开始的比较仓促，加上本人前端经验特别少，虽然项目大体完成了，但是页面布局确成立它的硬伤为了填补心里落差，专门做了一个的单页面布局，代码很简单，大牛请绕过。前段时间做了一个PC端单页面应用 GitHub因为项目开始的比较仓促，加上本人前端经验特别少，虽然项目大体完成了，但是页面布局确成立它的硬伤...为了填补心里落差，专门做了一个h5的单页面布局，代...

TigerChain 2019-08-01 18:22 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0