<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三栏</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
</html>
分享到：
相关推荐
三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一...
其次，CSS3（层叠样式表第三版）是样式化HTML元素的关键工具，它带来了许多新的功能和属性，如动画、过渡、伪类和选择器等。在这个液态菜单中，CSS3的动画和过渡效果是实现液态流动的关键。例如，可以使用`...
- **三列固定布局结构**：深入探讨了如何使用CSS实现三列固定布局，这是Web设计中常见且重要的布局模式。通过精确的宽度设置和浮动元素控制，可以创建响应式且美观的页面布局。 - **自顶向下CSS编码方法**：介绍了...
此外，双栏布局可以有效地展示相关且具体的内容，例如引用或数据，保持页面整洁。 引用名人名言可以增强你的论点，比如Coco Chanel的名言：“世界上最美的颜色是适合你的颜色。”这不仅给人留下深刻印象，还能使你...
#### 三、学科工具栏功能介绍 **1. 数学工具栏** - **手绘数学公式功能**：支持手写输入数学公式。 - **数学公式功能**：提供预设的数学公式模板。 - **函数功能**：包括常见的函数图形绘制。 - **平面图形功能**、...
改进的工具栏和菜单布局使用户能够更快速地访问常用命令，提高工作效率。此外，自定义工作区的功能使得用户可以根据个人工作流程定制自己的界面，使工作更加得心应手。 在建模方面，3DS Max 7引入了新的建模工具和...
这是因为矩形是最基本且易于处理的形状，能够满足大多数网页布局的需求。 #### 二十三、制作印刷品时的注意事项 - **知识点**: 在制作印刷品过程中需要注意的事项。 - **详细说明**: 在准备用于印刷的图像时，需要...