`
joeblow
  • 浏览: 177811 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV实现的BorderLayout布局

    博客分类：
  • AJAX
 
阅读更多 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;border:0;">
 <head>
  <title>DIV BorderLayout Test</title>
 </head>
<style type="text/css">
.layout-north{height:10%;}
.layout-middle{height:70%;background:yellow;}
.layout-west{float:left;width:20%;height:100%;background:green;}
.layout-center{float:left;width:70%;height:100%;background:grey;}
.layout-east{float:right;width:10%;height:100%;background:red;}
.layout-south{height:20%;}
</style>
 <body style="height:100%;margin:0;">
	<div class="layout-north">
		north
		<br>
		north
	</div>
	<div class="layout-middle">
		<div class="layout-west">
			west
		</div>
		<div class="layout-center" >
			center
		</div>
		<div class="layout-east">
			east
		</div>
	</div>
	<div class="layout-south">
		south
	</div>
 </body>
</html>
分享到：
| some firefox add-ons
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3 flex布局之快速实现BorderLayout布局

    【BorderLayout布局】是一种常见的UI设计模式，常用于后端UI和前端开发中，例如HTML的frames或现代Web应用。这种布局将页面划分为五个区域：北（header）、东（aside左侧）、中（content）、西（aside右侧）和南...

    Extjs之布局

    而布局管理器（LayoutManager）是Extjs中一个非常关键的部分，它负责组织和管理用户界面组件的空间分布，从而实现各种复杂的界面布局。 #### Accordion布局 Accordion布局，也称为手风琴布局，是由`Ext.layout....

    Extjs面板和布局

    - **布局方式**：Extjs面板支持多达10种不同的布局方式，包括但不限于`BorderLayout`、`CardLayout`、`FitLayout`、`TableLayout`等。这些布局方式允许开发者以非常灵活的方式组织面板内部的内容。 - **嵌套**：...

    java课程设计—计算器.pdf

    `BorderLayout`和`GridLayout`等被提及，它们是Swing中不同的布局管理器。`BorderLayout`将容器分为五个区域（NORTH、SOUTH、EAST、WEST和CENTER），而`GridLayout`使组件在容器中按网格排列。 4. 事件监听和响应：...

    面板收缩的功能

    而在桌面应用中，布局管理器（如Java的BorderLayout或WinForms的TableLayoutPanel）可以帮助调整控件的位置和大小。 4. 动画效果：为了提供更流畅的用户体验，收缩和展开过程可以添加动画效果。这可能涉及到帧动画...

    JAVA编写计算器

    - 使用`BorderLayout`、`GridLayout`和`FlowLayout`进行布局。 - `BorderLayout`用于整体布局。 - `GridLayout`用于按钮排列。 - `FlowLayout`用于文本框和其他组件的布局。 - **控件初始化**： - 创建多个`...

    EXT中文手册5.pdf

    `BorderLayout` 是 Ext JS 提供的一种布局管理器，它将容器划分为五个区域：北（North）、南（South）、东（East）、西（West）以及中心（Center）。每个区域可以放置一个面板或组件。 #### 1.2 BorderLayout 的...

    java编写的计算器，能实现加减乘除

    //把mainMenu、textAnswer、panel1都放进panel容器中，用BorderLayout布局管理器管理 panel.add(mainMenu, BorderLayout.NORTH); panel.add(textAnswer, BorderLayout.CENTER); panel.add(panel1, ...

    2021-2022计算机二级等级考试试题及答案No.401.docx

    - **正确答案**：Java.awt包提供了多种布局管理器，如BorderLayout(边框布局)、BoxLayout(盒式布局)、CardLayout(卡片布局)、FlowLayout(流式布局)、GridBagLayout(网格包布局)、GridLayout(网格布局)、GroupLayout...

    5．设计一个逻辑算术计算器,用来输入所需的数,并计算结果

    - 使用 `BorderLayout` 和 `GridLayout` 等布局管理器组织计算器界面元素。 - `JPanel` 组件灵活运用，使计算器界面更加整洁美观。 #### 五、总结 该计算器实现了较为丰富的功能，不仅限于基本的算术运算，还包括...

    2021-2022计算机二级等级考试试题及答案No.13289.docx

    19. Frame对象布局管理器：Frame对象默认使用BorderLayout布局管理器。正确答案是B. BorderLayout。 20. 十六进制整数：0xC5表示十六进制数，等同于十进制的197。正确答案是正确。 21. CSS布局：CSS主要使用`&lt;div&gt;...

    unieap开发使用笔记三年工作记录总结.docx

    * 使用 BorderLayout 布局，TitlePane 中的 height 必须设置为 100% * 在 TitlePane 中可以嵌入其他页面，使用 ref 属性将系统中的任何一个页面嵌套在 TitlePane 里面 * 使用 div 元素，type 为 buttons，height 为 ...

    JAVA计算器

    - 使用`BorderLayout`布局管理器来组织各个面板，使界面更加整洁有序。 - `JTextField`文本框位于顶部，用于显示当前输入值和计算结果。 - 下方是各种按钮，按照功能进行分组，便于用户操作。 ##### 3.2 逻辑处理 ...

    老师整理的extjs学习笔记

    - **BorderLayout**: 边框布局，用于创建类似 Windows 窗口的布局结构。 每种布局管理器都有其独特的用途和配置选项，开发者可以根据实际需求选择合适的布局管理器。 #### 六、ExtJS 表单 -- Ext.form.FormPanel ...

    layout_assignment

    有时候，内置的布局管理器可能无法满足所有需求，这时开发者可能需要编写自己的布局管理器，以实现更复杂或特定的布局效果。 学习布局管理不仅涉及Java基础知识，还涉及到对用户体验的理解。良好的布局设计能够提升...

    2021-2022计算机二级等级考试试题及答案No.15140.docx

    22. AWT中常用的布局管理器包括FlowLayout、BorderLayout、CardLayout和GridLayout，它们分别用于不同的布局需求。 以上解析了部分题目，每个知识点都涉及到计算机科学的基础概念，这对于准备计算机二级等级考试的...

    模拟windows计算器java源码

    - 使用`BorderLayout`布局管理器来组织子组件。 2. **文本字段设置**： - 初始化`TextField`，并设置初始值为“0.”。 - 禁止编辑。 3. **面板与按钮布局**： - 使用不同的布局管理器（如`GridLayout`和`...

    2021-2022计算机二级等级考试试题及答案No.12412.docx

    - **AWT 布局管理器类型**：Java AWT 包提供了多种布局管理器，如 `BorderLayout` 边框布局、`BoxLayout` 布局、`CardLayout` 卡片布局、`FlowLayout` 流动布局、`GridBagLayout` 网格包布局、`GridLayout` 网格布局...

Magicbox
Global site tag (gtag.js) - Google Analytics