2009.12.25(3)——我写div+css-优快云博客

本文链接：https://blog.youkuaiyun.com/cody123/article/details/83522742

本文介绍了一种使用DIV和CSS进行网页布局的方法，包括如何设置页面的高度和宽度、使用相对定位以及解决不同浏览器间的兼容性问题。通过具体的代码示例展示了各部分如头部(header)、侧边栏(sideBar)及主要内容(content)的布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2009.12.25(3)——我写div+css
这是以前我写的备忘的虽然写的很烂
frame.css

CHARSET "UTF-8";
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
	/*font-size: 12px;
	color: #666666;
	background: #ffffff;*/
}
*{
	margin: 0px;
	padding: 0px;
}
/*因为用了相对位置布局，当分辨率太大时，图片和文字就会被拉伸
所以采用max-width来设置一个最大的宽度，但是这个属性IE6以下
不支持，所以做以下改动
!important 只有FF和IE7以上才支持
_XXX只有IE6支持
*XXXIE7,IE6都支持
*+XXX只有IE7支持
这样就可以把他们区分开了
*/
#box{
	/*background: red;*/
	height: 100% !important;
	width: 100% !important;
	_width: 1000px;
	/*_height: 600px;*/
	max-width: 1024px;
	min-width: 1000px;
	min-height: 500px;
	margin: auto;
}
#header{
	/*border: 2px solid #0E6;*/
	/*background-color: navy;*/
	height: 10%;
}
#header img{
	height: 100%;
	width: 100%;
}
#temp1{
	height: 5%;
}
#mainMenu{
	/*border: 2px solid #C26;*/
	/*background-color: purple;*/
	height: 90%;
	/*margin-bottom: 3px;*/
	background: url("../images/mainMenu.bmp") repeat;/*设置背景图片，并上下左右填充*/
}
#space{
	height: auto;	
}
#sideBar{
	/*background:  bule;*/
	height: 82%;
	width: 25%;
	/*border: 2px solid #04E;*/
	background-color: blue;
	position: relative;
	overflow: hidden;
	float: right;
}
#sideBar iframe{
	height: 100%;
	width: 100%;
	border: none;
}
#content{
	/*background: darkblue;*/
	height: 82%;
	width: 75%;
	float: right;
	/*border: 2px solid #555;*/
	background-color: green;
	overflow: hidden;
}

#content iframe{
	height: 100%;
	width: 100%;
	border: none;
}
#footer{
	/*border: 2px solid #F14;*/
	width: 100%;
	clear: both;
	/*color: #c9c9c9;
	background: #35B;
	text-align: center;
	font-size: 15px;
	font-size: 12px;
	color: #c9c9cc;	
	border-top: 1px solid #000;*/
	position: absolute;
	bottom: 0px;
}

#footer img{
	vertical-align:middle;/*垂直居中*/
}

#footer a {
color: #c9c9c9;
text-decoration: none;/*让下划线消失*/
}

/*
必须设置宽度，才能浮动
*/
#footer #temp2 {
width: 25%;
float: right;
text-align: right;
padding-right: 10%;
}
/*
鼠标放上去变色
*/
#footer a:hover {
color: #db6d16;
}

frame.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>Insert title here</title>
<link rel="stylesheet" href="css/frame.css" type="text/css" media="all" /> 


</head>
<body>
	<div id="box">
		<div id="header"><img src="images/banner.gif"></img></div>
		<div id="temp1">
			<div id="mainMenu"></div>
			<div id="space"></div>
		</div>

		<div id="content">
		<iframe src="map.html"></iframe>

		</div>
		<div id="sideBar">
			<iframe src="left.html"></iframe>
		</div>
		<div id="footer">
			<img src="images/foot.gif"></img>
		</div>
	</div>
</body>
</html>