网页设计与制作教程（HTML+CSS+JavaScript） 教学配套课件 刘瑞新 第5章 Div+CSS布局方法.pdfVIP

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第5章 Div+CSS布局方法 第5章 Div+CSS布局方法 5.1 Div布局理念 5.1 Div布局理念 5.2 CSS盒模型 5.2 CSS盒模型 5.3 CSS的定位 5.3 CSS的定位 5.4 浮动与清除浮动 5.4 浮动与清除浮动 5.5 CSS常用布局样式 5.5 CSS常用布局样式 5.6 Div+CSS布局综合案例 5.6 Div+CSS布局综合案例 5.1 Div布局理念 5.1 Div布局理念 5.1.1 Div布局页面的优点 5.1.1 Div布局页面的优点 采用Div+CSS布局方式的优点如下： 采用Div+CSS布局方式的优点如下： ? 缩减了页面代码，提高了页面的浏览速度。 ? 缩减了页面代码，提高了页面的浏览速度。 ? 缩短了网站的改版时间，设计者只要简单地修改CSS文件就可以轻松地改版 ? 缩短了网站的改版时间，设计者只要简单地修改CSS文件就可以轻松地改版 网站。 网站。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 表现和内容相分离，设计者将设计部分剥离出来放在一个独立样式文件中， ? 表现和内容相分离，设计者将设计部分剥离出来放在一个独立样式文件中， 减少了网页无效的可能。 减少了网页无效的可能。 ? 方便有哪些信誉好的足球投注网站引擎的有哪些信誉好的足球投注网站，使用只包含结构化内容的HTML代替嵌套的标签，有哪些信誉好的足球投注网站 ? 方便有哪些信誉好的足球投注网站引擎的有哪些信誉好的足球投注网站，使用只包含结构化内容的HTML代替嵌套的标签，有哪些信誉好的足球投注网站 引擎将更有效地有哪些信誉好的足球投注网站到用户的内容。 引擎将更有效地有哪些信誉好的足球投注网站到用户的内容。 ? 用户可以将许多网页的风格格式同时更新。 ? 用户可以将许多网页的风格格式同时更新。 5.1 Div布局理念 5.1 Div布局理念 5.1.2 Div标签 5.1.2 Div标签 1．Div标签简介 1．Div标签简介 2．Div的嵌套 2．Div的嵌套 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。 关系。 【演练5-1】未嵌套的Div容器. 【演练5-1】未嵌套的Div容器. 【演练5-2】嵌套的Div容器 。 【演练5-2】嵌套的Div容器 5.1 Div布局理念 5.1 Div布局理念 3．Div标签与Span标签的区别 3．Div标签与Span标签的区别 div与span的区别在于，div是一个块级元素，它包围的 div与span的区别在于，div是一个块级元素，它包围的 元素会自动换行，而span仅仅是个内联元素，不会换行。另 元素会自动换行，而span仅仅是个内联元素，不会换行。另 外，span本身没有任何属性，没有结构上的意义，当其他元 外，span本身没有任何属性，没有结构上的意义，当其他元 素都不合适的时候可以换上它，同时div可以包含span，反 素都不合适的时候可以换上它，同时div可以包含span，反 之则不行。 之则不行。 【演练5-3】演示Div标签与Span标签的区别 。 【演练5-3】演示Div标签与Span标签的区别 5.2 CSS盒模型 5.2 CSS盒模型 5.2.1 盒模型的概念 5.2.1 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由 盒模型将页面中的每个元素看做一个矩形框，这个框由 元素的内容、内边距（padding ）、边框（border ）和外边 元素的内容、内边距（padding ）、边框（border ）和外边 距（margin ）组成，如图5-4所示。对象的尺寸与边框等样 距（margin ）组成，如图5-4所示。对象的尺寸与边框等样 式表属性的关系，如图5-5所示。 式表属性的关系，如图5-5所示。 5.2 CSS盒模型 5.2 CSS盒模型 5.2.2 盒模型的属性 5.2.2 盒模型的属性 1．外边距 1．外边距 外边距也称为外补丁。外边距设置属性有：margin- 外边距也称为外补丁。外边距设置属性有：margin- top、margin-right 、margin-bottom 、margin-left，可分 top、margin-right 、margin-bottom 、margin-left，可