项目一 第二阶段 任务14 设置边框和阴影效果-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用CSS3设置网页格式 第二阶段 能使用border-spacing、table-layout、border-collapse属性设置表格样式。 能使用border等相关属性设置标签的边框样式。 能使用border-radius、box-shadow、outline属性实现各种轮廓效果。 综合运用表格、边框、阴影样式完成D清单页面元素的边框和阴影格式设置。 任务目标 任务14 设置边框和阴影效果 本次任务要求根据D清单页面效果图效果，使用CSS样式代码，在任务13的基础上设置该网页元素中的边框和阴影效果。 任务包括： 1、为D清单网页的顶部按钮设置边框、阴影效果。 2、美化页面中高级会员的表格，为其设置边框效果。 3、完善联系我们中的表单元素边框、轮廓设置。 任务描述 任务14 设置边框和阴影效果 要完成网页边框和阴影效果的设置，需要： 学习表格属性的样式设置； 学习标签边框、轮廓样式的设置； 分析D清单页面中的边框、阴影样式，正确运用边框、阴影样式完成D清单网页元素的边框和阴影效果设置。 D清单网页边框和阴影效果分析如图2-5-1所示。 任务分析 任务14 设置边框和阴影效果 任务分析 图2-5-1 D清单网页边框和阴影网页效果 任务14 设置边框和阴影效果 知识与技能准备 表格由<table><tr><td>三层结构组成，HTML标签本身并不能修饰好看的表格，而CSS表格属性可以极大的改善表格的外观。 1.1 border-collapse：边框独立性设置 取值：separate | collapse separate：默认值 ，边框独立 collapse：相邻边被合并 1、表格属性的样式设置 语法：border-collapse: 关键词; 图2-5-2 表格边框独立与合并效果 知识与技能准备 1.2 table-layout：表格布局方式 table-layout属性用来显示表格单元格、行、列的算法规则。该属性指定完成表格布局时所用的布局算法。 取值：separate | collapse 取值：auto（默认） | fixed auto：自动表格布局方式，列宽由单元格内容设定；如设定某个单元格宽度为100px，但结果可能并不是100px。由于该方式需要在确定最终的布局之前访问表格中的所有内容，这会需要较长时间。 fixed：固定表格布局方式，列宽由表格宽度和列宽度设定。表格的整体宽度高度是由表格及单元格的边框、单元格间距，单元格的填充和单元格的宽高度决定的，与单元格的内容无关。这个布局方式下在接收到第一行后就可以显示表格。 1、表格属性的样式设置 语法：table-layout: 关键词; 知识与技能准备 通常情况下表格不设置自适应而设置成固定值，不同布局方式下的表格总宽度有何区别，表格所有设置都相同，只有table-layout取值不同时，表格总宽度计算详解。 1、表格属性的样式设置 CSS代码： 1 2 3 4 5 6 7 8 9 10 11 table{ width: 300px; table-layout: auto; /*只更改这个参数值*/ border-collapse: collapse; border: solid 1px #666; } table td,table th{ width: 100px; padding: 5px; border: solid 1px #666; } 图2-5-4 表格自动布局与固定布局总宽度的计算 知识与技能准备 1.3 border-spacing：单元格间距 取值：用px定义行和单元格的边框在横向和纵向上的间距，不允许为负值。当表格边框属性是合并独立的情况下该属性失效。如果只填写一个参数值，该值同时用于横向和纵向间距；如果填写两个参数，第一个用于横向间距，第二个用于纵向间距。 1、表格属性的样式设置 语法：border-spacing: 横向间距 纵向间距; 图2-5-5 表格单元格间距设置效果 知识与技能准备 1.4 caption-side：表格标题的位置 取值：top | bottom top：指定caption在表格的上方 bottom：指定caption在表格的下方 caption-side属性设置表格的caption对象是位于表格的哪一方。 1、表格属性的样式设置 语法：caption-side: 关键词; 图2-5-6 表格标题位置的效果 课堂练习2-5-1制作如下图的表格样式 创建一个4行2列的表格，合并边框线，边框线颜色为浅灰色，表格标题在表格上方进行显示，表格宽设置为300px，表格的背景色设置为#F5F5DC，