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   id="iwvjtn8m0"   class="cont">	<div   class="iwvjtn8m0"   id="left">我是固定寬度260</div>	<div   id="iwvjtn8m0"   class="close">▶</div></div><div   class="iwvjtn8m0"   id="right">	<h1>我是自適應內容</h1></div></body></html>

上一篇：jquery模擬百分比進度條

下一篇：帶動畫效果的網頁右側伸縮窗口