原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局

效果演示

实现原理

  1. 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏);
  2. 使用checkbox作为判断是否显示和隐藏右侧栏,点击显示和隐藏label实现最终效果。

代码说明

css

<style>
body {
font-family:"Microsoft YaHei",arial,sans-serif;
margin: 0px;
padding: 0px;
color: #666;
} ul {
margin:0;
padding:0;
list-style-type:none;
} .topPanel{
position: fixed;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #F0FFFF;
} .topPanel div{
display: inline-block;
padding: 3px 20px 0px 3px;
height: 27px;
} .splitPanel{
position: fixed;
top: 49%;
width: 15px;
height: 50px;
right: 301px;
background: #1E90FF;
cursor: pointer;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
z-index: 9999;
} .showHideRightPanelChk {
display: none;
} .showHideRightPanelChk:checked ~ .rightPanel {
display: none;
} .showHideRightPanelChk:checked ~ .splitPanel {
right: 0px;
background: #FFC125;
} .showHideRightPanelChk:checked ~ .splitPanel label{
right: 0px;
} .showHideRightPanelChk:checked ~ .splitPanel label:nth-child(1){
margin: 20px 0px 0px 6px;
transform: rotate(315deg);
-webkit-transition:1s all ease;
transition:1s all ease;
} .showHideRightPanelChk:checked ~ .contentPanel {
right: 0px;
} .splitMark{
margin: 20px 0px 0px 3px;
width: 5px;
height: 5px;
border-top: 2px #fff solid;
border-left: 2px #fff solid;
transform: rotate(135deg);
display: inline-block;
-webkit-transition:1s all ease;
transition:1s all ease;
} .splitBorder{
position: fixed;
top: 49%;
width: 15px;
height: 50px;
right: 301px;
} .rightPanel{
position: fixed;
top: 31px;
right: 0px;
width: 299px;
bottom: 1px;
border-left: 1px solid #e0e0e0;
padding: 1px 1px 1px 1px;
} .rightPanel div{
display: inline-block;
margin: 0px 0px 14px 0px;
} .contentPanel{
position: fixed;
top: 32px;
left: 0px;
right: 301px;
bottom: 1px;
width: auto;
background: #FFFFF0;
}
</style>

  

  1. 设置了顶部div,height为30px,width为100%,底部有边框的效果;
  2. 设置了左侧div,top为32px,距离右侧301px,距离底部1px,width为auto的效果;
  3. 设置了右侧div,top为31px,width为300px,距离底部1px,左侧有边框的效果;
  4. 设置了用于点击切换效果的区域,top为49%,width为15px,height为50px,距离右侧301px,同时设置左上及左下为圆角效果;
  5. 设置用于标识右侧div显示和隐藏效果的样式。

html

<div>
<input id="showHideRightPanel" class="showHideRightPanelChk" type="checkbox">
<div class="topPanel">
<div>Top panel</div>
</div>
<div class="contentPanel">
<div>Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
</div>
<div class="splitPanel">
<label for="showHideRightPanel" class="splitMark"></label>
<label for="showHideRightPanel" class="splitBorder"></label>
</div>
<div class="rightPanel">
<div>
<ul>
<li>Right panel</li>
</ul>
</div>
</div>
</div>

运行后,就可以看见效果了。

最新文章

  1. 401 - 未授权:由于凭据无效,访问被拒绝”在iis的解决办法
  2. iOS阶段学习第33天笔记(自定义标签栏(UITabBar)介绍)
  3. 创建 MIME 类型////////////zzz
  4. C语言实现四则运算
  5. Linux驱动学习之常用的模块操作命令
  6. 第三天 vi编辑器使用和软件安装
  7. 迭代器和for-of
  8. oracle中循环插入语句
  9. HTTP协议1之协议详解--转
  10. php数字转中文
  11. LINQ 联合查询
  12. VS2015 C#6.0
  13. mysql的存储引擎如何选择
  14. NOI全国赛(2001)--食物链
  15. Hibernate学习笔记二:Hibernate缓存策略详解
  16. B20J_2243_[SDOI2011]染色_树链剖分+线段树
  17. java 反射模式
  18. 如何让谷歌浏览器支持跨域访问(AJAX) AJAX调试跨域接口
  19. this inspection detects names that should resolved but don&#39;t. Due to dynamic dispatch and duck typing, this is possible in a limited but useful number of cases. Top-level and class-level items are sup
  20. 20175312 2018-2019-2 《Java程序设计》第2周学习总结

热门文章

  1. hdu 1171 Big Event in HDU(母函数)
  2. java提高篇(二)-----理解java的三大特性之继承
  3. [精华]Hadoop,HBase分布式集群和solr环境搭建
  4. Bulk Insert具体订单
  5. bzoj 3333: 排队计划 解决问题的方法
  6. S性能 Sigmoid Function or Logistic Function
  7. Nancy 框架
  8. lua三底漆:lua转让c/c++库(动态链接模式)
  9. SCM白色幼儿系列(十二) Proteus仿真软件简介
  10. jsRender模板引擎