使用HTML开发商业网站-DIV+CSS布局布局及常用属性课件.pptx

使用HTML开发商业网站 布局及常用属性 布局概述 为什么要应用布局？ 布局概述 阅读报纸时会发现，虽然报纸中的内容很多，但 是经过合理地排版，版面依然清晰、易读。 1.确定版心 什么是版心？以某教育网站首页为例： 布局概述 布局概述 2.分析页面中的模块 布局概述 3.控制网页的各个模块 布局常用属性 应用排列 图文排列 论坛分享 布局常用属性 什么是浮动？ 布局常用属性 布局常用属性 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 布局常用属性 为什么要清除浮动？ 布局常用属性 布局常用属性 如何清除浮动？ 布局常用属性 运用clear属性清除浮动 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响 常用属性值 布局常用属性 布局常用属性 空标签 overflow after伪对象 在浮动元素之后添加空标签，并对该标签应用“clear:both”样式，可清除浮动。这个空标签可以为<div>、<p>、<hr />等任何标签。 “ 在开发商业网站时，HTML（超文本标记语言）是构建网页结构的基础，而CSS（层叠样式表）则用于美化和布局这些结构。本课件主要讲解了如何使用HTML进行有效的网页布局，以及布局中的一些关键CSS属性。 布局的重要性在于它能够使网页内容有组织、易读。就像阅读报纸一样，尽管信息量大，但合理的布局能保持页面的清晰度。版心是网页设计中的一个重要概念，它定义了网页主要内容的显示区域，通常位于浏览器窗口的中心。例如，某教育网站首页的版心可能包含了头部、导航、焦点图、内容区域和底部信息等主要模块。 在HTML布局中，div元素经常被用作容器，结合CSS的布局属性来控制页面的各个模块。例如，通过设置div的浮动属性，可以实现元素的水平排列，如将元素float:left或float:right使其向左或向右浮动。浮动有助于创建多列布局，但也会导致父元素高度塌陷的问题，因为浮动元素不再占据原来在文档流中的空间。 为了解决这个问题，我们需要清除浮动。清除浮动有两种常见方法：一是使用clear属性，如clear:left、clear:right或clear:both，阻止元素因浮动而影响周围元素的布局；二是使用空标签或者CSS的overflow属性，如在浮动元素后面添加一个带有clear:both样式的div，或者将某个元素的overflow设置为hidden，这两种方法都可以有效消除浮动的影响。 除了浮动，CSS的定位属性也是布局中的关键。定位允许开发者精确控制元素在页面上的位置，通过设置position属性（如static、relative、absolute或fixed），结合top、bottom、left和right等边偏移属性，可以让元素相对于其正常文档流的位置进行移动。相对定位（position:relative）保留了元素在文档流中的位置，而绝对定位（position:absolute）和固定定位（position:fixed）则让元素脱离文档流，根据指定的坐标进行定位。 HTML和CSS的布局技术对于创建专业、有吸引力的商业网站至关重要。通过理解并熟练应用浮动、清除浮动和定位属性，开发者能够创建出响应式、结构清晰的网页，提升用户体验。在实践中，不断分析和实践各种布局技巧，将有助于提升网页设计的效率和质量。