<!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. 收集计算机分区信息，去除列中的重复值（Excel）（空行）

    收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...

  2. registerClassAlias()函数和getClassByAlias()函数

    flash.net 包中包含包级函数,可用于打开新的浏览器窗口,向服务器发送 URL 请求以及处理类别名. registerClassAlias()函数 public function registe ...

  3. Python在Windows上的安装

    1:下载 http://dlsw.baidu.com/sw-search-sp/soft/6e/17016/python-3.3.5.1395976247.msi 2:直接next安装 3:验证安装是 ...

  4. 容器的end()方法

    容器的end()方法,返回一个迭代器,需要注意:这个迭代器不指向实际的元素,而是表示末端元素的下一个元素,这个迭代器起一个哨兵的作用,表示已经处理完所有的元素. 因此,在查找的时候,返回的迭代器,不等 ...

  5. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  6. sublime添加ctags实现代码跳转

    本次操作是在sublime text 2下进行. 1.先到http://sublime.wbond.net/Package%20Control.sublime-package下载Package Con ...

  7. 使用phonegap + appframework2.0框架

    1.页面切换动画结束时卡(禁用动画) 2.搜索或导航标签需要固定(标签选择器动态修改高度) 3.pancel容器默认生成的时候内容不放 通过动态的的$("").empty().ht ...

  8. 虚拟文件系统VFS

    Linux的文件系统是由虚拟文件系统作为媒介搭建起来的,虚拟文件系统VFS(Virtual File System)是Linux内核层实现的一种架构,为用户空间提供统一的文件操作接口.它在内核内部为不 ...

  9. mysql二进制包安装与配置实战记录

    导读 一般中小型网站的开发都选择 MySQL 作为网站数据库,由于其社区版的性能卓越,搭配 PHP .Linux和 Apache 可组成良好的开发环境,经过多年的web技术发展,在业内被广泛使用的一种 ...

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

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