2019-7-1 16:02:25 星期一

实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去

 <!DOCTYPE HTML>

 <html lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>无标题文档</title>

     <style>

         #tl {

             width: 240px;

             overflow: hidden;

             position: absolute;/*这里一定要设置*/

             z-index: 500;

             margin-top: 0;

             margin-left: -200px;

             -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */

             -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/

             -o-transition: .5s ease-in-out;

             background-color: gray;

         }

     </style>

 </head>

 <body>

 <script>

 function sider()

 {

     var a = document.getElementById('tl');

     if (a.style['margin-left'] == '0px') {

         a.style['margin-left'] = '-200px';

     } else {

         a.style['margin-left'] = '0px';

     }

 }

 </script>

 <div id="tl" onclick="sider();">

     <div class="in">

         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

         <div class="in">

             bbbbbb1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

         </div>

         <div class="in">

             bbbbb2

         </div>

         <div class="in">

             bbbbb3

         </div>

     </div>

 </div>

 <div>

 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

 </div>

 </body>

 </html>

html css 浮层 侧边栏的更多相关文章

  1. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  3. CSS之侧边栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS实现侧边栏固定宽度，内容栏自适应

    1,固定宽度区浮动,自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下: #wrap {    overflow: hidden; *zoom: 1;  }  #c ...

  5. 知乎布局||offsetTop||侧边栏自动等高

    1.对a标签的详细介绍 直接在a标签使用onclick,怎么去除a的默认链接,onclick="return test()" 注意这里的return 不可舍去,test函数可以直接 ...

  6. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  7. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  8. CSS之上边栏

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

  9. 1210 BBS admin后台管理及侧边栏筛选个人站点

    目录 昨日内容 django admin后台管理 使用 建表 用户图片的显示 MEDIA用户配置 查找照片 搭建个人站点 防盗链 新建css文件 侧边栏展示标签 定义分类栏与标签栏 定义时间栏 侧边栏 ...

随机推荐

  1. angular8中 如何引入两个echarts版本

    下载echarts2和echarts4的源码,然后在index.html中 1.先引入echarts4版本 2.然后引入echarts2版本 并且将echarts2源码中所有echarts 替换为ec ...

  2. K8S概念理解参考

  3. LoarRunner脚本录制-Port Mapping

    使用LR录制脚本时经常会因为内外网访问限制,或浏览器兼容等问题,导致无法正常录制脚本. 这里简单介绍一下使用LR端口映射的方式进行脚本录制,与之前介绍的<Jmeter脚本录制--HTTP代理服务 ...

  4. 洛谷P2495 [SDOI2011]消耗战（虚树dp）

    P2495 [SDOI2011]消耗战 题目链接 题解: 虚树\(dp\)入门题吧.虚树的核心思想其实就是每次只保留关键点,因为关键点的dfs序的相对大小顺序和原来的树中结点dfs序的相对大小顺序都是 ...

  5. reflow和repaint理解总结

    repaint就是重绘,reflow就是回流 严重性: 在性能优先的前提下,reflow的性能消耗要比repaint的大. 体现: repaint是某个dom元素进行重绘,reflow是整个页面进行重 ...

  6. day39线程

    复习: C/S架构: 客户端     服务器模式 B/S架构: 浏览器     服务器模式 B/S架构的客户端对PC机的性能要求比较低.统一了应用的接口 B/S架构隶属于C/S架构 TCP UDP的区 ...

  7. CLR调试时的sos.dll/clr.dll/mscorwks.dll/mscordacwks.dll等动态库的版本对应

    大家都知道,在调试托管代码时,一定会加载到sos/clr/mscorwks/mscordacwks这些动态库,才能够很好的完成我们的调试工作,那么他们的版本对应关系是怎样的呢,特别是clr.dll/m ...

  8. [PHP]全国省市区信息，mysql数据库记录

    下载地址: https://files.cnblogs.com/files/wukong1688/T_Area.zip 或者也可以复制如下内容: CREATE TABLE IF NOT EXISTS ...

  9. SDOI2019快速查询

    链接 vijos 思路 虽然询问1e7,但他询问很有意思,所以最多修改1e5个. 先把他们修改的点缩小到1e5之内并没有什么影响. 然后维护mul和add.不修改很好弄,修改的点可以弄点式子加加减减弄 ...

  10. python爬虫出现ProxyError: HTTPSConnectionPool错误

    在今天刚刚打开pycharm运行爬虫时,发现所有的爬虫都不能运行,会出现如下的错误: 错误出现的主要原因是;代理错误(其实自己根本没有设置代理) 解决方法: 在网上查阅了许多类似的错误解决方法,试过后 ...