html css 浮层 侧边栏
2019-7-1 16:02:25 星期一
实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 8 #tl { 9 width: 240px; 10 overflow: hidden; 11 position: absolute;/*这里一定要设置*/ 12 z-index: 500; 13 margin-top: 0; 14 margin-left: -200px; 15 -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */ 16 -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/ 17 -o-transition: .5s ease-in-out; 18 background-color: gray; 19 } 20 21 </style> 22 </head> 23 24 <body> 25 <script> 26 function sider() 27 { 28 var a = document.getElementById('tl'); 29 30 if (a.style['margin-left'] == '0px') { 31 a.style['margin-left'] = '-200px'; 32 } else { 33 a.style['margin-left'] = '0px'; 34 } 35 36 } 37 </script> 38 39 <div id="tl" onclick="sider();"> 40 <div class="in"> 41 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 42 <div class="in"> 43 bbbbbb1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 44 </div> 45 <div class="in"> 46 bbbbb2 47 </div> 48 <div class="in"> 49 bbbbb3 50 </div> 51 </div> 52 </div> 53 <div> 54 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 55 </div> 56 57 </body> 58 59 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
2014-07-01 css form 表单组对齐
2013-07-01 php 301