<!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. C++程序员的javascript教程

    本文主要目的是向c++程序员阐述javascript的编程思想,以及编程中的误区.   变量声明: 1.变量声明的解析早于代码运行.JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变 ...

  2. 让<a></a>diabled 的方法

    <a href="test_att_data.php" disabled="true" onclick="return false"& ...

  3. 标准C++中的STL容器类简单介绍

    SGI -- Silicon Graphics[Computer System] Inc.硅图[计算机系统]公司. STL -- Standard Template Library 标准模板库.   ...

  4. C++基础之预处理命令

    目录 概述——对预处理命令的理解 预处理命令的处理时间 C++中主要的预处理命令 宏定义 “文件包含”处理 选择编译 概述 使用C++的预处理命令可以提高程序的可维护性,有利于程序员以更加方便和快捷的 ...

  5. 浏览器使用ActiveX控件

    在IE中使用ActiveX控件,需要使用HTML中的标志是<OBJECT>,该标记几个重要的参数特性有:1．ID:为控件提供一个标识名称,为HTML代码提供一种访问该控件的入口.2．CLA ...

  6. ls显示文件大小时显示单位

    在Linux中显示文件大小的时候,通常的做法是使用“ls -l”,显示的大小是文件的字节大小. 但是,如果文件比较大的话,显示起来不是特别易读,这个时候,可以使用“ls -lh”,就可以使用比较接近文 ...

  7. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 8.全局防护盲点的总结下篇

    0x01 背景 现在的WEB应用对SQL注入的防护基本都是判断GPC是否开启,然后使用addlashes函数对单引号等特殊字符进行转义.但仅仅使用这样的防护是存在很多盲点的,接上篇http://www ...

  8. C#.net 获取当前应用程序所在路径及环境变量

    一.获取当前文件的路径 string str1=Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string st ...

  9. WPF之复杂形状控件

    有的时候想将一张图片变成一个按钮.当然这里不是单纯讲图片作为按钮的背景. 这两者是有区别的: 前者图片即按钮,比如你有一个空心的圆圈,当你点击中间空心部分的时候是没有任何反应的因为它不是属于按钮的一部 ...

  10. [Java] final的意义

    1.如果一个数据既是static又是final,那么它会拥有一块无法改变的存储空间. 2.final data: 当final用于基本数据类型时,final让其值(value)保持不变,但是当用于ob ...