第一部分
<style type="text/css">
body{margin:0;padding:0}
.top{height:100px;background:blue}
.main{width:800px;height:300px;background:black;margin:0 auto}
.foot{width:800px;height:100px;background:red;margin:0 auto}
</style>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
</body>
上面代码是网页的一列布局，其中有几个点和大家分享一下。
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
一般网页都是分上中下三部分，即代码中的“top”，“main”，“foot”
body{margin:0;padding:0}
这句话是为了让布局和html页面没有边距。
margin:0 auto
是为了让“main”，"foot"居中，0 是指上下的距离，auto指左右自适应
第二部分
<style type="text/css">
body{margin:0;padding:0}
.main{width:800px;margin:0 auto}
.left{width:30%;height:500px;float：left；background:red}
.right{width:70%;height:500px;float：right；background:blue}
</style>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
这第二部分是网页的二列布局。
与第一部分大体相同但主要是中间部分“main”，分成了两部分“left”，“right”。
二列布局最重要的是控制其宽度，即
.left{width:30%;}
设置可以是百分比，也可以是具体的数据如 300px，但左右总值是800px。
为了实现能分成两列，咱们需要用到float属性，即
float：left right
用于控制元素的位置(位于左，还是右)。
分享到：
相关推荐
在学习网页布局的过程中，...总结来说，掌握CSS中的定位机制、盒模型、布局原则、自动居中技巧以及响应式布局方法，是学习CSS进行网页布局的重中之重。通过实践和应用这些知识点，可以构建出既美观又实用的网页布局。
《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活且响应式的网页布局。Div是HTML中的一个容器元素，用于组织网页内容，而CSS 3.0则是层叠样式表的最新版本...
HTML5+CSS3 网页布局任务教程课件汇总整本书电子教案全套课件完整版 ppt 教学教程 HTML5+CSS3 是网页开发的两大基石， HTML 负责网页的结构， CSS 负责网页的表现。网页开发需要使用 HTML 和 CSS 语言， HTML 负责...
在设计网页的时候，利用css样式进行布局
本资源“CSS标准网页布局开发指南（光盘）源码”是一份专门针对CSS布局技术的学习资料，旨在帮助开发者掌握创建高效、标准化的网页布局技巧。 首先，我们要理解CSS布局的基础概念。在网页布局中，我们通常会遇到...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
《CSS标准网页布局开发指南》是一本专注于网页布局设计的资源集合，主要针对使用CSS（层叠样式表）来创建高效、响应式和易于维护的网页布局。在现代Web开发中，CSS是不可或缺的一部分，它使得我们可以独立于内容来...
《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程，旨在通过实例教学，深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...
[HTML5.CSS3网页布局和样式精粹].张亚飞.扫描版
通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组，并使用CSS来定义样式或行为。`<div>`元素本身没有特定的语义，它的主要价值在于组织内容和应用样式。 2. **CSS（Cascading Style Sheets）**：CSS是一种...
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
div+css网页布局学习是指使用div标签和css样式来设计和布局网页的技术。下面是学习div+css网页布局的相关知识点： 一、XHTML基础知识 * XHTML是HTML的后继版本，提供了一些新的功能和改进 * XHTML的主要特点是严格...
在网页设计领域，传统的`table`布局曾是构建网页结构的主要方式，但随着Web标准的发展，`div`结合`CSS`布局（层叠样式表）逐渐成为主流。`table`布局虽然简单易用，但在复杂性和可维护性上存在诸多问题，如不易控制...
下面我们就开始一步一步使用DIV+CSS进行网页布局设计。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我...
《DIV+CSS网页布局商业案例精粹光盘源文件》是一个集合了众多基于DIV和CSS技术的网页设计实例，旨在帮助读者深入理解并掌握这两种关键技术在实际商业项目中的应用。这个压缩包包含了丰富的源文件，提供了实践学习和...
ez-css初次体验，请不要和bootstrap等...而且EZ-CSS的扩展性很强，对浏览器兼容性较为友好，利用EZ-CSS，你可以快速的实现较为复杂的网页布局排版。介绍地址：http://blog.csdn.net/lht0211/article/details/45670537
《精通DIV+CSS3网页布局与样式源代码》是一份深度学习和实践Web前端开发的宝贵资源，它涵盖了DIV和CSS3在构建高效、响应式网页布局中的核心技术和实践方法。这一压缩包文件包含了实现各种网页布局和样式的源代码示例...
在网页设计领域，CSS（Cascading Style Sheets）版式布局是至关重要的技术，它用于控制网页元素的显示方式和位置。本主题将深入探讨CSS如何实现网页布局，特别是层布局，以及涵盖50种不同的网页布局策略。 一、CSS...
本主题聚焦于“div+css网页布局设计模板源代码”，我们将深入探讨这一主题，了解相关知识点。 1. **Div元素**：`<div>`是HTML中的一个通用容器元素，用于组合其他HTML元素，提供一种组织和控制页面结构的方式。通过...