`

2009.12.25(3)——我写div+css

阅读更多
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>



分享到:
评论

相关推荐

    基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip

    基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip

    基于python实现树莓派和传感器的植物生长环境评估信息系统

    【作品名称】:基于python实现树莓派和传感器的植物生长环境评估信息系统 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:基于python实现树莓派和传感器的植物生长环境评估信息系统

    优质资源,Yearning Mysql SQL审核平台

    Yearning Mysql SQL审核平台(使用go语言)

    c语言课程设计-职工资源管理系统.rar

    void displayMenu() { printf("\n+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\n"); printf("+ 职工资源管理系统 +\n"); printf("+ +\n"); printf("+ 1. 录入职工信息 +\n"); printf("+ 2. 显示全部职工信息 +\n"); printf("+ 3. 根据工号查询

    华为OD机试D卷 - 来自异国的客人 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    2024华为OD机试D卷 - 最长的指定瑕疵度的元音子串 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    基于nodejs电影交流网站(源码 + 说明文档)

    基于nodejs电影交流网站(源码 + 说明文档) 第二章 开发技术介绍 1 2.2.1 Nodejs技术 1 2.2.2 mysql数据库介绍 1 2.2.3 MySQL环境配置 1 2.2.4 B/S架构 2 2.2.5 Vue框架 2 第三章 系统分析 1 3.1 可行性分析 1 3.1.1 技术可行性 1 3.1.2操作可行性 1 3.1.3 经济可行性 1 3.2性能需求分析 1 3.3功能分析 2 第四章 系统设计 4 4.1功能结构 4 4.2 数据库设计 4 4.2.1 数据库E/R图 4 4.2.2 数据库表 5 第五章 系统功能实现 11 5.1系统功能模块 11 5.2后台登录模块 12 5.2.1管理员功能 13 5.2.2 用户功能 15 第六章 系统测试 16

    setuptools-0.9.8.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-23.2.1.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-10.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    App工具查看md5、公钥等信息

    App工具查看md5、公钥等信息

    2024华为OD机试D卷 - 高效的任务规划 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    基于co-revDSD方法的计算程序

    基于co-revDSD方法的计算程序

    setuptools-54.0.0-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    课程设计 基于FPGA的电子表源码+全部资料齐全.zip

    【资源说明】 课程设计 基于FPGA的电子表源码+全部资料齐全.zip课程设计 基于FPGA的电子表源码+全部资料齐全.zip 【备注】 1、该项目是高分课程设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11/linux测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    Fig0309.tif

    Fig0309.tif

    setuptools-5.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-8.0.1.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    华为OD机试D卷 - 连续字母长度 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    第十章 Python标准库(jupyter版 人工智能编程基础)

    第十章 Python标准库(jupyter版 人工智能编程基础)

Global site tag (gtag.js) - Google Analytics