斗鱼的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版给出了持续连接的机 ...

随机推荐

[转]SVN版本冲突解决详解
原文地址:http://blog.csdn.net/windone0109/article/details/4857044 版权声明:本文为博主原创文章,未经博主允许不得转载. 版本冲突原因: 假设A ...
【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇对于新手来说DIV CSS布 ...
css3-新属性-用户界面
多列:(对文本进行布局,像报纸那样) column-count: 规定元素应该被分隔得列数: column-gap:规定列之间的间距: column-rule: 列与列之间的间隔线: column-w ...
java eclipse打jar包和执行jar中的main函数
jar包使用eclipse打包步骤右键需要打包的项目->选择Export 到这里有两种打包的方式 1.如果项目中没有使用其他第三方包等,则直接选择下图中的第一种即可(JAR file) 2.如 ...
Ehcache缓存配置
Cache的配置很灵活,官方提供的Cache配置方式有好几种.你可以通过声明配置.在xml中配置.在程序里配置或者调用构造方法时传入不同的参数. 你可以将Cache的配置从代码中剥离出来,也可以在使用 ...
管理系统UI: System Bar 详解
Google原文: http://developer.android.com/training/system-ui/index.html 管理系统UI之一:淡化System Bar(Dimming t ...
系统间通信（4）——IO通信模型和JAVA实践中篇
4.多路复用IO模型在"上篇"文章中,我们已经提到了使用多线程解决高并发场景的问题所在,这篇文章我们开始 4-1.现实场景我们试想一下这样的现实场景: 一个餐厅同时有100位客 ...
Handler的postDelayed方法
这是一种可以创建多线程消息的函数使用方法:1,首先创建一个Handler对象 Handler handler=new Handler(); 2,然后创建一个Runnable对象 Runnable r ...
ubuntu下编译caffe
Ubuntu下编译caffe 纯粹是个人编译的记录.不用CUDA(笔记本是amd卡,万恶的nvidia):不手动编译依赖包(apt-get是用来干啥的?用来直接装二进制包,以及自动解决依赖项的) ca ...
JSP隐含变量和Spring中Model在EL表达式中的读取顺序
偶然中存在着必然,必然中存在着偶然偶然出现的bug,必然存是由代码的不合理甚至错误的代码逻辑越长,越复杂,就越容易出现bug 之前项目里几次偶然出现了一个bug,简单的描述就是第一次新增了之后进行 ...

斗鱼的sidebar的实现简陋的demo