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. Django 常用的 Web 应用程序工具

    Django 提供了多种开发 Web 应用程序所需的常用工具,如:缓存.日志.发送邮件.自定义认证等,更多可参考:<https://docs.djangoproject.com/zh-hans/ ...

  2. 【Iterm2】如何解决iterm2窗口自动隐藏的问题

    一.问题描述 当我们使用Iterm2的Hotkey Windom功能时,通过快捷键唤起Iterm2窗口后,然后鼠标在iterm2窗口之外触发点击操作就会让 iterm2窗口自动隐藏.. 这样有时候会觉 ...

  3. Jmeter 局域网的IP欺骗终极解决方案

    ip欺骗是什么?    ip欺骗就是模拟ip.什么意思呢,一个电脑就只有一个ip地址,当然如果有多块网卡的话,会有多个ip地址,一般服务器上有个网卡,咱们自己的电脑一般都只有一个ip地址,但是你做压测 ...

  4. 微信之通过AppID和AppSecret获取access_token

    最近在搞微信公众平台这方面的东西,,但实际使用的时候发现和access_token有关的接口都无法正常调用,于是debug了下,发现获取到了AppID和AppSecret,在最后请求access_to ...

  5. 《团队名称》第八次团队作业：Alpha冲刺day1

    项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8-软件测试与ALPHA冲刺 团队名称 快活帮 作业学习目标 (1)掌握 ...

  6. jmeter对接口测试入参进行MD5加密的5种方式

    在使用jmeter做测试的过程中,经常需要对请求的入参进行加密,下面列举几种常用的方法,以登录请求密码需要MD5加密为例. 虽然可以先把参数化的明文密码都先md5加密,而不是在登录前先执行加密,但是实 ...

  7. windows下的批处理bat文件和Linux下的shell文件的互相转换

    shell(Linux.Solaris) bat(windows) 含义 # rem 注释行 /[directory]/[directory]/.../[directory]/ [disk]:\[di ...

  8. python 当前时间多加一天、一小时、一分钟（转载）

    首先看下,datetime的使用 import datetime >>> print datetime.datetime.now() 2017-07-15 15:01:24.6190 ...

  9. MySQL 练习题目 二刷 - 2019-11-4 5:55 am

    建表的过程 create table student( sid int not null primary key, sname ) not null, sborn date, ssex ) not n ...

  10. vim文本编辑器——删除、复制、剪切、更改某一个字符、替换、撤销、关键字搜索

    1.删除: (1)删除光标所在处的字符: 如上图所示:点击一次x键只能删除一个字符. (2)删除光标所在处后的n个字符(nx): 删除前: 输入6x: (3)删除光标所在的行(dd): 删除前: 输入 ...