Web前端开发课件 项目九 CSS 3修饰表格表单.pptxVIP

CSS3修饰表格表单项目九授课教师：姓名WEB前端开发

Contents

一项目描述本项目学习要点使用CSS设置边框圆角效果；使用CSS美化表格表单。使用CSS美化背景；使用CSS美化边框；

二知识准备使用CSS美化背景；使用CSS修饰表格。使用CSS美化边框；使用CSS设置圆角边框；使用CSS设置图片边框；使用CSS设置边框阴影；

使用CSS美化背景1．设置背景颜色在CSS3中，设置背景颜色的属性是background-color，格式如下：{background-color:transparent|color;}transparent是默认值，表示透明。color表示颜色，其设置方法有很多种：英文单词、十六进制、RGB、HSL、HSLA、GRBA，设置方法已经在前面介绍过。

使用CSS美化背景1．设置背景颜色【例9-1】为网页以及段落设置背景颜色实例，代码如下所示（示例文件9-1.html）。!DOCTYPEhtmlhtmllang=enhead metacharset=UTF-8 titleCSS设置背景颜色/title style body{ background-color:CadetBlue; } p{ background-color:rgb(154,205,50); color:#ffffff; line-height:30px; text-align:center; } /style/headbody P风高秋月白，雨霁晚霞红/P/body/html设置的整个网页的背景颜色为军校蓝色，标签选择器为“body”，用于声明整个网页。设置段落p的样式：设置背景色，这里使用的是RGB表示颜色的方法；第12行设置文字颜色为白色，这里用16进制数表示的颜色的方法；第13行设置行高为30像素；第14行设置了文字对齐方式为水平居中。在chrome浏览器中预览

使用CSS美化背景2．设置背景图片在CSS3中，设置背景图片的属性是background-image，与背景颜色相同，背景图片既可以对整个网页进行设置，也可以对某些HTML元素进行设置，除此之外，还可以通过CSS样式对图片的排列方式等进行控制。格式如下：{background-image:none|url(url);}默认值为none（无背景图），需要背景图时则要用url进行导入，url可以应用相对地址，也可以用绝对地址。

使用CSS美化背景2．设置背景图片如果图片因为某些原因不能正常显示，则将以背景颜色替代。如果图片太小不能铺满全屏，则会重复出现直至铺满。但是这种方式往往不适用于大多数情况，所以需要使用下面这些属性：{background-repeat:repeat|repeat-x|repeat-y|no-reapeat}⑴background-repeat用于设置图片的重复方式，格式如下：

使用CSS美化背景2．设置背景图片⑴background-repeat各属性值和说明如表所示。属性值说明repeat背景图片水平方向和垂直方向都平铺repeat-x背景图片水平方向平铺repeat-y背景图片垂直方向平铺ro-reapeat背景图片不平铺重复的背景图片是从元素的左上角开始平铺，直到水平或者垂直方向全部页面都被背景图片覆盖为止。

使用CSS美化背景2．设置背景图片⑵background-attachment设置好背景图片后，如果文字部分较长，则会出现滚动条，当拖动滚动条向下浏览文字的时候，初始可见的背景图片就会看不到了。要解决这个问题，就要使用background-attachment属性，该属性用来设置背景图片是否随着文档一起滚动，格式如下：各属性值和说明如表所示。{background-attachment:scroll|fixed}属性值说明scroll默认值，当页面滚动时，背景图片随页面一起滚动fixed背景图片固定在页面的可见区域里

使用CSS美化背景2．设置背景图片⑶background-position默认情况下，背景图片的位置是从元素的左上角开始的，但实际的网页设计中，可以根据需要，直接指定图片的出现位置，这就用到了background-position，该属性用于指定背景图片在元素中的位置，属性值的设置可以分为四类：绝对定位位置、百分比定义位置、垂直对齐值和水平对齐值。格式如下：{background-position:length|percentage|top|center|bottom|left|right}

使用CSS美化背景2．设置背景图片⑶background-position各属性值和说明如表所示。属性值说明length设置图片与边框在水平和垂