<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />	
<link type="text/css" href="css/style.css" rel="stylesheet" />	

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<style type="text/css">
	.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		.ui-effects-transfer { border: 2px dotted gray; } 
	body
	{
	font-size:10pt;
	background-color:#FFFFFF;
	}
	#header
	{
	width:1273px;
	height:280px;
	border-width:1px;
	border-style:dashed;
	margin:0 auto;
	}
	#h2{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:14px;
	border-width:1px;
	border-style:solid;
	
	
	}
	#h3{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:110px;
	border-width:1px;
	border-style:dashed;
	overflow:hidden;
	
	}
	#h4{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:31px;
	border-width:1px;
	border-style:solid;
	
	}
	#h5{
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:55px;
	border-width:1px;
	border-style:solid;
	
	}
	#h6{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:33px;
	border-width:1px;
	border-style:solid;
	}
	#zx{
	margin-top:30px;
	margin-left:100p;
	margin-right:100px;
	margin-bottom:15px;
	width:1040px;
	height:10px;
	border-width:1px;
	border-style:dashed;
	position:absolute;
	left: 231px;
	top: 198px;
	}
	#body
	{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:727px;
	}
	#b1
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:195px;
	border-width:1px;
	border-style:solid;
	
	}
	#b2
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height220px;
	border-width:1px;
	border-style:dashed;
	}
	#b3
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:206px;
	border-width:1px;
	border-style:solid;
	}
	#b4
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:34px;
	border-width:1px;
	border-style:solid;
	}
	#footer
	{
	padding-top:15px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:50px;
	border-width:1px;
	border-style:dashed;
	}
	#tb1
	{
		height:31px;
		width:100%;
	}
	#tb2
	{
		margin-top:0;
		margin-bottom:auto;
		height:55px;
		width:100%;
	}
	#tb3
	{
		height:33px;
		width:100%;
	}
	#td1{
	padding-left:5px;
	}
	#dtx
	{
	margin-top:auto;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	width:50px;
	height:50px;
	border-width:1px;
	border-style:dashed;
	left: 112px;
	top: 180px;
	}
	#b2_1
	{
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:27px;
	border-width:1px;
	border-style:solid;
	}
	#b2_2
	{
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:93px;
	border-width:1px;
	border-style:solid;
	}
	#b2_3
	{
	margin-top:3px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:93px;
	border-width:1px;
	border-style:solid;
	}
	#b2_2_d1
	{
	width:200px;
	height:93px;
	border-width:1px;
	border-style:dashed;
	}
	#b2_2_d1_avatar
	{
	width:171px;
	height:68px;
	border-width:1px;
	border-style:solid;
	margin-top:15px;
	margin-left:19px;
	margin-bottom:9px;
	}
	#b2_2_d2
	{
	padding-top:5px;
	width:680px;
	height:82px;
	}
	#b2_2_d2_inf1
	{
	margin-top:0px;
	width:100%;
	height:22px;
	border-bottom-style:solid;
	border-bottom-width:1px;
	}
	#b2_2_d2_inf2
	{
	margin-top:0px;
	width:100%;
	height:26px;
	border-bottom-style:solid;
	border-bottom-width:1px;
	}
	#b2_2_d2_inf3
	{
	margin-top:0px;
	width:100%;
	height:22px;
	}
	#b2_2_d3_1
	{
	width:100%;
	height:30px;
	border-width:1px;
	border-style:dashed;
	}
	#b2_2_d3_2
	{
	width:100%;
	height:30px;
	border-width:1px;
	border-style:dashed;
	}
	#footer1
	{
	width:100%;
	height:30px;
	border-width:1px;
	border-style:dashed;
	}
	#footer2
	{
	width:100%;
	height:170px;
	border-width:1px;
	border-style:dashed;
	}
	#ft_1
	{
	width:100%;
	height:52px;
	border-width:1px;
	border-style:solid;
	}
	#ft_2
	{
	width:100%;
	height:80px;
	border-width:1px;
	border-style:solid;
	}
	#ft_3
	{
	width:100%;
	height:30px;
	border-width:1px;
	border-style:solid;
	}
	#ft_1_t
	{
	width:100%;
	height:52px;
	border-width:1px;
	border-style:dashed;
	}
	#ft_1_t_d1
	{
	
	width:500px;
	height:38px;
	border-width:1px;
	border-style:dashed;
	}
	#ft_1_t_d2
	{
	
	width:125px;
	height:30px;
	border-width:1px;
	border-style:solid;
	}
	#f_t
	{
	height:50px;
	border-width:1px;
	border-style:dashed;
	}
	#fuzhu
	{
	height:10px;
	}
	#f_fz
	{
	height:10px;
	}
</style>
<script>
	$(function() {
		// run the currently selected effect
		function runEffect() {
			// get effect type from 
			var selectedEffect = $( "#effectTypes" ).val();
			
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "transfer" ) {
				options = { to: "#button", className: "ui-effects-transfer" };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}

			// run the effect
			$( "#effect" ).effect( selectedEffect, options, 500, callback );
		};

		// callback function to bring a hidden box back
		function callback() {
			setTimeout(function() {
				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
			}, 1000 );
		};

		// set effect from select menu value
		$( "#effect" ).mouseover(function() {
			runEffect();
			return false;
		});
	});
	</script>