HTml5侧边栏基本格式制作
来源:互联网 发布:php源码修改工具 编辑:程序博客网 时间:2024/05/21 09:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#sideToggle:checked~aside {
/*//ID为#sideToggle的checkbox在打钩状态(即checked时)选择它后边每个同级aside*/
/*position: absolute;*/
/*由于有其他选择器是同个目标(aside),同样的样式(绝对定位),所以这里可以省略*/
/*//设置背景颜色变化直观些*/
}
#sideToggle:checked~#wrap {
/*//ID为#sideToggle的checkbox在打钩状态(即checked时)选择它后边每个ID为#wrap*/
padding-left: 220px;
background-color: #0099FF;
/*//设置背景颜色变化直观些*/
}
/*//设置足够大的label标签的padding不会因为侧边栏的出现而尴尬的被侧边栏遮住.*/
aside {
position: absolute;
/*//绝对定位,会与不同优先级的同一个目标共用绝对定位*/
top: 0;
/*//往上拉伸至顶*/
bottom: 0;
/*//往下拉伸至底*/
left: -200px;
/*//通过绝对定位,控制aside往左侧隐藏入200px*/
width: 100px;
/*//设置aside小于或等于200就好隐藏*/
background: deepskyblue;
/*//设置背景颜色变化直观些*/
}
</style>
<body>
<input type="checkbox" id="sideToggle" />
<!--设置input输入框的type类型为checkbox,id(相当于房间号)-->
<aside>
<!--//用aside的一个作用——侧边栏-->
22222</aside>
<div id="wrap">
<label id="sideMenuControl" for="sideToggle">侧边栏</label>
<!--//用label的for与input的ID来联系-->
</div>
<!--<span>1111</span>//以下测试
<span>5555</span>-->
<!--<aside>4444</aside>-->
<!--<div id="wrap">33</div>
<div id="wrap">44</div>-->
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#sideToggle:checked~aside {
/*//ID为#sideToggle的checkbox在打钩状态(即checked时)选择它后边每个同级aside*/
/*position: absolute;*/
/*由于有其他选择器是同个目标(aside),同样的样式(绝对定位),所以这里可以省略*/
left: 0px;
/*这里选择器优先级高,所以left 0会覆盖在选择时覆盖优先级低的里的left-200;
background-color: #00FF00;/*//设置背景颜色变化直观些*/
}
#sideToggle:checked~#wrap {
/*//ID为#sideToggle的checkbox在打钩状态(即checked时)选择它后边每个ID为#wrap*/
padding-left: 220px;
background-color: #0099FF;
/*//设置背景颜色变化直观些*/
}
/*//设置足够大的label标签的padding不会因为侧边栏的出现而尴尬的被侧边栏遮住.*/
aside {
position: absolute;
/*//绝对定位,会与不同优先级的同一个目标共用绝对定位*/
top: 0;
/*//往上拉伸至顶*/
bottom: 0;
/*//往下拉伸至底*/
left: -200px;
/*//通过绝对定位,控制aside往左侧隐藏入200px*/
width: 100px;
/*//设置aside小于或等于200就好隐藏*/
background: deepskyblue;
/*//设置背景颜色变化直观些*/
}
</style>
<body>
<input type="checkbox" id="sideToggle" />
<!--设置input输入框的type类型为checkbox,id(相当于房间号)-->
<aside>
<!--//用aside的一个作用——侧边栏-->
22222</aside>
<div id="wrap">
<label id="sideMenuControl" for="sideToggle">侧边栏</label>
<!--//用label的for与input的ID来联系-->
</div>
<!--<span>1111</span>//以下测试
<span>5555</span>-->
<!--<aside>4444</aside>-->
<!--<div id="wrap">33</div>
<div id="wrap">44</div>-->
</body>
</html>
0 0
- HTml5侧边栏基本格式制作
- axure的基本使用方法(侧边导航栏的制作)
- html5基本格式
- 初识html5基本格式
- HTML5基本书写格式:
- html5 基本格式
- 0305 HTML5基本格式
- HTML5基本格式
- html5学习之侧边栏实现
- 简单的折叠侧边栏的制作
- HTML5网络视频webm格式制作
- html5--导航栏制作
- html5--导航栏制作
- magento 侧边栏菜单的生成制作!!3层目录!!
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- HTML5基础01----h5基本格式
- 【HTML5基础】第2章:基本格式
- HTML制作网页的基本格式
- 集合--集合框架中的接口与具体的集合
- AngularJS 双向绑定 <input type='file'>中文件名,文件内容
- [NGINX]
- 1063. 计算谱半径(20)
- Oracle11G-SQL开发指南-3-使用SQL PLUS
- HTml5侧边栏基本格式制作
- break和continue的区别
- MFC OCX 控件事件的添加和处理
- Oracle11G-SQL开发指南-4-使用简单函数-字符函数
- 设计模式-迭代器模式
- Nginx为什么比Apache Httpd高效
- 设计模式之----- 反应器(Reactor)模式
- MyBatis的传入和返回参数类型
- hdu 动态规划