斗鱼的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版给出了持续连接的机 ...
随机推荐
- ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案
摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...
- 对象关系映射ORM
对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效 ...
- 【线性规划与网络流 24题】已完成(3道题因为某些奇怪的原因被抛弃了QAQ)
写在前面:SDOI2016 Round1滚粗后蒟蒻开始做网络流来自我拯救(2016-04-11再过几天就要考先修课,现在做网络流24题貌似没什么用←退役节奏) 做的题目将附上日期,见证我龟速刷题. 1 ...
- 去掉iPhone、iPad的默认按钮样式 去掉高光样式：
input[type="button"], input[type="submit"], input[type="reset"] { -web ...
- 关于在Eclipse中运行java程序报出：The project:XXXX which is referenced by the classpath10
1.work_space名称与project是否一样,如果是一样的可能会导致错误. 2.project所在的文件夹中的.mymetadata文件中定义的project-module名称是否与proje ...
- MVC3中使用RadioButtonFor()
创建页面 进行初始化 默认 男 被选中 <div class="label"> <div class="editor-label"> ...
- UDP编程中client和server中使用recvfrom和sendto的区别
client中: sendto(sfd,buf,strlen(buf),0,(struct sockaddr *)&saddr,len); recvfrom(sfd,buf ...
- 宽字符，Ansic和Unicode
电脑发展的初期,只是在美国等英文国家使用,英文只有26个字母和其它字符,一个字节最多可以表示256个字符,如字母"A"用0x41(二进制01000001)表示,字母"a& ...
- [聚类算法] K-means 算法
聚类 和 k-means简单概括. 聚类是一种 无监督学习 问题,它的目标就是基于 相似度 将相似的子集聚合在一起. k-means算法是聚类分析中使用最广泛的算法之一.它把n个对象根据它们的属性分为 ...
- golang学习之旅：方法、函数使用心得
假设要在$GOPATH/pkg/$GOOS_$GOARCH/basepath/ProjectName/目录下开发一个名为xxx的package.(这里basepath指的是github.com/mic ...