要开发一个后台管理框架，要求如下效果。

然后开始找各种弹性布局啊什么的，用了flex写了一个，但是觉得不好，首先是兼容，其次它会破坏掉里面子元素的一些css特性，为了不给自己找麻烦我还是用传统写法吧。

上面这个效果是我实现的，但是有一个小bug就是左边侧边栏收起的时候会有和中间大盒子间产生一个灰色的空间带。不美。于是我又写了下面这个无缝贴合的。

代码原理我就不解释了，上班时间写博客本身就违规了，哈哈，主要是怕自己忘了，mark一下。

源代码在这里下载：点我呀 password： hdmw

html5弹性布局两则，有交互。的更多相关文章

  1. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

  2. 使用em为单位制作两列弹性布局

    一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布 ...

  3. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  4. css3 FlexBox 弹性布局

    Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...

  5. CSS3中的弹性布局——"em"的用法

    使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”.主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从 ...

  6. 弹性布局flex-兼容问题

    这里弹性布局的用法就不说了 用过的都知道很方便 虽然现在弹性布局已经实现标准了 但是还是存在一些兼容问题 旧版本 (一些低版本的浏览器) display:-webkit-box; 新版本(目前的标准版 ...

  7. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  8. 基于淘宝弹性布局方案lib-flexible的问题研究

    上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...

  9. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 洛谷P1062 数列

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  2. redis 配置和使用(C++)

    一.Redis简介: Redis为非关系型数据库,Redis是一个Key-Value存储系统.它支持存储的value类型有:string(字符串),list(链表), set(无序集合),zset(s ...

  3. IIS最大并发连接数

    最大并发连接数 = 队列长度 + 工作线程数 [工作线程数] IIS实际可以第一时间处理的请求数.比如,工作线程数 = 100,一万个连接请求同时涌过来,那么只有100个可以被处理,其余9900个进入 ...

  4. zlib解压缩gzip

    zlib是个著名的开源解压缩库,gzip是一种压缩文件格式. zlib可以压缩原始数据并输出gzip文件,gzip文件中除了压缩数据外,还有描述这些数据的文件头,所以当原始数据较小时,会出现zlib的 ...

  5. table行拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. NOIP模拟赛13

    期望得分:100+0+100=200 实际得分:100+5+100=205 T1 空间卡到30M.. n<=2.5*1e7 若x是整除区间[1,n]每个数的最小的数,那么对[1,n]每个数分解质 ...

  7. spring bean初始化及销毁你必须要掌握的回调方法

    spring bean在初始化和销毁的时候我们可以触发一些自定义的回调操作. 初始化的时候实现的方法 1.通过java提供的@PostConstruct注解: 2.通过实现spring提供的Initi ...

  8. Vue修改mint-ui默认样式（默认风格）

    加入my-mint.css 我这里用的postcss的变量定义,如果亲们用的是其他预处理器,要改成其他处理器的定义方式 覆盖mint-ui的primary颜色,改为自己UI的主题色 --main-co ...

  9. Hbuilder连接第3方模拟器(夜神)

    http://www.bcty365.com/content-146-5148-1.html

  10. 深入理解Spring系列之十：DispatcherServlet请求分发源码分析

    转载 https://mp.weixin.qq.com/s/-kEjAeQFBYIGb0zRpST4UQ DispatcherServlet是SpringMVC的核心分发器,它实现了请求分发,是处理请 ...