商业网站HTML布局详解：DIV+CSS版心控制与浮动管理

本资源是一份关于使用HTML开发商业网站的课程讲义，着重于DIV+CSS布局以及其常用属性的教学。课程开始时，讲解了布局的重要性，指出在大量内容的网页设计中，合理的布局能确保版面清晰、易读，如报纸排版一样。主要步骤包括确定版心、分析页面模块和控制网页结构。 布局概述部分，首先强调了版心的概念，通过实例——某教育网的首页来说明，版心是网页内容的核心区域，起到组织和引导用户视线的作用。接下来，课程深入到实际操作，教导如何分析页面中的各个模块，以便有效地管理和控制它们。 在布局常用属性部分，主要内容涵盖了浮动的概念。浮动允许元素在文本流之外进行排列，`left`使元素向左浮动，`right`则向右浮动，而`none`则是默认值，元素不浮动。清除浮动是必要的，因为浮动元素可能导致其他内容错位。课程提供了两种方法来清除浮动：一是使用`clear`属性，`left`、`right`和`both`分别对应清除一侧或两侧的浮动，另一种是使用空标签和`overflow`属性，如`clear:both`配合`<div>`、`<p>`或`<hr>`标签，或者在浮动元素之后设置`overflow:hidden`来达到效果。对于IE8及更高版本，还可以利用`after`伪对象来清除浮动。 对于精确控制元素位置，课程介绍了CSS的定位属性，包括`position`属性及其四个常用值：`static`（默认值）、`relative`（相对定位）、`absolute`（绝对定位）和`fixed`（固定定位）。通过`top`、`bottom`、`left`和`right`属性，可以设定元素的偏移量，使其在文档流中的位置发生改变。相对定位让元素基于其在文档流中的位置进行调整，而绝对定位则根据已定位的父元素进行定位，如果没有定位的父元素，则依赖于`body`。 总结来说，这份课件提供了一个实用的框架，帮助开发者理解如何运用HTML和CSS进行商业网站的高效布局，特别是通过理解和掌握浮动、清除浮动以及定位属性，能够在实践中创建出结构清晰、功能完整的网页设计。