<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS之侧边栏</title>
<style>
*{
margin:0;
padding:0;
}
html{
height:100%;
}
a:link,a:visited{
color:#00FF00;
text-decoration:none;
}
#side{
display:none;
}
#side:checked + aside{
top:0;
}
#side:checked ~ #wrap{
padding-top:220px;
}
body > aside{
position:absolute;
top:0;
bottom:0;
top:-200px;
width:100%;
background:#333333;
transition:0.2s ease-out;
-webkit-transition:0.2s ease-out;
height:200px;
}
body > aside > h2{
color:#00FF00;
text-align:center;
font-weight:normal;
padding:10px;
}
#wrap{
margin-left:20px;
transition:0.25s ease-out;
-webkit-transition:0.25s ease-out;
}
#wrap > label{
background:#333333;
border-radius: 15px;
color: #FFF;
cursor: pointer;
display: block;
font-family: Courier New;
font-size: 25px;
font-weight: bold;
width: 50px;
height: 50px;
line-height: 35px;
text-align: center;
text-shadow: 0 -4px;
}
#wrap > label:hover{
background:#000;
}
</style>
</head>
<body>
<input type='checkbox' id='side'>
<aside>
<h2><a href="http://www.cnblogs.com/caidupingblogs/">冷的锋刃</a></h2>
<h2><span >用冷的锋刃琴的寂寥写往事今朝</h2>
</aside>
</input>
<div id='wrap'>
<!--侧边栏按钮标记，注意"="只是符号-->
<label for='side'>^</label>
</div>
</body>
</html>

CSS之上边栏的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. css布局 三栏 自动换行

    1.代码实现 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  3. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  4. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  5. css实现左栏固定右栏自适应，高度自适应的布局

    收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...

  6. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  8. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  9. css布局: 两栏 自适应高度

    只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 ...

随机推荐

  1. jquery 新建的元素事件绑定问题

    js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮, ...

  2. Codeforces Round #342 (Div. 2) D. Finals in arithmetic 贪心

    D. Finals in arithmetic 题目连接: http://www.codeforces.com/contest/625/problem/D Description Vitya is s ...

  3. linux下的文件操作——批量重命名

    概述:在日常工作中,我们经常需要对一批文件进行重命名操作,例如将所有的jpg文件改成bnp,将名字中的1改成one,等等.文本主要为你讲解如何实现这些操作 1.删除所有的 .bak 后缀: renam ...

  4. 微信公共服务平台开发（.Net 的实现）7-------发送图文消息

    之前我们讲过让微信发送给我们普通的文本信息,下面我们来看看如何发送图文信息,需要注意的是这里说的是,让微信发给我们,而不是我们拍个图片发给微信处理,我们上传图片在以后的章节介绍.下面是发送图文消息的函 ...

  5. iOS 2D绘图详解（Quartz 2D）之Bitmap

    什么是Bitmap? Bitmap叫做位图,每一个像素点由1-32bit组成.每个像素点包括多个颜色组件和一个Alpha组件(例如:RGBA). iOS中指出如下格式的图片 JPEG, GIF, PN ...

  6. iOS开发——实战OC篇&环境搭建之StoryBoard（玩转UINavigationController与UITabBarController）

      环境搭建之StoryBoard(玩转UINavigationController与UITabBarController)   研究了这么就IOS开发,都没有所处一个像样或者自己忙一点的项目.最近自 ...

  7. 数据剪切命令cut和数据粘贴命令pastte

    在Windows中,经常从一个文件将一段文本移动到另一个文件中.在Linux中执行这个任务的是cut和paste命令. 一.数据剪切命令cut 命令格式: cut [option] [file] 常用 ...

  8. QThread与QWidget使用

    本文主要内容: 在任务一中,用 四 种方式实现:点击界面按钮,开线程运行一段程序,结果显示在一个Label上.1. 用不正确的方式得到看似正确的结果2. 用Qt Manual 和 例子中使用的方法3. ...

  9. HTTP Referer二三事---转

    授权方式:署名,非商业用途,保持一致,转载时请务必以超链接(http://www.fwolf.com/blog/post/320)的形式标明文章原始出处和作者信息及本声明. 什么是HTTP Refer ...

  10. Linux Shell远程执行命令（命令行与脚本方式）

    需求:经常需要在一台服务器远程到其他节点的服务器上执行一些shell命令,如果分别ssh到每台主机上再去执行很麻烦,因此能有个集中管理的方式就好了.介绍两种shell命令远程执行的方法. 方式一: s ...