斗鱼的sidebar的实现简陋的demo
斗鱼的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>
运行
//因为时间比较紧张，没有对源码进行详细的介绍，在周末的优化的时候都会一一的补上，并且对代码进行优化
.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;}
2222222
斗鱼的sidebar的实现简陋的demo的更多相关文章
- webapp框架—学习AngularUI1（demo折腾）
angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angul ...
- C# 实现IP视频监控（摄像头）画面推送（简单的不能再简单的DEMO）
最近继续在家休息,在完成上一个Python抓取某音乐网站爬虫后,琢磨着实现一个基于HTTP推送的 IP视频监控,比如外出的时候,在家里 开启一个监控端(摄像头+服务端),可以看到实时画面,如果再加上自 ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 【趣事】用 JavaScript 对抗 DDOS 攻击
继续趣事分享. 上回聊到了大学里用一根网线发起攻击,今天接着往后讲. 不过这次讲的正好相反 -- 不是攻击,而是防御.一个奇葩防火墙的开发经历. 第二学期大家都带了电脑,于是可以用更高端的方法断网了. ...
- 神通广大的CSS3选择器
每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分.但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的 ...
- 仿浏览器TAB效果
仿浏览器的Tag标签 这里先上个非常非常简陋的demo,没加CSS,我先把jquery的源码给全部搞通,在专心把这个功能给讲一下 <!doctype html> <html lang ...
- Python框架之Tornado（一）
本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...
- 第一篇：白话tornado源码之一个脚本引发的血案
本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...
- Java Android HTTP实现总结
Java Android HTTP实现总结 Http(Hypertext Transfer Protocol)超文本传输协议,是一个基于请求/响应模式的无状态的协议,Http1.1版给出了持续连接的机 ...
随机推荐
- 【POJ 2774】Long Long Message 最长公共子串
还是模板啊,手残&&打成||查错查了1h+TAT #include<cstdio> #include<cstring> #include<algorith ...
- 【凯子哥带你学Framework】Activity启动过程全解析
It’s right time to learn Android’s Framework ! 前言 学习目标 写作方式 主要对象功能介绍 主要流程介绍 zygote是什么有什么作用 SystemSer ...
- 安装Win7提示Windows无法安装到磁盘怎么办
Windows之家(www.windowszj.com):在安装Win7系统的过程中,由于每台电脑的状态不一样,比如硬件配置原因,或者是硬盘格式.硬盘状态等问题,会使得每台电脑在安装过程中都会有些不一 ...
- Windows 8.1 安装Ruby on Rails手记
最近喜欢上了狂拽酷炫的Ruby 看了诸多文章都是Linux或Mac OS X环境配置,文章末尾还不忘把windows黑成一坨... 表示很无语.. 作为新世纪隐秘而强大的 .Net程序员 怎能脱离宇宙 ...
- Win7下完全卸载Oracle 11g的步骤
1 右击“计算机”-->管理-->服务和应用程序-->服务,停掉所有Oracle相关的服务(以Oracle打头的,比如OracleDBConsoleorcl). 2 开始--> ...
- JVM学习笔记：虚拟机性能监控
JDK中除了包含与开发密切相关的jar包外,还包含了很多非常实用的工具.在%JAVA_HOME%\bin\目录下面除了命令行工具外,还包括了几个强大的可视化工具.这些工具可以辅助我们开发.调试应用程序 ...
- 图像卷积、相关以及在MATLAB中的操作
图像卷积.相关以及在MATLAB中的操作 2016年7月11日 20:34:35, By ChrisZZ 区分卷积和相关 图像处理中常常需要用一个滤波器做空间滤波操作.空间滤波操作有时候也被叫做卷积滤 ...
- 树上倍增求LCA（最近公共祖先）
前几天做faebdc学长出的模拟题,第三题最后要倍增来优化,在学长的讲解下,尝试的学习和编了一下倍增求LCA(我能说我其他方法也大会吗?..) 倍增求LCA: father[i][j]表示节点i往上跳 ...
- Bzoj2756 [SCOI2012]奇怪的游戏
2756: [SCOI2012]奇怪的游戏 Time Limit: 40 Sec Memory Limit: 128 MBSubmit: 3220 Solved: 886 Description ...
- shell命令date
某个标准时间转换为unix时间戳 date -d '2015-10-20 15:07:02' +%s unix时间戳转换为对应的标准时间 date -d @1445324822 date " ...