<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{width:100%;height:100%;overflow:hidden;}
.viewPort{position:absolute;width:100%;height:100%;overflow:hidden;}
.top,.bottom,.left,.right,.inner{border:1px solid blue;}
.top{position:absolute;height:100px;width:100%;}
.bottom{position:absolute;bottom:0;height:100px;width:100%;}
.left{position:absolute;width:100px;height:100%;}
.right{position:absolute;width:100px;right:0;height:100%;}
.content{position:absolute;top:100px;bottom:100px;width:100%;
_height: expression(documentElement.clientHeight-200); }
.inner{position:absolute;left:100px;right:100px;height:100%;
_width: expression(documentElement.clientWidth-200);
}
.hideTop .top{display:none;}
.hideTop .content{top:0;}
.hideBottom .bottom{display:none;}
.hideBottom .content{bottom:0;_height: expression(documentElement.clientHeight-100); }
.hideLeft .left{display:none;}
.hideLeft .inner{left:0;_width: expression(documentElement.clientWidth-100);}
.hideRight .left{display:none;}
.hideRight .inner{right:0;_width: expression(documentElement.clientWidth-100);}
</style>
</head>
<body style="">
<div class="viewPort hideBottom">
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="content">
<div class="inner">
xxxx
</div>
<div class="right">right</div>
<div class="left">left</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
5. **CMS 系统**：内容管理系统（CMS）如WordPress、Drupal和Joomla提供了预定义的区域模板，让用户无需编写代码就能管理和编辑页面布局。这些系统通常支持插件和主题，允许进一步自定义页面结构。 6. **SEO 优化**...
JSP页面布局通常包括头部、主体和底部等部分，每个部分可能包含多个元素，如导航栏、内容区域和页脚。布局设计的目标是使网页结构清晰，易于理解和导航。这可以通过多种技术来实现，如HTML标签、CSS样式和JavaScript...
EasyUI提供了如"layout"这样的组件，可以快速构建复杂的页面布局，包括北（north）、南（south）、东（east）、西（west）和中心（center）五个区域，方便地实现页面的分栏和伸缩。例如，开发者可以通过以下代码创建...
HTML5和CSS3是现代网页开发的核心技术，它们在页面布局方面提供了强大的功能和灵活性。HTML5作为结构化的标记语言，负责定义网页内容的结构，而CSS3则用于设计和控制网页的样式、布局和动画效果。下面我们将深入探讨...
虽然页面布局提供了一种便捷的方式来维护多个页面的统一性，但在某些情况下，可能需要创建不继承任何页面布局的独立页面，以适应特殊的设计需求或功能要求。这种灵活性使得SharePoint成为了一个强大且适应性强的内容...
在ArcGIS中，**页面布局**(简称布局)是指在一个虚拟页面上对各种地图元素进行组织和排版的方式，其主要目的是为了实现高质量的地图打印。页面布局包含了丰富的地图元素，如数据框、比例尺、指北针、地图标题、描述性...
页面布局主要包括以下几个部分： - **页眉** (Header): 页面顶部区域，通常用于显示文档标题、作者等信息。 - **主体** (Body): 文档的主要内容部分，包括文字、表格、图片等。 - **页脚** (Footer): 页面底部区域...
在网页设计中，页面布局是至关重要的组成部分，它决定了用户如何与网站互动和获取信息。HTML（HyperText Markup Language）是构建网页的基础语言，用于定义网页的结构和内容。在这个主题“关于页面的布局”中，我们...
在ASP.NET中，页面布局是构建动态Web应用程序的关键部分，它决定了网站的外观和用户体验。在本主题中，我们将深入探讨如何使用div+css技术来实现高效且灵活的页面布局。 首先，理解ASP.NET页面的基本结构至关重要。...
RP页面布局是网页设计中的一个重要概念，特别是在产品经理的工作中，理解和掌握这一技术是至关重要的。RP，可能是指 Rapid Prototyping（快速原型），这是一种常见的产品设计方法，通过快速创建页面布局来展示和测试...
在网页设计中，`Div`（Division）元素是HTML中的一种结构化标签，常用于创建网页的区域或容器，以实现灵活的自定义页面布局。`Div`元素本身没有特定的样式，但通过CSS（层叠样式表）的运用，我们可以赋予它各种样式...
这两个文件是jQuery Layout插件的组成部分，它提供了一个强大的、可自定义的页面布局解决方案。通过这个插件，开发者可以轻松地创建多区域、响应式的页面布局。`jquery.layout.js`是未压缩的版本，适合调试和学习，...
在网页设计中，"可以自由调页面布局DIV"是一个关键概念，它涉及到前端开发中的响应式设计和灵活性。DIV（Division）是HTML中一个非常重要的布局元素，用于将页面分割成多个区域，每个区域可以独立设置样式，实现复杂...
本文将深入探讨CSS页面布局方式，旨在帮助你理解和掌握如何有效地构建网页结构。"CSS页面布局方式"这一主题涵盖了多种布局模式，这些模式在不同场景下各有优势，下面将逐一介绍。 1. **传统布局方式** - **表格...
【JavaMasterPages】是一个创新的页面布局解决方案，旨在简化Java Web应用中的页面设计与开发，无需依赖任何外部框架。这个项目的核心目标是提供一个类似ASP.NET Master Pages的功能，让开发者可以创建一个统一的...
这篇“Xamarin XAML语言教程页面布局篇”深入探讨了如何利用XAML来有效地设计和管理移动应用的页面布局。XAML允许开发者以声明式的方式定义UI元素及其相互关系，极大地提高了开发效率。 页面布局是任何应用程序用户...
在设计和构建一个高效、易用且吸引用户的网页时，页面布局是至关重要的因素。以下将详细讨论拉钩网页面布局的一些关键知识点。 首先，拉钩网的页面布局通常采用“F型”布局，这是网页设计中常见的用户浏览模式。...
### 响应式Web页面布局 #### 一、响应式设计意味着什么？ 响应式设计（Responsive Web Design，简称RWD）是一种使网站能够根据用户所使用的设备屏幕尺寸自动调整其布局的技术。它允许设计师和开发者创建出能够在...
此外，还可能包含对页面布局的设置，如区块的尺寸、位置、间距等。 综上所述，这个"jQuery页面区域预加载布局代码"项目是一个综合运用了jQuery、CSS和Web字体优化技术的实例，旨在提升网页加载速度，改善用户体验。...
在"09-页面交互与布局"这个文件中，很可能是包含了关于这些概念的深入讲解、实例分析和可能的设计模板，帮助开发者和设计师更好地理解和实践WebApp的页面交互与布局设计。学习并掌握这些知识，能够提升WebApp的整体...