第13章+css美化表格和表单

1、CS第13章 css美化表格和表单田兵软件工程系WEB DESIGNSC目录目录13.113.5WEB DESIGNSCv本章学习目标：本章学习目标： 了解表格和表单的使用 掌握基本的表格和表单布局方法 能够使用样式表进行表格和表单的美化 能够举一反三的灵活运用美化技巧WEB DESIGNSC1 表格边框样式表格边框样式 v表格边框样式对应的属性是表格边框样式对应的属性是border-style，这个属，这个属性用来设定边框边线的显示样式。性用来设定边框边线的显示样式。 v表格边框样式：表格边框样式：vvvv表格边框样式表格边框样式vvv.table_stylevv margin: 10px

2、auto;/*外补白外补白*/v padding:10px;/*内补白内补白*/ v border-style: dashed; /*表格边框样式表格边框样式*/v border-collapse: separate;/*边框是边框是否被合并否被合并*/vv.table_style tdvv width:150px;/*单元格宽度单元格宽度*/v height: 100px;/*单元格高度单元格高度*/ v border-style:ridge;/*单元格边框样式单元格边框样式*/vv课程编号课程编号课程名称课程名称学科类别学科类别10102网页设计基础网页设计基础选修选修10101数据库原理

3、数据库原理必修必修 WEB DESIGNSC2 表格边框宽度表格边框宽度 v 表格边框宽度对应的属性是表格边框宽度对应的属性是“border-width”，我们可以根据需要调整表，我们可以根据需要调整表格边框宽度的大小。我们在上个代码基础上对表格进行修改，将表格的边框格边框宽度的大小。我们在上个代码基础上对表格进行修改，将表格的边框宽度设为宽度设为20px，单元格边框宽度设为，单元格边框宽度设为10px .table_style margin: 10px auto;/*外补白外补白*/ padding:10px;/*内补白内补白*/ border-style: ridge;/*表格边框样式表格

4、边框样式*/ border-collapse: separate;/*边框是否被合并边框是否被合并*/ border-width:20px;/*表格边框宽度表格边框宽度*/ border-spacing: 10px;/*单元格间距单元格间距*/.table_style td width:150px;/*单元格宽度单元格宽度*/ height: 100px;/*单元格高度单元格高度*/ border-style:ridge;/*单元格边框样式单元格边框样式*/ border-width:10px;/*单元格边框宽度单元格边框宽度*/WEB DESIGNSC3 表格边框颜色表格边框颜色 v表格边框

5、颜色的设置通过属性表格边框颜色的设置通过属性border-color来设定，比如：来设定，比如：“border-color: #600;” .table_style margin: 10px auto;/*外补白外补白*/ padding:10px;/*内补白内补白*/ border-style: ridge;/*表格边框样式表格边框样式*/ border-collapse: separate;/*边框是否被合并边框是否被合并*/ border-width:20px; border-spacing: 10px; /*单元格间距单元格间距*/ border-color: #600; /*表格边框

6、颜色表格边框颜色*/ color: #0000FF;/*前景色前景色*/ background: #FF6; /*背景色背景色*/ .table_style td width:150px;/*单元格宽度单元格宽度*/ height: 100px;/*单元格高度单元格高度*/ border-style:ridge;/*单元格边框样式单元格边框样式*/ border-width:10px;/*单元格边框宽度单元格边框宽度*/ border-color: #F90;/*单元格边框颜色单元格边框颜色*/WEB DESIGNSC4 盒子阴影盒子阴影 v盒子阴影通过属性盒子阴影通过属性box-shadow

7、来实现的。来实现的。v基本语法：基本语法： box-shadow： | v语法说明： “x-offset”表示阴影沿x轴水平偏移值（可取正负值）； “y-offset”表示阴影沿y轴垂直偏移值（可取正负值）； “blur”表示阴影模糊值； “box-shadow”表示阴影的颜色。WEB DESIGNSC盒子阴影盒子阴影 vvvv盒子阴影盒子阴影vvv.table_stylev margin: 10px auto; /*外补白外补白*/v padding:20px 20px 20px;/*内补白内补白*/ v border-style: outset;/*表格边框样式表格边框样式*/v bord

