使用DIV代替Frame：
1.使用DIV的绝对定位样式：position:absolute;
2.指定上下左右的像素如：left:0px; top:0px; right:0px; height:70px;
3.如果想自适应屏幕的分辨率和窗口大小，则不要指定height和width属性值
2.2具体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV_Frame</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#CCCCCC; line-height:1.6;}
.top { position:absolute; background-color: #FFFFCC; left:0px; top:0px; right:0px; height:70px;}
.side { position:absolute; background-color:#CCCCCC; left:0px; top:70px; bottom:0px; width:210px; overflow:auto;}
.main { position:absolute; left:210px; background-color:#99FFFF; top:70px; bottom:0px; right:0px; overflow:auto;}
</style>
</head>
<body>
<div class="top"> Your Logo.....<br/> TopMenu.....</div>
<div class="side">
Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>
</div>
<div class="main">
自适应窗口大小，不指定高度，无需关注屏幕分辨率。<br />abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc<br />
abc<br />abc<br />abc<br /><br /><br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
</div>
</body>
</html>
2.3说明：附件里我放了一个带缩进功能的样例，使用JQuery实现。
分享到：
相关推荐
在`div`模拟的框架中，我们可以创建自定义事件或者使用`MutationObserver`监听DOM的变化，以实现实时同步和数据交换。 最后，关于SEO优化，由于`iframe`的内容往往不会被搜索引擎抓取，这对依赖搜索引擎流量的网站...
html静态页面源代码 静态网页制作代码【CSS+DIV】 HTML静态页面(CSS+DIV) 这是期末老师HTML老师布置的。本来要求一个，但我做了三个。 主要是CSS+DIV做的（3个项目）。 对于页面的布局，代码的规格，命名，都很清晰...
在网页设计领域，"经典div+css静态页面"是指使用HTML和CSS技术构建的非交互式的网页。这种页面不依赖JavaScript或者其他服务器端脚本，主要通过HTML结构（div元素）和CSS样式来呈现内容和布局。下面将详细介绍div和...
为了解决这个问题，开发者常常使用`div`元素配合CSS和JavaScript来模拟下拉菜单，以实现更加灵活和美观的效果。在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的...
总之，`div`在静态页面开发中扮演着核心角色，它是构建网页结构和样式的基础。通过理解和熟练运用`div`，开发者能够更好地控制页面的布局，创建出美观且功能丰富的静态网页。在学习过程中，不断实践和探索不同的布局...
JS 在Div中frame操作应用 JS 在Div中frame操作应用 JS 在Div中frame操作应用 JS 在Div中frame操作应用 JS 在Div中frame操作应用
在"展业通新版"这个项目中，初学者可以学习如何使用HTML创建网页的基本结构，然后用CSS来控制样式，通过div进行页面布局。理解这三个技术的协同工作原理，是构建美观、功能完善的静态网站的关键步骤。在实践中，可以...
描述中提到的"jquery DIV模拟select"指的是使用jQuery库来实现这个功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使得开发这样的模拟下拉框变得更加简单。通过jQuery，我们...
在网页设计中，有时出于美观或者交互性的考虑，开发者会使用`div`元素来模拟`select`下拉菜单的效果。这种做法通常被称为“div模拟select”。本教程将深入探讨如何利用`div`实现这一功能，并提供一个实用版的示例。 ...
总之，使用div模拟select自定义下拉列表框是网页开发中常见的技巧，它能够帮助开发者突破原生HTML元素的限制，实现更加灵活和个性化的交互设计。通过熟练掌握这一技术，可以提升网页的用户体验，增加网站的吸引力。
在网页开发中，有时出于设计或交互的需求，我们可能需要使用`div`元素来模拟`select`下拉框的功能，并实现省市联动的效果。这是一种常见的前端技术应用场景，特别是在响应式设计和自定义UI组件中。本篇文章将详细...
【标题】：“电子商务网站静态页面美观大方代码简洁div+css商城静态页面”揭示了这个项目是关于电商网站设计的，其核心在于使用了Div+CSS技术来构建静态页面，追求界面美观、代码简洁，旨在提升用户体验。...
在div模拟中，可以通过添加额外的div来模拟这种效果，或者使用CSS的`border-collapse`属性设置为`collapse`来实现。 3. **自适应宽度**：为了让div模拟的table能根据内容自适应宽度，可以使用`width: auto`，并利用...
在网页设计领域，DIV+CSS是一种广泛应用于构建页面布局的技术，它使得网页的结构与样式分离，提高了网页的可维护性和可访问性。本教程“全面解析DIV+CSS静态网页教程”是专为初学者设计的，旨在帮助你在短短十天内...
在本项目中，"静态网页设计（CSS+div）"是一个关于创建商城网页的课程设计，主要使用了HTML和CSS这两种核心技术。HTML负责构建网页的基本结构，而CSS则用于美化和布局网页元素，使得页面呈现出专业且吸引人的视觉...
html css div 淘宝首页购物静态模板
本项目正是这样一个实例，它实现了移动端模拟数字键盘，可以保留两位小数，并通过div元素模拟光标和input的行为。 首先，我们需要理解这个项目的结构。由于没有具体的代码，我将基于常规实现方式来阐述相关知识点：...
【标题】"DIV+CSS静态HTML网页设计模板.zip"是一个包含使用了HTML和CSS技术的网页设计模板。这种模板主要用于创建静态网页，其中HTML（超文本标记语言）负责定义页面结构，而CSS（层叠样式表）则用来控制页面的布局...
本主题聚焦于一个名为"静态网页作品-精美DIV网页源代码成品作品9页面"的项目，这是一份使用Dreamweaver或FrontPage等网页设计工具完成的期末课程设计作业。这个压缩包包含了一个九个页面的产品展示类网站的完整源...