HTML5,CSS3,javasript,网页制作,网页设计第5章 Div CSS布局页面解析
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML+CSS+JavaScript 网页制作
机械工业出版社同名教材 配套电子教案
第5章 Div+CSS布局页面
5.1 Web标准 5.2 认识Div+CSS布局 5.3 案例：网络花店页面顶部的布局——盒模型 5.4 案例：商城登录页面整体布局——定位与浮动 5.5 典Βιβλιοθήκη Baidu的CSS布局样式 5.6 实训：网络花店热卖鲜花局部页面
5.1 Web标准
5.1.3 理解表现和结构相分离 了解了Web标准之后，本小节将介绍如何理解表现和结 构相分离。在此以一个实例来详细说明。首先必须先明白一 些基本的概念：内容、结构、表现和行为。 所有 HTML 页面都由结构、表现和行为 3 个方面内容组成。 内容是基础层，然后是附加上的结构层和表现层，最后再对 这3个层做点“行为”。
5.2 认识Div+CSS布局
5.2.1 Div+CSS布局的优点
采用Div+CSS布局方式的优点如下： Div用于搭建网站结构，CSS用于创建网站表现，将表现 与内容分离，便于大型网站的协作开发和维护。 缩短了网站的改版时间，设计者只要简单地修改CSS文件 就可以轻松地改版网站。 强大的字体控制和排版能力，使设计者能够更好的控制页 面布局。 使用只包含结构化内容的HTML代替嵌套的标签，提高搜 索引擎对网页的索引效率。 用户可以将许多网页的风格格式同时更新。
【演示5-3-1】使用外边距（ margin ）属性实现某个分区的 缩进及位置的居中。
【演示 5-3-2】使用内边距（padding）属性设置内容与边框 之间的距离。
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.3 盒模型的宽度与高度
盒模型的宽度与高度是元素内容、内边距、边框和外边 距这4部分的属性值之和。 1．盒模型的宽度
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.2 外边距、边框与内边距
3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了 4 项属性： padding-top （上内边距）、 padding-right （右 内 边 距 ） 、 padding-bottom （ 下 内 边 距 ） 、 padding-left （左内边距），内边距属性不允许负值。与外边距类似，内 边距也可以用 padding 一次性设置所有的对象间隙，格式也 和margin相似，这里不再一一列举。
5.1 Web标准
5.1.2 建立Web标准的优点
建立Web标准的优点如下： • 提供最大利益给最多的网站用户； • 确保任何网站文档都能够长期有效； • 简化代码，降低建设成本； • 让网站更容易使用，能适应更多不同用户和更多网络 设备； • 当浏览器版本更新或者出现新的网络交互设备时，确 保所有应用能够继续正确执行。
5.2 认识Div+CSS布局
5.2.2 将页面用Div分块
Div标签是可以被嵌套的，这种嵌套的Div 主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。
5.3 案例：网络花店页面顶部的布局——盒模型
【案例展示】使用盒模型的基本知识制作网络花店页面顶部 的布局，本例文件5-3.html在浏览器中的显示效果，如图56所示。
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.1 盒模型简介
所谓盒模型，就是把每个 HTML元素看作一个装了东西的 盒 子 ， 盒 子 里 面 的 内 容 有 属 性 “ 宽 （ width ） ” 和 “ 高 （height）”；盒子里面的内容到盒子的边框之间的距离叫 “内边距（ padding ）”；盒子本身有“边框（ border ）”； 而盒子边框外和其他盒子之间的距离叫“外边距 （ margin ）”，如图 5-7 所示。元素的尺寸与边框等样式表 属性的关系，如图5-8所示。
盒模型的宽度=左外边距（margin-left）+左边框（border-left） +左内边距（padding-left）+内容宽度（width）+右内边距（paddingright）+右边框（border-right）+右外边距（margin-right）
2．盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上 内边距（padding-top）+内容高度（height）+下内边距（paddingbottom）+下边框（border-bottom）+下外边距（margin-bottom）
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.4 外边距的合并
外边距合并是指当两个垂直外边距相遇时，它们将形成 一个外边距。合并后的外边距高度等于两个发生合并的外边 距的高度中的较大者。 1．两个元素垂直相遇时合并 当两个元素垂直相遇时，第一个元素的下外边距与第二 个元素的上外边距会发生叠加合并，合并后的外边距的高度 等于这两个元素的外边距值的较大者。 2．两个元素包含时合并 假设两个元素没有内边距和边框，且一个元素包含另一 个元素，它们的上外边距或下外边距也会发生叠加合并。
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.2 外边距、边框与内边距
1．外边距 外边距也称为外补丁。外边距设置属性有： margin-top、 margin-right 、 margin-bottom 、 margin-left ，可分别设置， 也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有 7 项： border-top 、 border-right 、 border-bottom 、 border-left 、 border-width 、 bordercolor 、 border-style 。其中 border-width 可以一次性设置 所有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都 是 按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。
5.1 Web标准
5.1.1 Web标准的概念
Web标准不是某一种标准，而是一系列标准的集合。 网页主要由3部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior）。对应的标准也分 为3类：结构化标准语言主要包括XHTML和XML，表现标准 语言主要为CSS，行为标准主要包括对象模型W3C DOM、 ECMAScript等。
机械工业出版社同名教材 配套电子教案
第5章 Div+CSS布局页面
5.1 Web标准 5.2 认识Div+CSS布局 5.3 案例：网络花店页面顶部的布局——盒模型 5.4 案例：商城登录页面整体布局——定位与浮动 5.5 典Βιβλιοθήκη Baidu的CSS布局样式 5.6 实训：网络花店热卖鲜花局部页面
5.1 Web标准
5.1.3 理解表现和结构相分离 了解了Web标准之后，本小节将介绍如何理解表现和结 构相分离。在此以一个实例来详细说明。首先必须先明白一 些基本的概念：内容、结构、表现和行为。 所有 HTML 页面都由结构、表现和行为 3 个方面内容组成。 内容是基础层，然后是附加上的结构层和表现层，最后再对 这3个层做点“行为”。
5.2 认识Div+CSS布局
5.2.1 Div+CSS布局的优点
采用Div+CSS布局方式的优点如下： Div用于搭建网站结构，CSS用于创建网站表现，将表现 与内容分离，便于大型网站的协作开发和维护。 缩短了网站的改版时间，设计者只要简单地修改CSS文件 就可以轻松地改版网站。 强大的字体控制和排版能力，使设计者能够更好的控制页 面布局。 使用只包含结构化内容的HTML代替嵌套的标签，提高搜 索引擎对网页的索引效率。 用户可以将许多网页的风格格式同时更新。
【演示5-3-1】使用外边距（ margin ）属性实现某个分区的 缩进及位置的居中。
【演示 5-3-2】使用内边距（padding）属性设置内容与边框 之间的距离。
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.3 盒模型的宽度与高度
盒模型的宽度与高度是元素内容、内边距、边框和外边 距这4部分的属性值之和。 1．盒模型的宽度
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.2 外边距、边框与内边距
3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了 4 项属性： padding-top （上内边距）、 padding-right （右 内 边 距 ） 、 padding-bottom （ 下 内 边 距 ） 、 padding-left （左内边距），内边距属性不允许负值。与外边距类似，内 边距也可以用 padding 一次性设置所有的对象间隙，格式也 和margin相似，这里不再一一列举。
5.1 Web标准
5.1.2 建立Web标准的优点
建立Web标准的优点如下： • 提供最大利益给最多的网站用户； • 确保任何网站文档都能够长期有效； • 简化代码，降低建设成本； • 让网站更容易使用，能适应更多不同用户和更多网络 设备； • 当浏览器版本更新或者出现新的网络交互设备时，确 保所有应用能够继续正确执行。
5.2 认识Div+CSS布局
5.2.2 将页面用Div分块
Div标签是可以被嵌套的，这种嵌套的Div 主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。
5.3 案例：网络花店页面顶部的布局——盒模型
【案例展示】使用盒模型的基本知识制作网络花店页面顶部 的布局，本例文件5-3.html在浏览器中的显示效果，如图56所示。
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.1 盒模型简介
所谓盒模型，就是把每个 HTML元素看作一个装了东西的 盒 子 ， 盒 子 里 面 的 内 容 有 属 性 “ 宽 （ width ） ” 和 “ 高 （height）”；盒子里面的内容到盒子的边框之间的距离叫 “内边距（ padding ）”；盒子本身有“边框（ border ）”； 而盒子边框外和其他盒子之间的距离叫“外边距 （ margin ）”，如图 5-7 所示。元素的尺寸与边框等样式表 属性的关系，如图5-8所示。
盒模型的宽度=左外边距（margin-left）+左边框（border-left） +左内边距（padding-left）+内容宽度（width）+右内边距（paddingright）+右边框（border-right）+右外边距（margin-right）
2．盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上 内边距（padding-top）+内容高度（height）+下内边距（paddingbottom）+下边框（border-bottom）+下外边距（margin-bottom）
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.4 外边距的合并
外边距合并是指当两个垂直外边距相遇时，它们将形成 一个外边距。合并后的外边距高度等于两个发生合并的外边 距的高度中的较大者。 1．两个元素垂直相遇时合并 当两个元素垂直相遇时，第一个元素的下外边距与第二 个元素的上外边距会发生叠加合并，合并后的外边距的高度 等于这两个元素的外边距值的较大者。 2．两个元素包含时合并 假设两个元素没有内边距和边框，且一个元素包含另一 个元素，它们的上外边距或下外边距也会发生叠加合并。
5.3 案例：网络花店页面顶部的布局——盒模型
5.3.2 外边距、边框与内边距
1．外边距 外边距也称为外补丁。外边距设置属性有： margin-top、 margin-right 、 margin-bottom 、 margin-left ，可分别设置， 也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有 7 项： border-top 、 border-right 、 border-bottom 、 border-left 、 border-width 、 bordercolor 、 border-style 。其中 border-width 可以一次性设置 所有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都 是 按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。
5.1 Web标准
5.1.1 Web标准的概念
Web标准不是某一种标准，而是一系列标准的集合。 网页主要由3部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior）。对应的标准也分 为3类：结构化标准语言主要包括XHTML和XML，表现标准 语言主要为CSS，行为标准主要包括对象模型W3C DOM、 ECMAScript等。