8、er-collapse: separate;/*边框是否被合并边框是否被合并*/ v border-width:20px;v border-spacing:10px 10px;/*单元格间距单元格间距*/v border-color: #600; v color: #000;/*前景色前景色*/v background: #FF8F20; /*背景色背景色*/ vv.table_style tdvwidth:380px;/*单元格宽度单元格宽度*/vheight: 300px;/*单元格高度单元格高度*/vpadding:0px 20px 20px;/*内补白内补白*/vborder-styl

9、e:ridge;/*单元格边框样式单元格边框样式*/vborder-width:20px;/*单元格边框宽度单元格边框宽度*/vborder-color: #F90;/*单元格边框颜色单元格边框颜色*/vbackground: #FADD56; /*背景色背景色*/vtext-align:center;vfont-size:72px;vfont-family: 方正舒体方正舒体;vbox-shadow: 30px 30px 20px #333333;v/*盒子阴影盒子阴影*/vvertical-align: top;v.title1 color: #FF5402;font-family: 黑体

10、黑体, 宋体宋体, 隶书隶书;font-size: 64px;font-weight:bold;.title2 color: #000;font-family: 方正舒体方正舒体;font-size: 64px;font-weight:bold; 奖奖 状状 第一名第一名 WEB DESIGNSCvvvvv课程编号课程编号v课程名称课程名称v学科类别学科类别vvvvv10102v网页设计基础网页设计基础v选修选修vvvvv10101v数据库原理数据库原理v必修必修vvvvv WEB DESIGNSC表格的修饰表格的修饰 v在在HTML5中提供了对列的整体修饰和控制方法，根据中提供了对列的整体修

11、饰和控制方法，根据不同的需要，不同的需要， 如果要为多个表格列规定不同的属性值，可以使用标记。 如果打算为一组表格列规定相同的属性值，需要使用标记。 WEB DESIGNSC标记定义和用法标记定义和用法 v标记可以为表格中的一个或多个列定义属性值。标记可以为表格中的一个或多个列定义属性值。 通过使用标记，可以向整个表格的列应用一种样式，而不需要重复为该列的每个单元格或每一行设置样式，给用户提供了很大方便。 需要注意的是，只能在table或colgroup元素内使用 标记。v语法：语法： 说明：span的值用以规定col标记涉及的列的范围，也就是应该横跨的列数。WEB DESIGNSCv【例例6

12、.7】标记的用法标记的用法tableborder-collapse:collapse;width:100%table， td， thborder:1px solid black; 单位 类别 人数 河南理工大学 教师 1055 在图中可以看到，前两列的背景颜色都是红色了，如果要使列具有不同的样式，只要在col标记里设置新的样式就可以了 WEB DESIGNSC标记定义和用法标记定义和用法 v标记可以将一个表格中的若干列进行组标记可以将一个表格中的若干列进行组合，然后对其使用样式表进行修饰。合，然后对其使用样式表进行修饰。 通过标记，就可以向整个列组统一应用某一种样式，而不需要重复为该列的每个单

13、元格或每一行设置样式。v语法：语法： 说明：span的值用以规定col标记涉及的列的范围，也就是应该横跨的列数 WEB DESIGNSCv【例例6.8】标记的用法标记的用法vvvvvtableborder-collapse:collapse;width:100%vtable， td， thborder:1px solid black;vvvvv v v 单位单位v 类别类别v 人数人数v v v 河南理工大学河南理工大学v 教师教师v 1055v vvv 在图中可以看到，表格中的三个列的背景颜色都是黄色了，如果要使列具有不同的样式，只要在colgroup标记里设置新的样式就可以了 WEB DE

14、SIGNSC包含多分组的表格包含多分组的表格v来看一个包含多分组的表格，来看一个包含多分组的表格， 在这个表格里要设置对齐方式，其中前三列中的要垂直居上，而后两列垂直居下， 我们就可以用两个分组来进行设置。 WEB DESIGNSCv使用多个使用多个分组的表格分组的表格vvvvvtableborder-collapse:collapse;width:100%vtable，thborder:1px solid black;vtdborder:1px solid black;height:150px;vvvv v v v v1垂直居上垂直居上v2垂直居上垂直居上v3垂直居上垂直居上v4垂直居下垂直

