<!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. ST10 Bootstrap Loader

    Bootstrap Loader The built-in bootstrap loader (BSL) of the ST10F269 provides a mechanism to load th ...

  2. 【转】REST on Rails指南

    REST on Rails指南1:理解资源 这是来自http://www.softiesonrails.com的REST简明指南. PART I 在理解REST on Rails之前,有必要先思考一下 ...

  3. eclipse内存溢出报错：java.lang.OutOfMemoryError:Java heap space

    今天执行了一个比較大的程序,处理的数据达到126MB数据,将数据导入数据库中,用eclipse 来訪问时候,总是出现java.lang.OutOfMemoryError:Java heap space ...

  4. TP复习8

    ## ThinkPHP 3.1.2 视图#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.模板的使用 (重点) a.规则 模板文件夹下[TPL]/[分组 ...

  5. Java 多线程编程两个简单的样例

    /** * @author gao */ package gao.org; public class RunnableDemo implements Runnable{ @Override publi ...

  6. oc-30-堆栈

    /** 操作引用计数器的方式:每个对象内部(对象的堆内存里面)都有一个引用计数器变量,表示对象被引用的次数. 1:retainCount:获得对象的引用计数器的值 2:retain:能够让对象的计数器 ...

  7. NHibernate教程

    NHibernate教程 一.NHibernate简介 在今日的企业环境中,把面向对象的软件和关系数据库一起使用可能是相当麻烦.浪费时间的.NHibernate是一个面向.Net环境的对象/关系数据库 ...

  8. javax.crypto.IllegalBlockSizeException: Input length must be multiple of 16 when decrypting with padded cipher--转载

    原文地址:http://songjianyong.iteye.com/blog/1571029 /** * AESHelper.java * cn.com.songjy.test * * Functi ...

  9. C# 之 HttpWebResponse类

    提供 WebResponse 类的 HTTP 特定的实现.       继承层次结构 ,"System.Object→System.MarshalByRefObject→System.Net ...

  10. mysql中的longblob类型处理

    longblob 对应的 C#数据类型为 byte[] 1.byte[] 与 string 之间的转换 byte[] bb = Encoding.UTF8.GetBytes(ss); string s ...