先给大家说说关于定制表格的一些细节。在第一章里的那个例子里,大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂,主要的也就是对背景(background)和边框(border)进行定义。用的也不过是这两方面的属性。
块参数(Block-Level Formatting Properties)
参数 |
含义 |
举例 |
Left-margin,right-margin |
留的空白 |
长度值,百分比值 |
Padding-top… |
内容边框间距 |
长度值,百分比值 |
Border-width |
边框宽度 |
长度值 |
Border-style |
边框风格 |
Solid,double,groove |
Border-color |
边框颜色 |
颜色值 |
Width |
宽度 |
长度值,百分比值 |
Float |
对齐 |
Left,right |
颜色参数(Color and Background Properties)
参数 |
含义 |
举例 |
Color |
前景色彩 |
颜色值(red, #FF0000) |
Background-image |
背景文件 |
文件地址 |
Background-color |
背景颜色 |
颜色值 |
background-attachment |
背景是否依附 |
scroll(随内容滚动)和fixed(固定位置) |
background-repeat |
背景重复格式 |
repeat-x(水平重复) ,repeat-y(纵向重复),no-repeat(不重复) |
说起来这些属性在上次介绍文字排版的时候也用过了,不过您这次再看看它在表格里的表现,它们在这里扮演的角色非常重要,笔者决非是简单的老调重弹。需要说明的是所有的边框属性都是分位置的,也就是说,可以对外观的上、下、左、右四个方向分别作设定,也就是说,对于每一项边框属性,都有border-left-width,border-right-width,border-top-width,border-bottom-width这样的四个分属性,也可以在某个属性后面连带四个值,分别表示对top、right、bottom、left的定义。这一点很有用,我们就可以运用它,做出类似光影的效果。而另外一个属性,所谓风格(style)就很难定义了。有些说法,比如说solid(实心),double(双层)很好理解。但是有些效果恐怕要您用过以后才能明白是怎么回事。这里笔者把它们全部列举如下:
dotted、dashed、solid、double、groove、ridge、inset、outset。
下面有一个专门的关于表格的例子,大家看看,效果如图一
源码如下:
< html>< head>< title>Untitled Document< /title>< meta http-equiv="Content-Type" content="text/html; charset=gb2312">< style type="text/css">< !--table { font-family: "宋体"; font-size: 9pt; color: #000033; text-decoration: none; background-color: #FFCCCC; padding-top: 4px; padding-right: 3px; padding-bottom: 2px; padding-left: 2px; border: #CCCCFF; border-style: groove; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick}-->< /style>< /head>< body bgcolor="#FFFFFF">< table width="75%" border="1" cellspacing="1" cellpadding="1" align="center"> < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center"> < td>一< /td> < td>二< /td> < td>三< /td> < td>四< /td> < /tr> < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center"> < td>a< /td> < td>b< /td> < td>c< /td> < td>d< /td> < /tr> < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center"> < td>甲< /td> < td>乙< /td> < td>丙< /td> < td>丁< /td> < /tr> < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center"> < td>A< /td> < td>B< /td> < td>C< /td> < td>D< /td> < /tr>< /table>< /body>< /html>
至于表单,由于网页的交互性越来越被人们重视,表单的运用也越来越多。可是HTML本身所制定的那些标准形式的表单件的样子实在让人不敢恭维。文本框一律是内部深陷的长条,而按钮又全是那种灰灰的块块,放在一个精致的网站中实在不成样子。所以可以说适当的调整边框大小、颜色,做出符合网站个性的表单也是网站成功的一环吧。
大家要看效果的话可以借鉴一下fanso的打开音乐(https://www.365jz.com)的例子。(也可以 看图二)大家注意看它右边的一排输入框,其实它是将输入框做到最小了,但是味道却反而足了。
用到的定义语句其实很简单:
.input1 { BACKGROUND-COLOR: #e8e8e8; BORDER-BOTTOM: #a8a8a8 1px solid; BORDER-LEFT: #a8a8a8 1px solid; BORDER-RIGHT: #a8a8a8 1px solid; BORDER-TOP: #a8a8a8 1px solid; FONT-SIZE: 9pt}
大家应该可以看到,表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配,这个是其外观效果的关键。
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