15、居下v5垂直居下垂直居下v vvv WEB DESIGNSC和和组合使用组合使用v在上两个例子里面，在上两个例子里面，和和的使用方的使用方式和效果似乎都一样，实际上，它们的区别在组合使用式和效果似乎都一样，实际上，它们的区别在组合使用时你就明白了时你就明白了 v接下面来看一个组合使用接下面来看一个组合使用和和的实的实例。例。 当和组合使用时，的作用是细化的分组， 因为即使在一个组中，列与列之间也可能会需要一些差别，这时就需要来发挥作用了。WEB DESIGNSC和和的组合使用的组合使用vvvvvtableborder-collapse:collapse;width:100%vtable，thb

16、order:1px solid black;vtdborder:1px solid black;height:150px;v vvv v vvvv v v v1垂直居上垂直居上v2垂直居上垂直居上v3垂直居上垂直居上v4垂直居下垂直居下v5垂直居下垂直居下v vvv 在图中就可以看到变化了。比如第一列的宽度变窄了，而第三列的valign 覆盖了的valign设置。 WEB DESIGNSCv【例例】高亮显示的表格：高亮显示的表格： table.highlight font-size:11px; border-width: 1px; border-collapse: collapse; tabl

17、e.highlight th background-color: #99C;color: #FFF;font-size:16px;padding: 8px;border-style: solid;border-color: #a9c6c9;border-width: 1px; table.highlight tr background-color:pink; table.highlight td border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; text-align:center; font

18、-size:16px;表格代码在下一页：lWEB DESIGNSCvvvv 统计日期：统计日期：2013.3.1vvv 水果名称水果名称v 计量单位计量单位v 市场市场1v 市场市场2v 市场市场3v vv 苹果苹果v 500克克v 1.5v 2.2v 2.0vvv 桔子桔子500克克v 1.2v 1.5v 1.5vvv 香蕉香蕉500克克v 1.8v 2.5v 2.2vvv 菠萝菠萝500克克v 2.1v 3.0v 2.8vvv 猕猴桃猕猴桃500克克v 2.8v 3.6v 3.5vv v vWEB DESIGNSC美化表单基本元素美化表单基本元素 v表单基本元素的美化可以从以下几个方面来实

19、现，接下表单基本元素的美化可以从以下几个方面来实现，接下来我们通过简短的小例子来学习具体用法。来我们通过简短的小例子来学习具体用法。WEB DESIGNSCv 在这个例子里，我们给一个文本框设定了边框宽度和样式，代码如下：在这个例子里，我们给一个文本框设定了边框宽度和样式，代码如下：v v v v 表格边框样式表格边框样式v v v bodyvmargin:20px;vbackground:#CCCCCC;v v v v v v WEB DESIGNSCv表单边框的颜色（表单边框的颜色（13-11.html）vvvv表单边框的颜色表单边框的颜色vvvbodyvmargin:20px;vback

20、ground:#CCCCCC;vvinputvborder-color: red; vborder-style: inset; vborder-width: 10px;vvvv输入名字：输入名字：vvWEB DESIGNSCv【例例】表单的背景颜色（表单的背景颜色（13-12.html）vvvv表单的背景颜色表单的背景颜色vvvbodyvmargin:20px;vbackground:#CCCCCC;vfont-size:26px;vv.orangevborder: #0F0 dashed 2px;vbackground-color: #FF0;vwidth:30px;vheight:30px

21、;vcolor:orange;vv.applevborder: #0F0 dashed 2px;vbackground-color: #F00;vwidth:30px;vheight:30px;vcolor: #FF0;vvvv桔子桔子v苹果苹果vvWEB DESIGNSCv例：文本框背景是黑色的，字体是白色的；例：文本框背景是黑色的，字体是白色的； v例：密码框的背景色是灰色的；例：密码框的背景色是灰色的； v例：单选和复选按钮的背景是红色的；例：单选和复选按钮的背景是红色的； v例：例：submit1按钮的背景是黄色的；按钮的背景是黄色的； WEB DESIGNSCv在本例中，给多行文本框

22、加上了一个背景图片。在本例中，给多行文本框加上了一个背景图片。vvvv表单的背景颜色表单的背景颜色vvvbodyvmargin:20px;vbackground: #CC6;vv.txtBoxvbackground-image:url(images/bg_1.jpg);vcolor: #FFF;vfont-size:12px;vfont-weight:bold;vtext-align:center;vvvvv别董大别董大v【唐唐】高适高适v千里黄云白日曛，千里黄云白日曛，v北风吹雁雪纷纷。北风吹雁雪纷纷。v莫愁前路无知己，莫愁前路无知己，v天下谁人不识君。天下谁人不识君。vvvWEB DESI

