2009.12.24(6)——谢写的css+div

2009.12.24(6)——谢写的css+div
我写的css+div不怎么好,看看谢写的吧 什么叫差距啊。。。
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>抗旱指挥系统---旱情查询服务系统</title>
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="all">
<link rel="stylesheet" href="css/frame.css" type="text/css" media="all" /> 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
	
	/**
		                                                               //谢
		整个页面布局
		1.所有元素居中
		2.放置 header,menu,footer
		3.用客户端高度clientHeight减去已用高度 作为 中间 mainContent的高度.
	*/
	$(function(){
		$('#mainContent').css('height',document.body.clientHeight-120);
		$('#mainContent >div').css('height','100%');
	});
	
</script>

</head>
<body>
	<!-- 居中显示 -->
	<center>
	
		<!-- begain banner -->
		<div id="header"><img src="images/header.gif"></img></div>
		<!-- end banner -->
		
		<!-- begain menu -->
		<div id="mainMenu">
		</div>
		<!-- end menu -->
		
		<!-- begain mainContent -->
		<div  id="mainContent">
			<div id="left"><iframe src="left.html"></iframe></div><!-- left -->
			<div id="right"><iframe src="map.html"></iframe></div><!-- map -->
		</div>
		<!-- end mainContent -->
		
		<!-- begain footer -->
		<div id="footer">
			<img src="images/footer.gif">
		</div>
		<!-- begain footer -->
		
	</center>
</body>
</html>
css:
@CHARSET "UTF-8";
*{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

iframe{
	border: 0px;
}

html,body{
	font-size: 12px;
	color: #666666;
	background: #ffffff;
}
#header{
	height: 61px;
	width: 1000px;
	background: aqua;
}
#mainMenu{
	height: 35px;
	width: 1000px;
	overflow:hidden;
}

#mainContent{
	width: 1000px;
	height: 500px;
}
#left{
	width: 300px;
	float: left;
}

#right{
	width: 700px;
	float: left;
}

#footer{
	height: 20px;
	width: 1000px;
	background: gray;
}



从上面可以看到 我们在css里面设置了mainContent的height,为了适应不同的分辨率,我们可以用jquery来控制一下

$(function(){
		$('#mainContent').css('height',document.body.clientHeight-120);
		$('#mainContent >div').css('height','100%');
	});

你可能感兴趣的:(html,jquery,css)