jQuery定义的侧边栏宽度固定而内容宽度自适应的网页

2024-09-05 12:18:29

字体：大中小

来源：转载

供稿：网友

一个使用了jQuery实现的网页框架效果，将框架的左侧边栏设置为固定而网页的内容区宽度自适应，这是一个想当实用的网页布局结构，在基于WEB的管理系统中，经常会见到如此的布局。

<!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><title>侧边栏宽度固定而内容自适应的网页框架</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{margin:0;padding:0;}.cont{height:700px;float:left;}#left{float:left;width:250px;text-align:center;height:700px;background:#C03;line-height:700px;color:#fff;font-size:24px;}.close{height:100%;width:10px;background:#000;float:left;}.close a{color:#FFF;background:#C03;cursor:pointer;line-height:700px;}#right{margin-left:260px;text-align:center;background:#C03;height:700px;line-height:700px;font-size:24px;color:#fff;text-align:center;zoom:1;}#right:after{content:"";height:0;display:block;clear:both;visibility:hidden;}</style><script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){	$(".close").toggle(function(){		$(this).siblings().hide();		$("#right").css("margin-left","10px");		$(this).find("a").html("◀");	},function(){		$(this).siblings().show();		$("#right").css("margin-left","260px");		$(this).find("a").html("▶");	})})</script></head><body><div class="cont">	<div id="left">我是固定宽度260</div>	<div class="close">▶</div></div><div id="right">	<h1>我是自适应内容</h1></div></body></html>

上一篇：jquery模拟百分比进度条

下一篇：带动画效果的网页右侧伸缩窗口

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注