23、GNSCv文本框、多行文本框、口令框、下拉选择框都可以使用文本框、多行文本框、口令框、下拉选择框都可以使用到字体样式。到字体样式。v字体有很多样式包括：字体字体有很多样式包括：字体(font-family)、字体风、字体风格格(font-style)、字体加粗、字体加粗(font- weight)、字体、字体大小大小(font-size)等等 WEB DESIGNSC本例中对表单中的文字作了修饰，还用了盒子阴影，边框圆角等本例中对表单中的文字作了修饰，还用了盒子阴影，边框圆角等vvvv像文字一样的按钮像文字一样的按钮vvbodyvbackground-color:#daeeff; /* 页面背

24、景色页面背景色 */vv.txtv width:188px;v height:30px;v border:0;/*边框边框*/v text-align:left;v line-height:30px;/*文字行高文字行高*/v font-size: 18px;v font-family:Arial Black;v box-shadow: -1px -1px 0 #fff,5px 5px 0 #333,1px 1px 0 #444; /*阴影阴影*/v color: #CCC;v v.buttonvwidth:138px;vheight:41px;vborder:0;/*边框边框*/vtext-

25、align:center;vline-height:41px;/*文字行高文字行高*/vfont-size: 18px;vfont-family:Arial Black;vcolor: #999;vfont-weight:bold;vbox-shadow: -1px -1px 0 #fff,5px 5px 0 #333,1px 1px 0 #444; /*阴影阴影*/vcursor: pointer;/*鼠标指到按钮上时的状态鼠标指到按钮上时的状态*/ v v.btn vborder-width:5px;vborder-style: outset;vborder-color:#00F;vbor

26、der-radius:15px;/*圆角圆角*/vheight:41px;vpadding: 10px 20px;vfont:bold 16px Tahoma;vcolor: #ff0000;vbox-shadow:10px 10px 10px #06C; /*阴影阴影*/vvvvvv vvvvv WEB DESIGNSCv 接下面我们通过几个小例子来继续了解如何来应用这些字体样式。接下面我们通过几个小例子来继续了解如何来应用这些字体样式。v 例：文本框里的文字是加粗的，大小是例：文本框里的文字是加粗的，大小是9pt，字体是宋体；，字体是宋体； v 例：密码框文字大小是例：密码框文字大小是12

27、pt，蓝色的；，蓝色的； v 例：多行文本框的字体是例：多行文本框的字体是Verdana，有下划线，大小是，有下划线，大小是12pt； 测试的文本v 例：使用了例：使用了9pt宋体文字的提交按钮；宋体文字的提交按钮； WEB DESIGNSC下拉菜单下拉菜单v下拉菜单的设计是网页制作上最常见到的一种效果，当下拉菜单的设计是网页制作上最常见到的一种效果，当用户将鼠标轻轻移到主菜单上时，就会弹出一个更加详用户将鼠标轻轻移到主菜单上时，就会弹出一个更加详细的下一级菜单，这样的设计不仅节省了网页排版需要细的下一级菜单，这样的设计不仅节省了网页排版需要的空间，也会使网页的布局显得更加简洁有序，而且一的空

28、间，也会使网页的布局显得更加简洁有序，而且一个美观别致的下拉菜单，更是为网页增加了不少视觉效个美观别致的下拉菜单，更是为网页增加了不少视觉效果。果。v制作下拉菜单的方法多种多样，这里我们使用制作下拉菜单的方法多种多样，这里我们使用DIV+CSS的设计方法。的设计方法。 WEB DESIGNSCvvvv下拉菜单下拉菜单vv*vmargin:0;vpadding:0;vv.drop_menuvfont-size:12px;vv.drop_menu ulvlist-style:none;vv.drop_menu livfloat:left;vposition:relative;vv.drop_menu ul ul /*内层列表样式内层列表样式*/vvisibility:hidden;/*隐藏内层列表隐藏内层列表*/vposition:absolute;vleft:10px;vtop:23px;vv.drop_menu ul li:hover ul,v.drop_menu ul a:hover ul/*鼠标悬停时，外层