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

然后开始找各种弹性布局啊什么的，用了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. HDU 6206 青岛网络赛1001 高精度 简单几何

    给出的数据1e12规模,常规判点是否在圆范围内肯定要用到半径,求得过程中无法避免溢出,因此用JAVA自带的浮点大数运算,和个ZZ一样比赛中eclipse出现问题,而且太久没写JAVA语法都不清楚变量忘 ...

  2. spring boot(一)：入门

    Spring Boot的优点 Spring Boot 是伴随着 Spring 4.0 诞生的,从字面理解,Boot是引导的意思,因此 Spring Boot 旨在帮助开发者快速搭建 Spring 框架 ...

  3. JSON 为王，为什么 XML 会慢慢淡出人们的视野？

    目前全球信息基础设施的特点是,拥有大量的数据交换格式.这一点也不奇怪.互联网几乎已经老了,而“物联网”及“大数据”正从概念走进现实.但我仍然相信,在这一领域还有一股较强的历史趋势,推动 JSON 数据 ...

  4. WPF:ComboBox使用XmlDataProvider做级联

    程序功能: 使用ComboBox做级联,数据源为XML文件,适合小数据量呈现 程序代码: <Window x:Class="WpfApplication1.LayouTest" ...

  5. 【BZOJ】3572: [Hnoi2014]世界树 虚树+倍增

    [题意]给定n个点的树,m次询问,每次给定ki个特殊点,一个点会被最近的特殊点控制,询问每个特殊点控制多少点.n,m,Σki<=300000. [算法]虚树+倍增 [题解]★参考:thy_asd ...

  6. flume监控一个linux指定的一个文件夹的文件信息

    1.编辑一个配置文件 flume-app.conf  拷贝至fulme的安装目录的conf下 # The configuration file needs to define the sources, ...

  7. 【洛谷 P4166】 [SCOI2007]最大土地面积（凸包，旋转卡壳）

    题目链接 又调了我两个多小时巨亏 直接\(O(n^4)\)枚举4个点显然不行. 数据范围提示我们需要一个\(O(n^2)\)的算法. 于是\(O(n^2)\)枚举对角线,然后在这两个点两边各找一个点使 ...

  8. 2017中国大学生程序设计竞赛 - 网络选拔赛 1003 HDU 6152 Friend-Graph （模拟）

    题目链接 Problem Description It is well known that small groups are not conducive of the development of ...

  9. 22、WebDriver

    什么是WebDriver?1.Webdriver(Selenium2)是一种用于Web应用程序的自动测试工具:2.它提供了一套友好的API:3.Webdriver完全就是一套类库,不依赖任何测试框架, ...

  10. pythonif语句和循环语句

    1.if语句用法 # if语句用法(缩进相同的成为一个代码块) score=90 if score>=60: print("合格") print("OK" ...