博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
h5单页面布局
阅读量:6622 次
发布时间:2019-06-25

本文共 904 字,大约阅读时间需要 3 分钟。

前段时间做了一个PC端单页面应用

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

演示:

页面兼容 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;}

转载地址:http://cljpo.baihongyu.com/

你可能感兴趣的文章
LibreOffice 打开中文乱码
查看>>
FromBottomToTop第十三周项目博客
查看>>
Activity的四种启动模式
查看>>
Centos vsftpd服务器搭建
查看>>
【常用工具】常用工具收集
查看>>
Tax
查看>>
网站页面多出&65279出现空白行的原因及解决方法
查看>>
第二阶段团队冲刺站立会议06
查看>>
html
查看>>
本地wampserver如何配置伪静态
查看>>
操作系统面试
查看>>
【转载】支持向量机SVM(一)
查看>>
C#串口通信实例
查看>>
小程序数据返回时刷新当前页面数据
查看>>
MySQL数据故障时备份与恢复
查看>>
Nlopt优化函数库,用法举例
查看>>
海思 core 电压动态调整
查看>>
jFinal 关联数据库操作
查看>>
比特币为什么需要建立在大量运算之上
查看>>
团队冲刺第二天
查看>>