斗鱼的sidebar的实现简陋的demo

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style> .sidebar{ position:fixed; top:0; left:0; background:#f00; } .content{ width:200px; background:#666; height:200px; } .left-smcontent{ width:57px; display:none; background:#ccc; height:200px; } .small .content{ display:none;} .small .left-smcontent{ display:block;} .small .close{left:57px;} .close{ position:fixed; top:50%; left:200px; display:inline-block; width:30px; height:30px; background:red; } .main{margin-left:250px;} </style> </head> <body> <div id="sidebar" class="sidebar"> <div class="content"></div> <div class="left-smcontent"></div> <a href="javascript:;" id="close" class="close"></a> </div> <div class="main" id="main">2222222</div> </body> </html> 运行

//因为时间比较紧张，没有对源码进行详细的介绍，在周末的优化的时候都会一一的补上，并且对代码进行优化

2222222

转载于:https://www.cnblogs.com/heyinwangchuan/p/6003922.html

斗鱼的sidebar的实现简陋的demo相关推荐

.net core 中间件管道底层剖析
.net core 管道(Pipeline)是什么? 由上图可以看出,.net core 管道是请求抵达服务器到响应结果返回的中间的一系列的处理过程,如果我们简化一下成下图来看的话,.net core ...
关于商品详情页接口流程编排框架的一点实践
商品详情页,其实就是查各种接口,然后集中对用户展示商品各种各类信息,最核心的就是商品信息,还包括关键信息诸如价格信息.优惠券.促销信息.配送信息,还有一些可有可无的内容,比如问答.评价等信息. 我们实 ...
方倍工作室微信相关代码下载方法
一.微信扫描关注微信公众账号二.购买了<微信公众平台开发最佳实践>图书的读者回复"图书代码",将显示图书配套代码的下载地址及链接三.免费代码下载地址如下所示. 可下 ...
【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
webUploader的使用
webUploader的使用记录 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML ...
[软件工程基础]Alpha 阶段事后分析
设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 帮助选修物理实验的学生撰写实验报告,计算实验数据,验证计算结果,并提供一个讨论的平台. 全体成员认 ...
福大软工1816：Alpha（3/10）
Alpha 冲刺 (3/10) 队名:第三视角组长博客链接本次作业链接团队部分团队燃尽图工作情况汇报张扬(组长) 过去两天完成了哪些任务: 文字/口头描述: 1.学习qqbot库: 2.实 ...
读 J. Gregory 之《游戏引擎架构》
J. Gregory, 叶劲峰. 游戏引擎架构. ISBN: 978-7-121-22288-7 做游戏似乎是很多玩家或者网民心中的执念,但真正愿意去付诸实践的少之又少.而这些少之又少的人当中,相当一 ...
仿斗鱼聊天：基于CoreText的面向对象图文排版工具AWRichText
AWRichText 基于CoreText,面向对象,极简,易用,高效,支持精确点击,UIView混排,GIF动图,并不仅仅局限于图文混排的富文本排版神器. 代码地址:https://github.c ...

斗鱼的sidebar的实现简陋的demo

斗鱼的sidebar的实现简陋的demo

斗鱼的sidebar的实现简陋的demo相关推荐

最新文章

热门文章