《网页设计与制作教程》课件-第5章 Div+CSS布局方法

网页设计与制作教程（HTML+CSS+JavaScript）机械工业出版社同名教材配套电子教案5.1Div布局理念5.2CSS盒模型5.3CSS的定位5.4浮动与清除浮动5.5CSS常用布局样式5.6Div+CSS布局综合案例第5章Div+CSS布局方法5.1.1Div布局页面的优点采用Div+CSS布局方式的优点如下：

缩减了页面代码，提高了页面的浏览速度。

缩短了网站的改版时间，设计者只要简单地修改CSS文件就可以轻松地改版网站。

强大的字体控制和排版能力，使设计者能够更好的控制页面布局。

表现和内容相分离，设计者将设计部分剥离出来放在一个独立样式文件中，减少了网页无效的可能。

方便搜索引擎的搜索，使用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到用户的内容。

用户可以将许多网页的风格格式同时更新。

5.1Div布局理念5.1.2Div标签1．Div标签简介2．Div的嵌套

Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。【演练5-1】未嵌套的Div容器.【演练5-2】嵌套的Div容器。5.1Div布局理念3．Div标签与Span标签的区别

div与span的区别在于，div是一个块级元素，它包围的元素会自动换行，而span仅仅是个内联元素，不会换行。另外，span本身没有任何属性，没有结构上的意义，当其他元素都不合适的时候可以换上它，同时div可以包含span，反之则不行。【演练5-3】演示Div标签与Span标签的区别。5.1Div布局理念5.2.1盒模型的概念盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图5-4所示。对象的尺寸与边框等样式表属性的关系，如图5-5所示。5.2CSS盒模型5.2.2盒模型的属性1．外边距外边距也称为外补丁。外边距设置属性有：margin-top、margin-right、margin-bottom、margin-left，可分别设置，也可以用margin属性，一次设置所有边距。2．边框常用的边框属性有7项：border-top、border-right、border-bottom、border-left、border-width、border-color、border-style。其中border-width可以一次性设置所有的边框宽度，border-color同时设置四面边框的颜色时，可以连续写上4种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序（顺时针）。5.2CSS盒模型5.2.2盒模型的属性3．内边距内边距也称内补丁，位于对象边框和对象之间，包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和margin相似，这里不再一一列举。5.2CSS盒模型5.2.3盒模型的宽度与高度盒模型的宽度与高度是元素内容、内边距、边框和外边距这4部分的属性值之和。1．盒模型的宽度

盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）2．盒模型的高度

盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）5.2CSS盒模型5.2.4外边距的叠加用户在进行CSS网页布局时经常会遇见外边距的叠加问题，如果不理解其内涵就容易造成许多麻烦。当两个元素的垂直外边距相遇时，这两个元素的外边距就会进行叠加，合并为一个外边距。1．两个元素垂直相遇时叠加2．两个元素包含时叠加5.2CSS盒模型5.2.4外边距的叠加用户在进行CSS网页布局时经常会遇见外边距的叠加问题，如果不理解其内涵就容易造成许多麻烦。当两个元素的垂直外边距相遇时，这两个元素的外边距就会进行叠加，合并为一个外边距。1．两个元素垂直相遇时叠加当两个元素垂直相遇时，第一个元素的下外边距与第二个元素的上外边距会发生叠加合并，合并后的外边距的高度等于这两个元素的外边距值的较大者。2．两个元素包含时叠加假设两个元素没有内边距和边框，且一个元素包含另一个元素，它们的上外边距或下外边距也会发生叠加合并。5.2CSS盒模型5.2.5盒模型综合案例【演练5-4】修饰商城社区管理员登录表单的输入框为只显示下边框线的虚细线框，本例文件5-4.html在浏览器中显示的效果如图5-10所示。5.2CSS盒模型5.2.5盒模型综合案例【演练5-5】设置商城logo图片的布局，本例文件5-5.html的显示效果如图5-11所示。5.2CSS盒模型定位（position）属性可以选择4中不同类型的定位模式，语法如下：position:static|relative|absolute|fixed参数：static静态定位为默认值，为无特殊定位，对象遵循HTML定位规则。relative生成相对定位的元素，相对于其正常位置进行定位。absolute生成绝对定位的元素。元素的位置通过left、top、right和bottom属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right以及bottom属性进行规定。5.3CSS的定位5.3.1静态定位静态定位是position属性的默认值，即该元素出现在文档的常规位置，不会重新定位。通常此属性可以不设置，除非是要覆盖以前的定义。【演练5-6】静态定位。假设有这样一个页面布局，页面中分别定义了id="top"、id="box"和id="footer"这3个Div容器，彼此是并列关系。id="box"的容器又包含id="box-1"、id="box-2"和id="box-3"这3个子Div容器，彼此也是并列关系。编写相应的CSS样式，生成的文件5-6.html在浏览器中显示的效果如图5-12所示。5.3CSS的定位5.3.2相对定位相对定位（position:relative;）指的是通过设置水平或垂直位置的值，让这个元素“相对于”它原始的起点进行移动。【演练5-7】相对定位。使用上面的示例深入讨论，将id="box"的块级元素向下移动50px，向右移动50px。编写相应的CSS样式，生成的文件5-7.html的显示效果如图5-13所示5.3CSS的定位5.3.3绝对定位用“position:absolute;”表示绝对定位，使用绝对定位的对象可以被放置在文档中任何位置，位置将依据浏览器左上角的0点开始计算。【演练5-8】绝对定位。继续使用上面的示例深入讨论，将id="box-1"的块级元素进行绝对定位，向下移动50px，向右移动200px。编写相应的CSS样式，生成的文件5-8.html在浏览器中显示的效果如图5-14所示。5.3CSS的定位5.3.4相对定位与绝对定位的混合使用【演练5-9】相对定位与绝对定位的混合使用。首先对id="box"的块级元素进行相对定位，则id="box"中的所有元素都将相当于id="box"的块级元素。然后将id="box-1"的块级元素进行绝对定位，便可以实现子元素相当于父元素进行定位。编写相应的CSS样式，生成的文件5-9.html在浏览器中显示的效果如图5-15所示。5.3CSS的定位5.3.5固定定位固定定位（position:fixed;）其实是绝对定位的子类别。【演练5-10】固定定位。为了对固定定位演示得更加清楚，将id="box1"的块级元素进行固定定位，将id="box2"的块级元素的高度设置得尽量大，以便能看到固定定位的效果。编写相应的CSS样式，生成的文件5-10.html在浏览器中显示的效果如图5-16所示。5.3CSS的定位

5.4.1浮动

利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。语法：float:none|left|right【演练5-11】向右浮动的元素。本例页面布局的初始状态如图5-17（a）所示，元素box-1向右浮动后的结果如图5-17（b）所示。

5.4浮动与清除浮动

5.4.1浮动

【演练5-12】向左浮动的元素。使用上面的示例继续讨论，只将id="box-1"的元素向左浮动的页面布局如图5-18（a）所示，所有元素向左浮动后的结果如图5-18（b）所示。5.4浮动与清除浮动

5.4.1浮动

【演练5-13】空间不够时的元素浮动。使用上面的示例继续讨论，如果id="box"的块级元素宽度不够，无法容纳3个浮动元素box-1、box-2和box-3并排放置，那么部分浮动元素将会向下移动，直到有足够的空间放置它们，如图5-19（a）所示。如果浮动元素的高度彼此不同，那么当它们向下移动时可能会被其他浮动元素“挡住”，如图5-19（b）所示。

5.4浮动与清除浮动

（a）块级元素宽度不够时的状态

（b）块级元素宽度不够且不同高度的浮动元素5.4.2清除浮动在CSS样式中，浮动与清除浮动（clear）是相互对立的，使用清除浮动不仅能够解决页面错位的现象，。语法：clear:none|left|right|both【演练5-14】清除浮动。使用上面的示例5-12继续讨论，页面所有元素均已向左浮动，在box-3后面再增加一个没有设置浮动的块级元素box-4，未清除浮动时的状态如图5-20（a）所示，清除浮动后的状态如图5-20（b）所示。5.4浮动与清除浮动

5.5.1两列布局样式许多网站都有一些共同的特点，即顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等，如图5-23所示的布局就是经典的两列布局。5.5CSS常用布局样式

5.5.2三列布局样式三列布局在网页设计时更为常用，如图5-28所示。对于这种类型的布局，浏览者的注意力最容易集中在中栏的信息区域，其次才是左右两侧的信息。5.5CSS常用布局样式

5.6.1页面布局规划页面布局的首要任务是弄清网页的布局方式，分析版式结构，待整体页面搭建有明确规划后，再根据成熟的规划切图。通过成熟的构思与设计，电脑学堂栏目的主页效果如图5-34所示，页面布局示意图如图5-35所示。5.6Div+CSS布局综合