Web前端开发课件 项目九 CSS 3修饰表格表单_第1页
Web前端开发课件 项目九 CSS 3修饰表格表单_第2页
Web前端开发课件 项目九 CSS 3修饰表格表单_第3页
Web前端开发课件 项目九 CSS 3修饰表格表单_第4页
Web前端开发课件 项目九 CSS 3修饰表格表单_第5页
已阅读5页，还剩63页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>CSS设置背景颜色</title> <style> body{ background-color:CadetBlue; } p{ background-color:rgb(154,205,50); color:#ffffff; line-height:30px; text-align:center; } </style></head><body> <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>设置图片与边框在水平和垂直方向的距离长度，后跟长度单位<percentage>以页面元素框的宽度和高度的百分比放置图片top背景图片顶部居中显示center背景图片居中显示bottom背景图片底部居中显示left背景图片左部居中显示right背景图片右部居中显示使用CSS美化背景2．设置背景图片⑶background-positionbackground-position属性后面也可以有垂直对齐值和水平对齐值两个属性值，这样可以同时决定水平与垂直位置。例设置图片位置在右上角的代码为：{background-position:topright;}例设置图片位置在水平20像素、垂直30像素的代码为：{background-position:20px30px;}使用CSS美化背景2．设置背景图片⑷background-sizebackground-size属性用来控制图片的大小，格式如下：各属性值和说明如表所示。{background-size:<length>|<percentage>|auto]{1,2}|cover|contain;}属性值说明<length>由浮点数和单位标识符组成的长度值<percentage>取值为0%-100%之间的值cover保持背景图像本身的宽高比例，将图片缩放到正好覆盖所定义的背景区域contain保持图像本身的宽高比，将图片缩放到宽度或高度正好适应背景区域使用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该属性指定背景的绘制区域，格式如下：各属性值和说明如表所示。{background-clip:border-box|padding-box|content-box;}属性值说明border-box背景绘制在边框方框内（含边框）padding-box背景绘制在边框方块内（不含边框）content-box背景绘制在内容方框内使用CSS美化背景2．设置背景图片【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示（示例文件9-2.html）。<style> body{ background-color:black; background-image:url(images/03.jpg); background-size:400px500px; background-position:0px200px; background-repeat:repeat-x; background-attachment:fixed; } div{ color:#ffffff; width:300px; border:10pxdashed#ffb90f; padding:35px; margin:150px; background-image:url(images/04.jpg); background-size:cover; background-clip:padding-box; }</style>设置了整个页面的背景样式，设置标签选择器为“body”的样式，用于声明网页的整个主体部分：设置了背景颜色设置为黑色，当背景图片覆盖不到时，网页将以黑色显示；设置了背景图片；设置了图片大小为宽400像素、高500像素；设置了图片位置距水平原点0像素、距垂直原点200像素；设置了图片重复方式为横向重复，即背景图片在网页中只在横向重复平铺；设置了图片滚动为不随文字滚动，所以当下拉滚动条的时候，背景图片的位置并不发生变化。设置了div的样式，该样式应用于网页中所有的div标签：分别设置了文字颜色为白色、宽度为300像素、边框为10像素的#ffb90f颜色虚线、内边距为35像素、外边距为150像素、背景图片。设置了图片大小为cover，即图片保持宽高比例，自动适应背景区域，所以浏览时会看到两个div中背景图片的拉伸程度是不同的。设置了图片的剪裁区域为padding-box，即从padding区域开始显示背景。使用CSS美化背景2．设置背景图片【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示（示例文件9-2.html）。<body> <div> <h2>虞美人</h2> <p>春花秋月何时了，<br/>往事知多少。<br/>小楼昨夜又东风，<br/>故国不堪回首月明中。<br/>雕栏玉砌应犹在，<br/>只是朱颜改，<br/>问君能有几多愁，<br/>恰似一江春水向东流。</p> </div> <div> <h2>水调歌头</h2> <p>明月几时有？<br/>把酒问青天。<br/>不知天上宫阙，<br/>今夕是何年。<br/>我欲乘风归去，<br/>又恐琼楼玉宇，<br/>高处不胜寒。<br/>起舞弄清影，<br/>何似在人间？<br/>转朱阁，<br/>低绮户，<br/>照无眠。<br/>不应有恨，<br/>何事长向别时圆？<br/>人有悲欢离合，<br/>月有阴晴圆缺，<br/>此事古难全。<br/>但愿人长久，<br/>千里共婵娟。</p> </div></body>在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;（背景图片从border区域开始），或者background-origin:padding-box;（背景图片从padding区域开始），其浏览效果分别如图所示。使用CSS美化边框边框就是元素的边线，每个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框的外观，在CSS3中分别使用border-style、border-width和border-color三个属性来设置。而边框有上下左右四条，如果需要四条边框设置不同的样式，还需要分别指定。这些属性和说明如表所示。分类属性说明边框样式border-style所有边框的样式border-top-style上边框样式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-width左边框颜色简写属性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直线doubled双线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.边框宽度设置边框宽度的格式如下：{border-width:medium|thin|think|<length>;}其属性值和说明如表所示。例如设置所有边框都为细边框的代码为：{border-width:thin;}例如设置左边框宽度为5像素的代码为：{border-left-width:5px;}属性值说明medium默认值，中等宽度thin细边框think粗边框length自定义宽度使用CSS美化边框4.边框的简写属性border等简写属性集合了上面介绍的三种属性，格式如下：{border:border-width|border-style|border-color;}三个属性的顺序可以自由调换。例如设置所有边框为10像素的紫色虚线的代码为：{border:dashedpurple10px;}例如设置上边框为加粗的红色双线：{border-top:doubleredthink;}使用CSS美化边框【例9-3】制作不同样式的边框实例，代码如下所示（示例文件9-3.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="utf-8"> <title>不同的边框类型</title> <style> 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: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-style: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-color:green;border-left-width:6px; border-right-style:outset;border-right-color:yellow;border-right-width:8px; } p.easy{Border:black2pxdouble;} </style></head>使用CSS美化边框【例9-3】制作不同样式的边框实例，代码如下所示（示例文件9-3.html）。<body> <pclass="none">无边框。</p> <pclass="dotted">虚线边框。</p> <pclass="dashed">虚线边框。</p> <pclass="solid">实线边框。</p> <pclass="double">双边框。</p> <pclass="groove">凹槽边框。</p> <pclass="ridge">垄状边框。</p> <pclass="inset">嵌入边框。</p> <pclass="outset">外凸边框。</p> <pclass="difference">四条边框都不同。</p> <pclass="easy">用简单写法</p></body></html>在chrome浏览器中预览使用CSS设置圆角边框CSS3的border-radius属性可用来定义边框的圆角效果，格式如下：{border-radius:none|<length>{1,4}[/<length>{1,4}];}其中，none是默认值，表示没有圆角；<length>表示由浮点数和单位标识符组成的长度值。例如设置圆角边框为10像素、圆角显示为1/4个圆的代码为：{border-radius:10px;}例如设置圆角的水平半径是5像素、垂直半径是50像素的代码为：{border-radius:5px/50px;}例如设置没有圆角的代码为（只要参数中出现0，则为矩形，不显示圆角）：{border-radius:0px;}使用CSS设置圆角边框例如设置左上角圆角半径为10像素、右上角圆角半径为20像素、右下角圆角半径为30像素、左下角圆角半径为40像素的代码为：{border-radius:10px20px30px40px;}如果最后一个值省略，左下角半径与右下角相同，如果第三个值省略，右下角半径与右上角相同，以此类推。除了上面的设置方法以外，还可以单独给元素设置四个不同的圆角，属性和说明如表所示。属性说明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-bottom-left-radius:30px;}例如设置左上角的圆角为40像素的代码为：{border-top-left-radius:40px;}使用CSS设置边框阴影在CSS3中，使用box-shadow属性来设置边框阴影，格式如下：{box-shadow:h-shadowv-shadowblurspreadcolorinset;}各属性值和说明如表所示。例如设置水平阴影10像素、垂直阴影10像素、模糊距离5像素、阴影颜色为#88888888的代码为：{box-shadow:10px10px5px#888888;}属性值说明h-shadow水平阴影的位置，必需v-shadow垂直阴影的位置，必需blur模糊距离，可选spread阴影的尺寸，可选color阴影的颜色，可选inset将外部阴影改为内部阴影，可选使用CSS设置图片边框在CSS3中，可以用border-image属性设置对象的图像边框，格式如下：{border-image:border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat;}各属性值和说明如表所示。属性值说明border-image-source用在边框的图片路径border-image-slice图片边框内侧偏移border-image-width图片边框宽度border-image-outset边框图像区域超出边框的量border-image-repeat图像边框平铺（repeated）、铺满（rounded）或拉伸（streched）使用CSS设置图片边框【例9-4】制作不同样式的边框实例，代码如下所示（示例文件9-4.html）。<style> body{ margin:30px; background-color:#E9E9E9; } .pic{ width:300px; padding:10px10px20px10px; background-color:white; box-shadow:10px10px5px#888888; border:15pxsolidtransparent; border-image:url(images/border4.jpg)3030round; } img{ border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }</style>设置了整个页面主体部分的样式，标签选择器为“body”：设置了网页的内边距为30像素；设置了网页的背景颜色为#E9E9E9。设置了类名为.polaroid的div块的样式，第12行设置了宽为300像素，第13行设置了内边距的大小，顺序为上右下左；第14行设置了背景颜色为白色；第15行定义了边框阴影，水平方向为10像素，垂直方向为10像素，模糊距离为5像素，阴影颜色为#888888；第16行设置了边框宽度为15像素，线型为实线，颜色为透明；第17行设置了边框图片，上下方向内侧偏移为30像素，左右方向内侧偏移为30像素，边框图像重复方式为铺满。设置了图片的圆角半径大小，左上为20像素；右上为20像素；左下为10像素；右下为10像素。使用CSS设置图片边框【例9-4】制作不同样式的边框实例，代码如下所示（示例文件9-4.html）。<body> <divclass="pic"> <imgsrc="images/02.jpg"alt="梅园亭"width="284"height="213"/> <h3class="caption">大唐芙蓉园灯会</h3> </div></body>在chrome浏览器中预览使用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-spacing:length[length];}length是规定相邻单元的边框之间的距离，使用px、cm等单位，不允许使用负值。如果定义一个length值，那么定义的是水平和垂直间距。如果定义两个length值，那么第一个设置水平间距，第二个设置垂直间距。使用CSS修饰表格3.caption-side属性caption-side属性用于设置表格标题的位置，各属性值和说明如表所示。属性值说明top默认值。把表格标题定位在表格之上。bottom把表格标题定位在表格之下inherit规定应该从父元素继承caption-side属性的值。使用CSS修饰表格4.empty-cells属性empty-cells属性用于设置是否显示表格中的空单元格，各属性值和说明如表所示。属性值描述hide不在空单元格周围绘制边框。show在空单元格周围绘制边框。默认。inherit规定应该从父元素继承empty-cells属性的值。使用CSS修饰表格5.table-layout属性table-layout属性用于设置单元格是否自适应其中的内容，各属性值和说明如表所示。属性值说明automatic默认。列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。inherit规定应该从父元素继承table-layout属性的值。使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。<style> table{ border-collapse:separate; border-spacing:10px; caption-side:top; empty-cells:show; table-layout:auto; }</style>表示边框会被分开。改为border-collapse:collapse;内部的边框会合并为一条边框设置单元格之间的距离是10像素。改为border-spacing:10px20px;表示单元格之间水平距离为10像素、垂直距离为20像素使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。<style> table{ border-collapse:separate; border-spacing:10px; caption-side:top; empty-cells:show; table-layout:auto; }</style>设置标题在表格上方。改为caption-side:bottom;表示标题在表格下方表示即使单元格内没有内容，也显示该单元格。改为empty-cells:hide;不显示无内容的单元格使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。<body> <tableborder="1"> <caption>标题</caption> <tr> <td>第一季度</td> <td>收益100000元</td> </tr> <tr> <td>第二季度</td> <td></td> </tr> </table></body>在chrome浏览器中预览使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。<body> <tableborder="1"> <caption>标题</caption> <tr> <td>第一季度</td> <td>收益100000元</td> </tr> <tr> <td>第二季度</td> <td></td> </tr> </table></body>改为<tableborder="1"width="100%">使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。<body> <tableborder="1"> <caption>标题</caption> <tr> <td>第一季度</td> <td>收益100000元</td> </tr> <tr> <td>第二季度</td> <td></td> </tr> </table></body>上面的CSS代码改为：table-layout:fixed本行代码改为<tableborder="1"width="100%">三项目实施结合前面学习的知识，用CSS修饰一个用于发送邮件的表单页面，如图所示。<style> body{ background-color:#9ccede; } table{ background-color:#add6e7; border-spacing:20px16px; border-radius:20px10px10px20px; } input,textarea{ line-height:25px; width:220px; border:none; padding-left:5px; color:#636363; }三项目实施打开Sublime编辑器，新建一个文件，保存文件名为“9-6.html”。第一步第二步Head标签内的CSS代码输入如下：设置了整个网页body的背景颜色，值为#9ccede。设置了input元素（文本框、按钮）和textarea（文本域）的样式：文本行高为25像素；元素宽度为220px；元素边框为无，因为大部分表单元素有默认的边框，所以要根据需要去掉默认边框；元素的内左边距为5像素，所以当在表单中输入内容的时候，文字与边框的距离为5像素；文本颜色为#636363。设置了表格table的样式：背景颜色为#add6e7；单元格间距为水平20像素及垂直16像素；四个圆角边框，圆角半径依次是：左上角20像素、右上角10像素、右下角10像素、左下角20像素。 b{ letter-spacing:2px; font-size:16px; } td.mail{ color:#52737f; background-image:url(images/xinfeng.png); background-repeat:no-repeat; background-position:0px25px; } input.btn{ width:87px; line-height:37px; border-radius:20px; background-color:#8cbdce; border:solid4px#ffffff; }</style>三项目实施第二步设置了“联系我们“四个字的样式。文字之间的距离为2像素；文字大小为16像素。设置了按钮的样式。宽度为87像素；文字行高为37像素；圆角半径为20像素；背景颜色为#8cbdce；边框为4像素的白色实线。设置了mail（“联系我们”所在的单元格）的样式。文字颜色为#52737f；背景图片为mail.png；背景图片的重复方式为不重复；背景图片的位置为水平方向0像素、垂直方向25像素。三项目实施第三步在body标签中，先插入form表单，再在form表单中插入表格，在表格中填写各表单元素。<body> <formmethod="post"action=""> <tablewidth="380px"> <tr> <tdclass="mail"width="80px"rowspan="6"valign="top"> <b>联系我们</b> </td> <td><inputtype="text"value="姓名"></td> </tr> <tr> <td><inputtype="text"value="邮箱地址"></td> </tr> <tr> <td><inputtype="text"value="网站地址"></td> </tr> <tr> <td><textarearows="4"value="信息内容"></textarea></td> </tr> <tr> <td><inputclass="btn"type="submit"name=""value="submit"></td> </tr> <tr> <tdheight="20px"></td> </tr> </table> </form></body>> 三项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四项目拓展用CSS修饰一个后台的表格页面，效果如图所示。四项目拓展新建html网页文件，保存文件名为“9-7.html”。第一步第二步Head标签内的CSS代码输入如下：<style> #top{ padding:15px; font-size:14px; background-image:url(images/header-bg.png); background-repeat:repeat-x; border-radius:5px; color:#ffffff; } #body-panel{ background-color:#f8f8f8; margin:04px; border:1pxsolid#bcbcbc; border-top:0; } .table1{ background-color:#f5f5f5; background-image:url(images/toolbar.png); background-repeat:repeat-x; border-spacing:0; }设置了ID名为“top”的div块样式。内边距为15像素；字体大小为14像素；背景图片为header-bg.png；背景图片的重复方式为水平方向重复；圆角半径为5像素；文字颜色为白色。设置了ID名为“body-panel”的div块样式。背景颜色为#f8f8f8；外边距为垂直方向0像素、水平方向4像素；边框为#bcbcbc颜色的1像素实线；上边框为0像素。设置了第一个表格table1的样式。背景颜色为#f5f5f5；背景图片为toolbar.png；背景图片的重复方式为水平方向平铺；单元格间距为0。四项目拓展第二步 .table1trtd{border-right:1pxsolid#d0d0d0;} .table1trtda{ padding:8px30px8px40px; color:#666666; text-decoration:none; display:block; } .accept,.delete,.print,.refresh,.update{background:no-repeat20px10px;} .accept{background-image:url(images/accept.png);} .delete{background-image:url(images/cross.png);} .print{background-image:url(images/printer.png);} .refresh{background-image:url(images/arrow_refresh.png);} .update{background-image:url(images/pencil.png);} .table2{ width:100%; border-top:1pxsolid#d0d0d0; border-collapse:collapse; border-spacing:0px; }设置了table1中的单元格右边框为#d0d0d0颜色的1像素实线型。设置了table1中几个超链接的背景图片为不重复，并且位置为水平方向20像素、垂直方向10像素。设置了table1中的超链接样式。设置了内边距，文字颜色#666666，下划线为无，显示方式为块。分别设置了table1中的每个超链接的背景图片。设置了第二个表格table2的样式。表格宽度为100%；表格边框为#d0d0d0颜色的1像素实线；表格边框合并显示；单元格间距为0。四项目拓展第二步 .table2theadth{ line-height:30px; background-color:#f5f5f5; background-image:url(images/table-header.png); background-repeat:repeat-x; background-position:leftbottom; border:solid2px#dddddd; text-align:center; } .table2tbodytd{ line-height:30px; border:solid2px#dddddd; text-align:center; } .table2.gradeC{ background-color:#f2f2f2; }</style>设置了第二个表格table2标题行单元格的样式。行高为30像素；背景颜色为#f5f5f5；背景图片为table-header.png；背景图片的重复方式为水平方向重复；背景图片位置为水平方向居左、垂直方向在底部；单元格边框为#dddddd颜色的2像素实线；文本对齐方式为居中对齐。设置table2主体部分单元格的样式。文本行高为30像素；单元格边框为#dddddd颜色的2像素实线；单元格文本居中对齐。设置偶数行的背景颜色为#f2f2f2。四项目拓展第三步<body> <divid="top"> <b>后台页面</b> </div> <divid="body-panel"> <tableclass="table1"> <tr> <td><ahref="#"class="accept">提交</a></td> <td><ahref="#"class="delete">删除</a></td> <td><ahref="#"class="print">打印</a></td> <td><ahref="#"class="refresh">修改</a></td> <td><ahref="#"class="update">更新</a></td> </tr> </table>body标签内的HTML代码输入如下：创建了一个1行5列的表格table1，每个单元格内创建一个超链接。。创建了一个ID名为“top”的div块，用于显示标题，标题以加粗形式显示。。创建另一个ID名为“body-panel”的div块，用于显示两个表格。四项目拓展第三步 <tableclass="table2"> <thead> <tr> <th>是否质检</th> <th>产品名称</th> <th>产品编号</th> <th>出库数量</th> <th>采购单价</th> <th>出库日期</th> </tr> </thead> <tbody> <tr> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> 创建表格的标题行。创建表格的主体部分。四项目拓展第三步 <trclass="gradeC"> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> <tr> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr>创建表格的主体部分。四项目拓展第三步 <trclass="gradeC"> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> <tr> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> </tbody> </table> </div></body>创建表格的主体部分。四项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五项目小结本项目通过项目实施和项目拓展只做了表单页面和表格页面，学习了CSS如何设置背景和边框，如何修饰表格和表单等元素，让网页更加美观。五项目小结本项目知识点总结如表所示。属性属性值说明background-color

背景颜色background-imagenone|url(url)背景图片background-repeatrepeat|repeat-x|repeat-y|no-reapeat背景图片重复background-attachmentscroll|fixed背景图片随文字滚动background-position<length>|<percentage>|top|center|bottom|left|right背景图片位置background-size<length>|<percentage>|cover|contain背景图片大小background-originborder|padding|content背景图片的起始点background-clipborder-box|padding-box|content-box背景图片绘制区域border

边框属性border-stylenone|dotted|dashed|solid|doubled|groove|ridge|inset|outset边框样式五项目小结本项目知识点总结如表所示。属性属性值说明border-color

边框颜色border-widthmediumthinthinklength边框宽度border-radiusnone|<length>{1,4}[/<length>{1,4}];}边框圆角box-shadowh-shadow|v-shadow|blur|spread|color|inset边框阴影border-imageborder-image-source图片边框border-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-collapseseparate|collapse|inherit表格边框是否折叠border-spacinglength[length]单元格边框的距离caption-sidetop|bottom|inherit表格标题的位置empty-cellshide|show|inherit是否显示空白单元格table-

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论