项目三任务一 制作“商品分类”页面

网上书店制作“商品分类”页面CONTENTS目录网页布局概述第一部分元素的浮动第二部分网页布局概述第一部分网页布局概述网页布局是网页设计中的一个重要环节，它涉及到页面内容的组织和呈现方式。一个合理的布局不仅能够提升用户体验，还能有效传递信息，增强网页的可用性和美观性。如图所示，是常见的报纸的排版方式。网页布局概述在网页设计中，我们也可以采用跟报纸相同的方式，经过有序排版，来使页面呈现出有条理、美观的效果。网页设计中的排版布局主要借助DIV+CSS技术来实现。这里的DIV不仅仅是指我们在项目二中学习到的<div>标记，还包括所有的能够承载内容的容器标记，例如<p>、<li>等。使用DIV+CSS技术进行网页设计，可以将内容与样式从结构上分离，可以方便设计人员高效地设计，易于代码维护。网页布局概述1.网页布局需要遵循的工作流程要设计出一个形式上美观又符合大众习惯的网页，我们在进行网页布局时需要遵循一定的规范。1.确定页面的版心宽度2.分析页面中的模块网页布局概述1.网页布局需要遵循的工作流程1.确定页面的版心宽度网页布局概述1.网页布局需要遵循的工作流程1.确定页面的版心宽度网页的版心宽度通常指的是网页内容区的宽度，也就是网页中用于展示主要内容的区域的宽度。版心宽度不包括网页的边距、内边距、滚动条等边缘空间，它只关注用户阅读和交互的中心区域。页面的版心一般在浏览器中水平居中显示。一般情况下，可以将版心宽度设置为1000～1200px。网页布局概述1.网页布局需要遵循的工作流程2.分析页面中的模块头部header导航nav焦点图banner内容content底部footer网页布局概述1.网页布局需要遵循的工作流程在使用DIV+CSS进行页面布局时，需要对页面结构有整体上的分析，分析页面中包含哪些部分，各部分之间是怎样的关系，然后再逐一进行设计。网页布局概述2.常见的网页布局类型使用DIV+CSS可以实现多种类型的页面布局，常见的有：1.单列布局2.两列布局3.三列布局网页布局概述2.常见的网页布局类型1.单列布局单列布局是网页布局类型中最简单的布局方式，是其它所有复杂结构的基础。单列布局中，页面元素通常包括头部、导航、焦点图、内容和底部，按照从上到下的顺序依次排列。样式单一，缺乏生动性网页布局概述2.常见的网页布局类型2.两列布局两列布局是在单列布局的基础之上，将内容部分划分为左右两部分，这样就打破了单列布局的呆板，让页面看起来更加活跃。网页布局概述2.常见的网页布局类型2.两列布局在两列布局中，左右内容部分的宽度设置取决于设计需求和内容展示的需要。通常可以参考以下布局策略：

等宽布局：左右内容部分宽度相同，这种布局适用于需要强调两列内容平等重要性的情况。

非等宽布局：一列的宽度会比另一列宽，这种布局适用于需要对某一列内容给予更多视觉重点的情况。网页布局概述2.常见的网页布局类型3.三列布局三列布局在网页设计中有着广泛的应用场景，它将页面内容分为三个部分，例如，左侧可以展示导航菜单，中间部分展示主要内容，右侧可以展示辅助信息或广告，这样的布局可以提高信息的组织性和可读性。元素的浮动第二部分元素的浮动在使用DIV+CSS进行网页布局时，通常需要使用一些属性来控制元素的显示样式。这里使用到的属性有浮动（float）和定位（position）属性。元素的浮动1.元素的浮动通常情况下，网页中的元素都会按照标准文档流的方式排列，即元素在页面上按照其在HTML文档中出现的顺序，从上到下、从左到右依次排列。这是CSS布局的默认行为，没有应用任何特定的样式的元素都会遵循标准文档流。为了使页面呈现出不同的布局效果，通常需要控制元素在标准文档流中的行为。当页面的布局较为复杂时，我们需要使用浮动（float）属性。元素的浮动1.元素的浮动在CSS中，浮动（float）属性是一个非常有用的布局工具，它允许设计者将元素向左或者向右浮动，从而围绕浮动元素流动文本或其他元素。浮动元素会脱离标准文档流，也就是说它们不再占据文档流中的正常空间。在CSS中，定义浮动的基本语法格式如下：选择器{float:属性值;}元素的浮动1.元素的浮动float常用的属性值有3个：属性值说明left元素向左浮动right元素向右浮动none元素不浮动（默认值）表3-1-1

float常用的属性值元素的浮动1.元素的浮动对比浮动使用前后的页面效果：为三个盒子均添加向左浮动效果后元素的浮动2.清除浮动对元素使用浮动效果，可以使元素脱离标准文档流的位置，同时也会对其他网页元素产生影响。为三个盒子添加向左浮动后，文字段落脱离标准流位置。需要添加清除浮动效果，来避免浮动带来的影响。元素的浮动2.清除浮动在CSS中，常用clear属性清除浮动。运用clear属性清除浮动的基本语法格式如下：选择器{clear:属性值;}属性值说明left清除左侧浮动的影响right清除右侧浮动的影响both同时清除左右两侧浮动的影响表3-1-2

clear常用的属性值元素的浮动2.清除浮动为案例中段落文字<p>标记添加清除浮动属性，具体代码如下：1 p{2

clear:left;

/*清除左侧浮动*/3

}元素的浮动3.元素的溢出设计中，当元素的内容超出其指定大小（宽度或高度）时，溢出的部分应该如何处理？此时，我们可以对标记使用overflow属性。属性值说明visible默认值，内容超出元素边界时显示在元素外部hidden内容超出元素边界时会被隐藏，不显示滚动条scroll内容超出元素边界时会显示滚动条，允许用户滚动查看溢出的内容auto如果内容溢出，自动显示滚动条；如果没有溢出，则不显示滚动条表3-1-3

overflow常用的属性值元素的浮动3.元素的溢出元素的内容超出其容器大小时行内元素或行内块元素，处理单行或多行的溢出清除父元素对浮动的影响overflow应用场景元素的浮动3.元素的溢出元素的内容超出其容器大小时清除父元素对浮动的影响由于父元素fa