<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Page-Enter" content="revealTrans(duration=12, transition=12)">
<title>CSS3之侧边栏</title>
<style>
*{
margin:0;
padding:0;
}
html{
height:100%;
width:100%;
}
p{
padding:10px 0;
}
body.sideMenu{
margin:0;
-webkit-transform:none;
transform:none;
}
#side{
display:none;
}
#side:checked + aside{
left:0;
}
#side:checked ~ #wrap{
padding-left:220px;
}
a:link,a:visited{
color:#00FF00;
text-decoration:none;
}
body > aside{
position:absolute;
top:0;
bottom:0;
left:-200px;
width:200px;
background:#000000;
transition:0.2s ease-out;
-webkit-transition:0.2s ease-out;
}
body > aside > h2 {
color:#00FF00;
text-align:center;
font-weight:normal;
padding:10px;
}
#wrap{
margin-left:20px;
padding:10px;
transition:0.25s ease-out;
-webkit-transition:0.25s ease-out;
}
#wrap > label{
display:inline-block;
}
#wrap > label{
background:#333333;
border-radius:15px;
color: #00FF00;
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>
</aside>
<div id='wrap'>
<label for='side'>=</label>
</div>
</body>
</html>

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

  1. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  3. CSS实现侧边栏固定宽度，内容栏自适应

    1,固定宽度区浮动,自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下: #wrap {    overflow: hidden; *zoom: 1;  }  #c ...

  4. html css 浮层 侧边栏

    2019-7-1 16:02:25 星期一 实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去 <!DOCTYPE HTML> <html lang="en" ...

  5. 知乎布局||offsetTop||侧边栏自动等高

    1.对a标签的详细介绍 直接在a标签使用onclick,怎么去除a的默认链接,onclick="return test()" 注意这里的return 不可舍去,test函数可以直接 ...

  6. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

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

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

  8. CSS之上边栏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 1210 BBS admin后台管理及侧边栏筛选个人站点

    目录 昨日内容 django admin后台管理 使用 建表 用户图片的显示 MEDIA用户配置 查找照片 搭建个人站点 防盗链 新建css文件 侧边栏展示标签 定义分类栏与标签栏 定义时间栏 侧边栏 ...

随机推荐

  1. Java常见排序算法之直接插入排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  2. 转换到 COFF 期间失败: 文件无效或损坏 解决方法

    转自csdn 终极解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属性|配置属性|清单工具|输 ...

  3. dwr2反推

    package services; import org.directwebremoting.Browser; import org.directwebremoting.ScriptSessions; ...

  4. Eclipse启动Tomcat时，45秒超时解决方案

    在Eclipse中启动Tomcatserver时,常常因为系统初始化项目多,导致出现45秒超时的Tomcatserver启动错误,出现以下的错误. 曾经我们一般通过找到XML配置文件,将相应Timeo ...

  5. Tcsh脚本编程

    Tcsh主要用于Free BSD等UNIX系统中. 一.输出字符串Hello的示例脚本 Tcsh脚本的基本格式.编写方法及脚本中使用的命令等,与Bash脚本完全相同,只需要直接套用即可. [root@ ...

  6. Can't find keyplane iOS模拟器键盘不显示解决办法

    静下心来学技术,新一波的问题再度来袭 学习swift的时候做一个app,需要用到数字键盘,但是在调试了几次后数字键盘便出不来了,控制台中弹出这样一个错误 Can't find keyplane tha ...

  7. Preventing CSRF in Java web apps---reference

    reference from:http://ricardozuasti.com/2012/preventing-csrf-in-java-web-apps/ Cross-site request fo ...

  8. Foxit Reader 插件下载

    http://www.foxitsoftware.com/Secure_PDF_Reader/addons.php#install 百度云:http://pan.baidu.com/s/1i3DSlv ...

  9. C++实现日期转换类DateTime

    概述 工作中我们在网络传输时使用time_t来传输时间,在显示时使用字符串来显示,下面是一个日期转换类的实现,方便以后使用: // DateTime.hpp #ifndef _DATETIME_H # ...

  10. 使用java8

    刚开始一直使用的jdk7,但是学习spark的时候spark推荐Jdk8,很多示例程序都用到了lambda 机器上安装jdk8只是实验用途,默认还想使用jdk7 安装完后 网上说这是因为jdk8安装的 ...