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. Kombu源码分析(一)概述

    Celery是Python中最流行的异步消息队列框架,支持RabbitMQ.Redis.ZoopKeeper等作为Broker,而对这些消息队列的抽象,都是通过Kombu实现的.Kombu实现了对AM ...

  2. 10 分钟上手 Vim，常用命令大盘点

    传闻有 180 万的程序员不知道如何退出 Vim 编辑器,真的有这么困难吗?下面给大家整理了一份 Vim 常用命令,让你 10 分钟快速上手 Vim,溜得飞起! 以下命令请在普通模式执行 1.移动光标 ...

  3. 为Linux操作系统配置SSH互信

    Linux 互信,免登陆 1.切换到要建立互信的用户(以root为例): su - root cd ~ 2.制作密钥并赋权: # ssh-keygen -t dsa               #出现 ...

  4. zabbix--显示插件Graphtree

    zabbix配置显示插件Graphtree 网盘下载地址:https://pan.baidu.com/s/1HGALOq2z7XiVRxyb6ASAeQ   提取码:13vn Graphtree 安装 ...

  5. zabbix--自定义监控项vsftpd

    Zabbix 自定义监控项之监控 vsftpd zabbix 提供了很多监控选择,功能丰富,我们还可以根据自定义来监控想要监控一些日常的服务等. 说明: 此处我们通过监控 ftp (自定义命令),实现 ...

  6. 理解cookie，session，token

    彻底理解cookie,session,token 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新 ...

  7. Java并发编程：ThreadPoolExecutor + Callable + Future（FutureTask） 探知线程的执行状况

    如题 (总结要点) 使用ThreadPoolExecutor来创建线程,使用Callable + Future 来执行并探知线程执行情况: V get (long timeout, TimeUnit ...

  8. 19、Python标准库: 日期和时间

    一.time时间模块 import time 1 .时间戳   时间戳(timestamp):时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量. time_stamp = tim ...

  9. Ofbiz项目学习——阶段性小结——查询

    一.组装参数的学习 首先是查询条件,对于查询条件,需要判断是否从前端传递空值?——怎么处理查询空值? 当然可以一个一个进行判断,但是这样代码会导致很多,可以统一处理,形成一个公共方法. 1. 单个处理 ...

  10. Tomcat 禁用不安全的 HTTP 请求模式及测试

    WebDAV (Web-based Distributed Authoring and Versioning) 一种基于 HTTP 1.1协议的通信协议.它扩展了HTTP 1.1,在GET.POST. ...