<!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=gb2312">
<title>固定浮动布局-三列</title>
<link rel="stylesheet" style="text/css" href="style2.css">
</head>
<body>
<div id="header"><h1>上标题</h1></div>
<div id="body">
<div id="navl">左导航</div>
<div id="main">中内容</div>
<div id="navr">右导航</div>
</div>
<div id="footer"><p>下版权</p></div>
</body>
</html>
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
margin:10px;
}
#header{
border:1px solid black;
width:600px;
height:60px;
margin:0 auto;
margin-bottom:10px;
}
#header h1{
height:60px;
line-height:60px;
font-size:16px;
text-align:center;
}
#body{
width:600px;
margin:0 auto;
}
#navl{
border:1px solid black;
width:150px;
height:500px;
float:left;
margin-bottom:10px;
background:lightcyan;
}
#main{
border:1px solid black;
width:294px;/*边框也算一个像素*/
height:500px;
float:left;
margin-bottom:10px;
background:lightblue;
}
#navr{
border:1px solid black;
width:150px;
height:500px;
float:right;
margin-bottom:10px;
background:lightyellow;
}
#footer{
border:1px solid black;
width:600px;
height:60px;
line-height:60px;
margin:0 auto;
text-align:center;
clear:both;
}
效果如下：
- 大小: 7.1 KB
分享到：
相关推荐
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变，无论是对于简化网页代码，还是提升网页性能，都有显著效果。 软件支持绝对定位和流定位，这意味着它可以处理复杂的布局...
### div+css布局实例——淘宝网首页分析 #### 一、引言 随着互联网技术的不断发展，网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中，div+css布局作为一种灵活且高效的网页...
在网页设计中，`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容，并利用CSS（层叠样式表）来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点： 1. **DIV元素**：`<div>`（division）是HTML中的一个通用容器元素，用于组织页面内容。...
5. **浮动布局**：早期的Div+CSS布局中，浮动（float）经常被用来实现多列布局。元素设置为浮动后，会从当前流中移出，允许其他元素移动到其旁边。然而，由于浮动可能导致父元素高度塌陷等问题，现在更多地使用...
在Div+CSS布局中，图像不仅可以作为内容的一部分，还可以作为背景图，通过CSS的background-image属性进行设置，实现背景平铺、裁剪、定位等效果。 学习Div+CSS，首先要熟悉HTML的基本结构和Div元素的用法，然后掌握...
新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明： 1. **规划网站**：在开始布局前，首先要规划网站的结构，明确各个部分的功能和尺寸。例如，导航条（Main ...
《Div+CSS布局实例源码》是一份专为学习和精通Div+CSS布局技术而设计的资源包。这个包包含了丰富的实例，旨在帮助初学者和有一定基础的学习者深入理解和掌握网页布局的核心技巧。Div+CSS是现代网页设计的基础，通过...
在网页设计过程中，如何应用DIV+CSS布局是一个非常重要的问题。首先需要构思网页的布局，使用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局简单的构画出来。然后，需要根据构思图来规划一下页面的布局，...
《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程，旨在通过实例教学，深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...
在`div+css`布局中，我们可以通过设置`display`属性（如`block`、`inline-block`或`flex`）来调整`div`元素的显示方式，通过`position`（如`static`、`relative`、`absolute`或`fixed`）来控制元素的位置，使用`...
《div+css布局入门教程》是一本专门为初学者设计的指南，旨在帮助读者掌握网页布局的基本技巧和概念。在这个数字化的时代，网页设计是互联网领域不可或缺的一部分，而div+css布局则是构建网页结构的关键技术。本教程...
《深入理解Div+CSS布局：构建高效网页设计》 在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升...
盒模型是理解CSS布局的关键。它包括元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些都影响了元素的最终尺寸。通过调整这些属性，可以精确控制元素的大小和空间分布。 在创建简洁大气的...
这个RAR压缩包包含了一份名为“DIVCSS布局大全.pdf”的文档，旨在全面介绍如何利用HTML中的div元素和CSS（层叠样式表）进行高效、灵活的网页布局设计。下面将详细阐述div+css布局的核心知识点。 1. **div元素**：在...
**Div+CSS布局详解** Div+CSS布局是网页设计中常用的一种技术，它将内容（HTML元素）与表现（样式）分离，提高了网页的可维护性和可扩展性。Div是HTML中的一个容器元素，用于组织页面结构，而CSS（Cascading Style ...