我写div+css过程

最新推荐文章于 2025-08-07 11:18:45 发布

原创最新推荐文章于 2025-08-07 11:18:45 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #border #iframe #stylesheet #exception

本文介绍了一种使用CSS进行网页布局的方法，并针对不同版本的Internet Explorer浏览器提供了兼容性解决方案。详细展示了通过设置特定属性来实现跨浏览器一致性的示例。

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

这是原先我写的备忘的尽管写的很烂
frame.css
Java代码
CHARSET "UTF-八";
html,body{
margin: 零px;
padding: 零px;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: 零px;
padding: 零px;
}
/*由于用了相对位置格局，应分辨率太大时，图片和文字就会被拉伸
之所以采取max-width来设立一个最大的宽度，但是这个属性IE六以次
不支持，之所以作以次更动
!important 唯有FF和IE七之上才支持
_XXX唯有IE6支持
*XXXIE七,IE六都支持
*+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: 二px solid #零E六;*/
/*background-color: navy;*/
height: 十%;
}
#header img{
height: 100%;
width: 100%;
}
#temp一{
height: 五%;
}
#mainMenu{
/*border: 二px solid #C26;*/
/*background-color: purple;*/
height: 90%;
/*margin-bottom: 三px;*/
background: url("../images/mainMenu.bmp") repeat;/*设立背景图片，并上下左右填充*/
}
#space{
height: auto;
}
#sideBar{
/*background: bule;*/
height: 82%;
width: 25%;
/*border: 二px 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: 二px solid #555;*/
background-color: green;
overflow: hidden;
}

#content iframe{
height: 100%;
width: 100%;
border: none;
}
#footer{
/*border: 二px solid #F14;*/
width: 100%;
clear: both;
/*color: #c九c九c九;
background: #35B;
text-align: center;
font-size: 15px;
font-size: 12px;
color: #c九c九cc;
border-top: 一px solid #000;*/
position: absolute;
bottom: 零px;
}

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

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

/*
务必设立宽度，才力浮动
*/
#footer #temp二 {
width: 25%;
float: right;
text-align: right;
padding-right: 十%;
}
/*
鼠标放上去变色
*/
#footer a:hover {
color: #db六d16;
}

CHARSET "UTF-八";
html,body{
margin: 零px;
padding: 零px;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: 零px;
padding: 零px;
}
/*由于用了相对位置格局，应分辨率太大时，图片和文字就会被拉伸
之所以采取max-width来设立一个最大的宽度，但是这个属性IE六以次
不支持，之所以干以次更改
!important 唯有FF和IE七之上才支持
_XXX唯有IE6支持
*XXXIE七,IE六都支持
*+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: 二px solid #零E六;*/
/*background-color: navy;*/
height: 十%;
}
#header img{
height: 100%;
width: 100%;
}
#temp一{
height: 五%;
}
#mainMenu{
/*border: 二px solid #C26;*/
/*background-color: purple;*/
height: 90%;
/*margin-bottom: 三px;*/
background: url("../images/mainMenu.bmp") repeat;/*设立背景图片，并上下左右填充*/
}
#space{
height: auto;
}
#sideBar{
/*background: bule;*/
height: 82%;
width: 25%;
/*border: 二px 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: 二px solid #555;*/
background-color: green;
overflow: hidden;
}

#content iframe{
height: 100%;
width: 100%;
border: none;
}
#footer{
/*border: 二px solid #F14;*/
width: 100%;
clear: both;
/*color: #c九c九c九;
background: #35B;
text-align: center;
font-size: 15px;
font-size: 12px;
color: #c九c九cc;
border-top: 一px solid #000;*/
position: absolute;
bottom: 零px;
}

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

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

/*
务必设立宽度，才略浮动
*/
#footer #temp二 {
width: 25%;
float: right;
text-align: right;
padding-right: 十%;
}
/*
鼠标放上去变色
*/
#footer a:hover {
color: #db六d16;
}

frame.html
Java代码

frame.html

Java代码

<!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>

<!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>

本文来源：
我的异常网
 Java Exception
Dotnet Exception
Oracle Exception