《工信版（中职）Web前端设计基础 项目九-1电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目九-1电子课件.pptx（30页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF（中职）Web前端设计基础 项目九-1电子课件CSS 3修饰表格表单项目九授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点使用CSS设置边框圆角效果；使用CSS美化表格表单。使用CSS美化背景；使用CSS美化边框；二 知识准备使用CSS美化背景；使用CSS修饰表格。使用CSS美化边框；使用CSS设置圆角边框；使用CSS设置图片边框；使用CSS设置边框阴影；使用CSS美化背景1设置背景颜色在CSS 3中，设置背景颜色的属性是background-color，格式如下：background-co
2、lor:transparent|color;transparent是默认值，表示透明。color表示颜色，其设置方法有很多种：英文单词、十六进制、RGB、HSL、HSLA、GRBA，设置方法已经在前面介绍过。使用CSS美化背景1设置背景颜色【例9-1】为网页以及段落设置背景颜色实例，代码如下所示（示例文件9-1.html）。CSS设置背景颜色bodybackground-color:CadetBlue;pbackground-color:rgb(154,205,50);color:#ffffff;line-height:30px;text-align:center;风高秋月白，雨霁晚霞红设置的
3、整个网页的背景颜色为军校蓝色，标签选择器为“body”，用于声明整个网页。设置段落p的样式：设置背景色，这里使用的是RGB表示颜色的方法；第12行设置文字颜色为白色，这里用16进制数表示的颜色的方法；第13行设置行高为30像素；第14行设置了文字对齐方式为水平居中。在chrome浏览器中预览使用CSS美化背景2设置背景图片在CSS 3中，设置背景图片的属性是background-image，与背景颜色相同，背景图片既可以对整个网页进行设置，也可以对某些HTML元素进行设置，除此之外，还可以通过CSS样式对图片的排列方式等进行控制。格式如下：background-image:none|url(u
4、rl);默认值为none（无背景图），需要背景图时则要用url进行导入，url可以应用相对地址，也可以用绝对地址。使用CSS美化背景2设置背景图片如果图片因为某些原因不能正常显示，则将以背景颜色替代。如果图片太小不能铺满全屏，则会重复出现直至铺满。但是这种方式往往不适用于大多数情况，所以需要使用下面这些属性：background-repeat:repeat|repeat-x|repeat-y|no-reapeatbackground-repeat用于设置图片的重复方式，格式如下：使用CSS美化背景2设置背景图片background-repeat各属性值和说明如表所示。属性值属性值说明说明rep
5、eat背景图片水平方向和垂直方向都平铺repeat-x背景图片水平方向平铺repeat-y背景图片垂直方向平铺ro-reapeat背景图片不平铺重复的背景图片是从元素的左上角开始平铺，直到水平或者垂直方向全部页面都被背景图片覆盖为止。使用CSS美化背景2设置背景图片background-attachment设置好背景图片后，如果文字部分较长，则会出现滚动条，当拖动滚动条向下浏览文字的时候，初始可见的背景图片就会看不到了。要解决这个问题，就要使用background-attachment属性，该属性用来设置背景图片是否随着文档一起滚动，格式如下：各属性值和说明如表所示。background-at
6、tachment:scroll|fixed属性值属性值说明说明scroll默认值，当页面滚动时，背景图片随页面一起滚动fixed背景图片固定在页面的可见区域里使用CSS美化背景2设置背景图片background-position默认情况下，背景图片的位置是从元素的左上角开始的，但实际的网页设计中，可以根据需要，直接指定图片的出现位置，这就用到了background-position，该属性用于指定背景图片在元素中的位置，属性值的设置可以分为四类：绝对定位位置、百分比定义位置、垂直对齐值和水平对齐值。格式如下：background-position:|top|center|bottom|left
7、|right使用CSS美化背景2设置背景图片background-position各属性值和说明如表所示。属性值属性值说明说明设置图片与边框在水平和垂直方向的距离长度，后跟长度单位以页面元素框的宽度和高度的百分比放置图片top背景图片顶部居中显示center背景图片居中显示bottom背景图片底部居中显示left背景图片左部居中显示right背景图片右部居中显示使用CSS美化背景2设置背景图片background-positionbackground-position属性后面也可以有垂直对齐值和水平对齐值两个属性值，这样可以同时决定水平与垂直位置。例 设置图片位置在右上角的代码为：backgr
8、ound-position:top right;例 设置图片位置在水平20像素、垂直30像素的代码为：background-position:20px 30px;使用CSS美化背景2设置背景图片background-sizebackground-size属性用来控制图片的大小，格式如下：各属性值和说明如表所示。background-size:|auto1,2|cover|contain;属性值属性值说明说明由浮点数和单位标识符组成的长度值取值为0%-100%之间的值cover保持背景图像本身的宽高比例，将图片缩放到正好覆盖所定义的背景区域contain保持图像本身的宽高比，将图片缩放到宽度或高
9、度正好适应背景区域使用CSS美化背景2设置背景图片background-origin在默认情况下，background-position属性总是以元素左上角原点作为背景图像的起始点，而用background-origin可以改变这种定位方式，格式如下：各属性值和说明如表所示。Background-origin:border|padding|content;属性值属性值说明说明Border-box从border区域开始显示背景padding-box从Padding区域开始显示背景content-box从Content区域开始显示背景使用CSS美化背景2设置背景图片background-clip该
10、属性指定背景的绘制区域，格式如下：各属性值和说明如表所示。background-clip:border-box|padding-box|content-box;属性值属性值说明说明border-box背景绘制在边框方框内（含边框）padding-box背景绘制在边框方块内（不含边框）content-box背景绘制在内容方框内使用CSS美化背景2设置背景图片【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示（示例文件9-2.html）。bodybackground-color:black;background-image:url(images/03.jpg);background-si
11、ze:400px 500px;background-position:0px 200px;background-repeat:repeat-x;background-attachment:fixed;divcolor:#ffffff;width:300px;border:10px dashed#ffb90f;padding:35px;margin:150px;background-image:url(images/04.jpg);background-size:cover;background-clip:padding-box;设置了整个页面的背景样式，设置标签选择器为“body”的样式，用于
12、声明网页的整个主体部分：设置了背景颜色设置为黑色，当背景图片覆盖不到时，网页将以黑色显示；设置了背景图片；设置了图片大小为宽400像素、高500像素；设置了图片位置距水平原点0像素、距垂直原点200像素；设置了图片重复方式为横向重复，即背景图片在网页中只在横向重复平铺；设置了图片滚动为不随文字滚动，所以当下拉滚动条的时候，背景图片的位置并不发生变化。设置了div的样式，该样式应用于网页中所有的div标签：分别设置了文字颜色为白色、宽度为300像素、边框为10像素的#ffb90f颜色虚线、内边距为35像素、外边距为150像素、背景图片。设置了图片大小为cover，即图片保持宽高比例，自动适应背景
13、区域，所以浏览时会看到两个div中背景图片的拉伸程度是不同的。设置了图片的剪裁区域为padding-box，即从padding区域开始显示背景。使用CSS美化背景2设置背景图片【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示（示例文件9-2.html）。虞美人春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改，问君能有几多愁，恰似一江春水向东流。水调歌头明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，
14、此事古难全。但愿人长久，千里共婵娟。在chrome浏览器中预览使用CSS美化背景2设置背景图片【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示（示例文件9-2.html）。如果将CSS代码中的background-clip属性值设置为border-box（从边框区域开始）或者content-box（从内容区域开始），其浏览效果分别如图所示。使用CSS美化背景2设置背景图片【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示（示例文件9-2.html）。如果将CSS代码中的background-clip语句改为:background-origin:border-box;（背景
15、图片从border区域开始），或者background-origin:padding-box;（背景图片从padding区域开始），其浏览效果分别如图所示。使用CSS美化边框边框就是元素的边线，每个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框的外观，在CSS3中分别使用border-style、border-width和border-color三个属性来设置。而边框有上下左右四条，如果需要四条边框设置不同的样式，还需要分别指定。这些属性和说明如表所示。分类分类属性属性说明说明边框样式边框样式border-style所有边框的样式border-top-style上边
16、框样式border-right-style右边框样式border-bottom-style下边框样式border-left-style左边框样式边框颜色边框颜色border-color所有边框的颜色border-top-color上边框颜色border-right-color右边框颜色border-bottom-color下边框颜色border-left-color左边框颜色边框宽度边框宽度border-width所有边框的宽度border-top-width上边框颜色border-right-width右边框颜色border-bottom-width下边框颜色border-left-widt
17、h左边框颜色简写属性简写属性border把四个边的三个属性一起设置border-top把上边框的三个属性一起设置border-right把右边框的三个属性一起设置border-bottom把下边框的三个属性一起设置border-left把左边框的三个属性一起设置使用CSS美化边框1.边框样式类属性设置边框样式类属性，格式如下：border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;其属性值和说明如表所示。属性值属性值说明说明none无边框dotted点线式dashed破折线solid 直线dou
18、bled双线groove槽线式ridge脊线式inset内嵌效果outset突起效果例如设置所有边框样式都是实线型的代码为：border-style:solid;例如设置上边框样式为双线型的代码为：border-top-style:doubled;使用CSS美化边框2.边框颜色设置边框颜色的格式如下：border-color:color;color表示颜色，其颜色值通过十六进制和RGB等方式设置。例如设置所有边框颜色为红色的代码为：border-color:red;例如设置下边框颜色为灰色的代码为：border-bottom-color:#eeeeee;使用CSS美化边框3.边框宽度设置边框宽
19、度的格式如下：border-width:medium|thin|think|;其属性值和说明如表所示。例如设置所有边框都为细边框的代码为：border-width:thin;例如设置左边框宽度为5像素的代码为：border-left-width:5px;属性值属性值说明说明medium默认值，中等宽度thin细边框think粗边框length自定义宽度使用CSS美化边框4.边框的简写属性border等简写属性集合了上面介绍的三种属性，格式如下：border:border-width|border-style|border-color;三个属性的顺序可以自由调换。例如设置所有边框为10像素的紫色
20、虚线的代码为：border:dashed purple 10px;例如设置上边框为加粗的红色双线：border-top:double red think;使用CSS美化边框【例9-3】制作不同样式的边框实例，代码如下所示（示例文件9-3.html）。不同的边框类型 p.none border-style:none;border-color:black;border-width:1px;p.dotted border-style:dotted;border-color:pink;border-width:2px;p.dashed border-style:dashed;border-color:
21、orange;border-width:3px;p.solid border-style:solid;border-color:yellow;border-width:4px;p.double border-style:double;border-color:green;border-width:5px;p.groove border-style:groove;border-color:blue;border-width:6px;p.ridge border-style:ridge;border-color:purple;border-width:7px;p.inset border-styl
22、e:inset;border-color:ivory;border-width:8px;p.outset border-style:outset;border-color:red;border-width:9px;p.difference border-top-style:outset;border-top-color:red;border-top-width:2px;border-bottom-style:outset;border-bottom-color:blue;border-bottom-width:4px;border-left-style:outset;border-left-c
23、olor:green;border-left-width:6px;border-right-style:outset;border-right-color:yellow;border-right-width:8px;p.easyBorder:black 2px double;使用CSS美化边框【例9-3】制作不同样式的边框实例，代码如下所示（示例文件9-3.html）。无边框。虚线边框。虚线边框。实线边框。双边框。凹槽边框。垄状边框。嵌入边框。外凸边框。四条边框都不同。用简单写法在chrome浏览器中预览作业一、选择题1.下列_是设置背景颜色的属性。A background-color B background-imageC background-repeat D background-position2.下列_不是设置背景图片的属性。A background-color B background-imageC background-repeat D background-position3.下列_不是美化边框的属性。A border-style B border-color C border-width D border-height二、上机实训上机完成例9-1和例9-3的实例操作。End