2009.2.24(6)——謝書css+div

3647 ワード

html jquery css

2009.2.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の中にMANConteentのheightを設置しています。様々な解像度に適応するために、jqueryでコントロールできます。

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

android-async-httpフレームのソースコードを読みます。