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

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

效果演示

 

 

实现原理

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

 

代码说明

css

  

  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>

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

 

 

CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。