今天学习了用CSS对网页进行简单的布局，感觉还不错，下面来分享一下。
首先用div给页面分块是基础，网页布局就是将网页合理的分成一个一个块。
接下来写CSS层叠样式，给每个要定义样式的Div定义一个Class或id,在对应的Class里面写好样式，这里最主要的用到的属性有margin，padding，width，height，background，border等等。
下面来一个页面布局实例：
<!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=UTF-8">
<title>css2,布局练习</title>
<style type="text/css">
body{margin: 0;padding:0;
}
.backgroud{width:100%;height:1060px;
background-image: url("img/p1.jpg"); background-position:center; background-repeat: no-repeat;}
.head{ width: 800px;height: 100px;margin: 0 auto; background-color: #ccc}
.content{ width: 70%;height: 400px;margin: 40px auto; background-color: #ccc; opacity:0.5;}
.con1{ width: 100px;height: 100%; background-color: #444;float: left;}
.con2{ width: 700px;height: 100%; background-color: #999;float: left;}
.con3{ width: 100px;height: 100%; background-color: #444;float: right;}
.footer{}
}
</style>
</head>
<body>
<div class="backgroud">
<div class="head">
</div>
<div class="content" >
<div class="con1">
</div>
<div class="con3">
cont3
</div>
<div class="con2">
<div class="text">文字测试，哈哈</div>
</div>
</div>
</div>
</body>
</html>
首先body{margin: 0;padding:0;}我把body的内外边距变成零，这里可以让整版的背景彰显出来，好看。同时center让内容居中。
接下了是定义页头，一头是灰色背景.head{ width: 800px;height: 100px;margin: 0 auto; background-color: #ccc}宽度为800px.
主体部分分了三列
.content{ width: 70%;height: 400px;margin: 40px auto; background-color: #ccc; opacity:0.5;}
.con1{ width: 100px;height: 100%; background-color: #444;float: left;}
.con2{ width: 700px;height: 100%; background-color: #999;float: left;}
.con3{ width: 100px;height: 100%; background-color: #444;float: right;}
这里的content为内容的载体，opacity:0.5;可以让内容变透明。
相关推荐
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
在网页设计领域，Div+CSS是构建网页布局和样式的主流技术。本教程"Div+CSS网页样式与布局从入门到精通"旨在帮助初学者掌握这一核心技术，通过实例深入理解其工作原理和应用技巧。下面将详细介绍Div和CSS的基础概念、...
《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活且响应式的网页布局。Div是HTML中的一个容器元素，用于组织网页内容，而CSS 3.0则是层叠样式表的最新版本...
《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源，它涵盖了CSS（层叠样式表）和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例，旨在帮助用户从实践中掌握网页布局的...
HTML5+CSS3 网页布局任务教程课件汇总整本书电子教案全套课件完整版 ppt 教学教程 HTML5+CSS3 是网页开发的两大基石， HTML 负责网页的结构， CSS 负责网页的表现。网页开发需要使用 HTML 和 CSS 语言， HTML 负责...
在“HTML＋CSS网页设计与布局 从入门到精通”这个资源中，你可以期待学习到从基础的HTML标签语法到复杂的CSS布局技巧，包括如何创建交互式表单、响应式设计和动画效果。这将帮助你逐步掌握网页设计的基本技能，无论...
在学习网页布局的过程中，...总结来说，掌握CSS中的定位机制、盒模型、布局原则、自动居中技巧以及响应式布局方法，是学习CSS进行网页布局的重中之重。通过实践和应用这些知识点，可以构建出既美观又实用的网页布局。
本书的核心内容围绕着如何利用DIV（层）和CSS（级联样式表）进行高效的网页布局与美化展开，旨在帮助读者掌握这一现代网页设计的基础和关键技能。 DIV元素是HTML中的一个块级元素，常被用来作为页面布局的容器，...
本资源“CSS标准网页布局开发指南（光盘）源码”是一份专门针对CSS布局技术的学习资料，旨在帮助开发者掌握创建高效、标准化的网页布局技巧。 首先，我们要理解CSS布局的基础概念。在网页布局中，我们通常会遇到...
本主题将深入探讨CSS如何实现网页布局，特别是层布局，以及涵盖50种不同的网页布局策略。 一、CSS基础布局概念 1. 流动布局（Flow Layout）：这是最基础的布局方式，元素按照HTML结构的顺序从左到右、从上到下排列...
在设计网页的时候，利用css样式进行布局
DIVCSS网页布局实例：十步学会用CSS建站 本资源主要讲解了如何使用CSS从头开始创建一个完整的网页布局，通过十个步骤，指导读者一步步地构建一个完整的网站。下面是该资源的知识点总结： 1. 规划网站：网站的规划...
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
《CSS标准网页布局开发指南》是一本专注于网页布局设计的资源集合，主要针对使用CSS（层叠样式表）来创建高效、响应式和易于维护的网页布局。在现代Web开发中，CSS是不可或缺的一部分，它使得我们可以独立于内容来...
压缩包中的"书中实例"可能包含了各种使用CSS.DIV实现的网页布局案例，如两列布局、三列布局、响应式设计等。通过实践这些例子，你可以更直观地学习到CSS.DIV在实际项目中的应用。 总结，CSS.DIV是网页设计的基石，...
第5章 用CSS设置网页中的背景 5.1 背景颜色 5.2 背景图片 5.3 背景综合一：我的个人主页 5.4 背景综合二：古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制...
《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程，旨在通过实例教学，深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...
这个“css+div网页布局实例40例”集合提供了一系列实战教程，帮助学习者掌握如何用CSS和div进行高效、灵活的网页设计。以下是对这些实例中的关键知识点的详细解释： 1. **CSS基础**：首先要理解CSS的基本语法，包括...
本主题聚焦于“div+css网页布局设计模板源代码”，我们将深入探讨这一主题，了解相关知识点。 1. **Div元素**：`<div>`是HTML中的一个通用容器元素，用于组合其他HTML元素，提供一种组织和控制页面结构的方式。通过...