工信版（中职）Web前端设计基础 项目九-2电子课件.pptx

《工信版（中职）Web前端设计基础 项目九-2电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目九-2电子课件.pptx（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目九-2电子课件CSS 3修饰表格表单项目九授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备使用CSS美化背景；使用CSS修饰表格。使用CSS美化边框；使用CSS设置圆角边框；使用CSS设置图片边框；使用CSS设置边框阴影；使用CSS设置圆角边框CSS 3的border-radius属性可用来定义边框的圆角效果，格式如下：border-radius:none|1,4 /1,4;其中，none是默认值，表示没有圆角；表示由浮点数和单位标识符组成的长度值。例如设置圆角边框为10像

2、素、圆角显示为1/4个圆的代码为：border-radius:10px;例如设置圆角的水平半径是5像素、垂直半径是50像素的代码为：border-radius:5px/50px;例如设置没有圆角的代码为（只要参数中出现0，则为矩形，不显示圆角）：border-radius:0px;使用CSS设置圆角边框例如设置左上角圆角半径为10像素、右上角圆角半径为20像素、右下角圆角半径为30像素、左下角圆角半径为40像素的代码为：border-radius:10px 20px 30px 40px;如果最后一个值省略，左下角半径与右下角相同，如果第三个值省略，右下角半径与右上角相同，以此类推。除了上面的设

3、置方法以外，还可以单独给元素设置四个不同的圆角，属性和说明如表所示。属性属性说明说明border-top-right-radius右上角的圆角border-bottom-right-radius右下角的圆角border-bottom-left-radius左下角的圆角border-top-left-radius左上角的圆角使用CSS设置圆角边框例如设置右上角的圆角为10像素的代码为：border-top-right-radius:10px;例如设置右下角的圆角为20像素的代码为：border-bottom-right-radius:20px;例如设置左下角的圆角为30像素的代码为：border

4、-bottom-left-radius:30px;例如设置左上角的圆角为40像素的代码为：border-top-left-radius:40px;使用CSS设置边框阴影在CSS 3中，使用box-shadow属性来设置边框阴影，格式如下：box-shadow:h-shadow v-shadow blur spread color inset;各属性值和说明如表所示。例如设置水平阴影10像素、垂直阴影10像素、模糊距离5像素、阴影颜色为#88888888的代码为：box-shadow:10px 10px 5px#888888;属性值属性值说明说明h-shadow水平阴影的位置，必需v-shado

5、w垂直阴影的位置，必需blur模糊距离，可选spread阴影的尺寸，可选color阴影的颜色，可选inset将外部阴影改为内部阴影，可选使用CSS设置图片边框在CSS 3中，可以用border-image属性设置对象的图像边框，格式如下：border-image:border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;各属性值和说明如表所示。属性值属性值说明说明border-image-source用在边框的图片路径border-image-slice图片

6、边框内侧偏移border-image-width图片边框宽度border-image-outset边框图像区域超出边框的量border-image-repeat图像边框平铺（repeated）、铺满（rounded）或拉伸（streched）使用CSS设置图片边框【例9-4】制作不同样式的边框实例，代码如下所示（示例文件9-4.html）。bodymargin:30px;background-color:#E9E9E9;.picwidth:300px;padding:10px 10px 20px 10px;background-color:white;box-shadow:10px 10px

7、5px#888888;border:15px solid transparent;border-image:url(images/border4.jpg)30 30 round;imgborder-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;设置了整个页面主体部分的样式，标签选择器为“body”：设置了网页的内边距为30像素；设置了网页的背景颜色为#E9E9E9。设置了类名为.polaroid的div块的样式，第1

8、2行设置了宽为300像素，第13行设置了内边距的大小，顺序为上右下左；第14行设置了背景颜色为白色；第15行定义了边框阴影，水平方向为10像素，垂直方向为10像素，模糊距离为5像素，阴影颜色为#888888；第16行设置了边框宽度为15像素，线型为实线，颜色为透明；第17行设置了边框图片，上下方向内侧偏移为30像素，左右方向内侧偏移为30像素，边框图像重复方式为铺满。设置了图片的圆角半径大小，左上为20像素；右上为20像素；左下为10像素；右下为10像素。使用CSS设置图片边框【例9-4】制作不同样式的边框实例，代码如下所示（示例文件9-4.html）。大唐芙蓉园灯会在chrome浏览器中预览

9、使用CSS修饰表格1.border-collapse属性border-collapse属性用于设置是否将表格边框折叠为单一边框，各属性值和说明如表所示。属性值属性值说明说明separate边框会被分开，不会忽略 border-spacing 和 empty-cells 属性collapse边框会合并为一个单一的边框，忽略 border-spacing 和 empty-cells 属性inherit从父元素继承 border-collapse 属性的值使用CSS修饰表格2.border-spacing属性border-spacing属性用于设置分隔单元格边框的距离，格式如下：border-spa

10、cing:lengthlength;length是规定相邻单元的边框之间的距离，使用px、cm等单位，不允许使用负值。如果定义一个length值，那么定义的是水平和垂直间距。如果定义两个length值，那么第一个设置水平间距，第二个设置垂直间距。使用CSS修饰表格3.caption-side属性caption-side属性用于设置表格标题的位置，各属性值和说明如表所示。属性值属性值说明说明top默认值。把表格标题定位在表格之上。bottom把表格标题定位在表格之下inherit规定应该从父元素继承 caption-side 属性的值。使用CSS修饰表格4.empty-cells属性empty-

11、cells属性用于设置是否显示表格中的空单元格，各属性值和说明如表所示。属性值属性值描述描述hide不在空单元格周围绘制边框。show在空单元格周围绘制边框。默认。inherit规定应该从父元素继承 empty-cells 属性的值。使用CSS修饰表格5.table-layout属性table-layout属性用于设置单元格是否自适应其中的内容，各属性值和说明如表所示。属性值属性值说明说明automatic默认。列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。inherit规定应该从父元素继承table-layout属性的值。使用CSS修饰表格【例9-5】用CSS修饰表格实例，代

12、码如下所示（示例文件9-5.html）。tableborder-collapse:separate;border-spacing:10px;caption-side:top;empty-cells:show;table-layout:auto;表示边框会被分开。改为border-collapse:collapse;内部的边框会合并为一条边框设置单元格之间的距离是10像素。改为border-spacing:10px 20px;表示单元格之间水平距离为10像素、垂直距离为20像素使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。tableborder-c

13、ollapse:separate;border-spacing:10px;caption-side:top;empty-cells:show;table-layout:auto;设置标题在表格上方。改为caption-side:bottom;表示标题在表格下方表示即使单元格内没有内容，也显示该单元格。改为empty-cells:hide;不显示无内容的单元格使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。标题第一季度收益100000元第二季度在chrome浏览器中预览使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.

14、html）。标题第一季度收益100000元第二季度改为使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。标题第一季度收益100000元第二季度上面的CSS代码改为：table-layout:fixed本行代码改为作业一、选择题1.下列_是定义边框的圆角效果的属性。A border-style B border-width C border-radius D border-color2.下列_是用来设置边框阴影的属性。A border-style B box-shadow C border-radius D border-color3.下列_属性用于设置表格标题的位置。A border-spacing B empty-cells C caption-side D table-layout二、上机实训上机完成例9-4和例9-5的实例操作。End