📄 fd80.htm
字号:
<html>
<head>
<title>CSS 循序渐进三、表格与表单的定制</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<p align="center"><script src="../../1.js"></script></a>
<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center>
<table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
<tbody>
</tr>
</tbody>
</table>
<table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0
cellspacing=0 width=680 align="center">
<tbody>
<tr>
<td bgcolor=#F9D23C height=14>
<div align=center class=H1><font color="#FFFFFF">CSS 循序渐进三、表格与表单的定制</font></div>
</td>
</tr>
<tr valign=top>
<td class=H1 height=36>
<p class=H1> </p>
<p align=center><font class=a><b><font face="宋体">三、样式“表”秀——介绍样式表中表格与表单的定制</font></b>
</font></p>
<p align=right> 作 者 : ML工作室 Louie </font></p>
<p> 不知道大家看完前面两篇以后是否对用style已经有了一点心得，其实前文所说的不过是样式表最基本的运用。笔者这里想问一问，读者们有没有感觉到html中所规定的那些标准形式的表格（table）和表单（form）样子过于呆板，而风格又时常与自己网页格格不入呢?而且，对于一个大信息量和交互式的网页而言，表格和表单是需要大量运用并且占有很重要的位置的。现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话，您是否会兴奋得跳起来呢?其实，如果恰当的运用style，甚至可以做出比作图更好的效果来。
</font></p>
<p> 先给大家说说关于定制表格的一些细节。在第一章里的那个例子里，大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂，主要的也就是对背景（background）和边框（border）进行定义。用的也不过是这两方面的属性。
</font></p>
<p> 块参数（Block-Level Formatting Properties）</font></p>
<table border=1 cellpadding=0 cellspacing=0 style="FONT-SIZE: 9pt">
<tbody>
<tr>
<td valign=top width=127>
<p align=center>参数</p>
</td>
<td valign=top width=108>
<p align=center>含义</p>
</td>
<td valign=top width=247>
<p align=center>举例</p>
</td>
</tr>
<tr>
<td valign=top width=127>Left-margin,right-margin<o:p></o:p></td>
<td valign=top width=108>留的空白</td>
<td valign=top width=247>长度值,百分比值</td>
</tr>
<tr>
<td valign=top width=127>Padding-top…</td>
<td valign=top width=108>内容边框间距</td>
<td valign=top width=247>长度值,百分比值</td>
</tr>
<tr>
<td valign=top width=127>Border-width</td>
<td valign=top width=108>边框宽度</td>
<td valign=top width=247>长度值</td>
</tr>
<tr>
<td valign=top width=127>Border-style</td>
<td valign=top width=108>边框风格</td>
<td valign=top width=247>Solid,double,groove</td>
</tr>
<tr>
<td valign=top width=127>Border-color</td>
<td valign=top width=108>边框颜色</td>
<td valign=top width=247>颜色值</td>
</tr>
<tr>
<td valign=top width=127>Width</td>
<td valign=top width=108>宽度</td>
<td valign=top width=247>长度值,百分比值</td>
</tr>
<tr>
<td valign=top width=127>Float</td>
<td valign=top width=108>对齐</td>
<td valign=top width=247>Left,right</td>
</tr>
</tbody>
</table>
<p><font face="宋体" class="a">颜色参数（Color and Background Properties）</font></p>
<table border=1 cellpadding=0 cellspacing=0 style="FONT-SIZE: 9pt">
<tbody>
<tr>
<td valign=top width=127>
<p align=center>参数</p>
</td>
<td valign=top width=108>
<p align=center>含义</p>
</td>
<td valign=top width=259>
<p align=center>举例</p>
</td>
</tr>
<tr>
<td valign=top width=127>Color</td>
<td valign=top width=108>前景色彩</td>
<td valign=top width=259>颜色值（red, #FF0000）</td>
</tr>
<tr>
<td valign=top width=127>Background-image</td>
<td valign=top width=108>背景文件</td>
<td valign=top width=259>文件地址</td>
</tr>
<tr>
<td valign=top width=127>Background-color</td>
<td valign=top width=108>背景颜色</td>
<td valign=top width=259>颜色值</td>
</tr>
<tr>
<td valign=top width=127>background-attachment</td>
<td valign=top width=108>背景是否依附</td>
<td valign=top width=259>scroll（随内容滚动）和fixed（固定位置）</td>
</tr>
<tr>
<td valign=top width=127>background-repeat</td>
<td valign=top width=108>背景重复格式</td>
<td valign=top width=259>repeat-x（水平重复）
<p>,repeat-y（纵向重复）,no-repeat（不重复）</p>
</td>
</tr>
</tbody>
</table>
<p> 说起来这些属性在上次介绍文字排版的时候也用过了，不过您这次再看看它在表格里的表现，它们在这里扮演的角色非常重要，笔者决非是简单的老调重弹。需要说明的是所有的边框属性都是分位置的，也就是说，可以对外观的上、下、左、右四个方向分别作设定，也就是说，对于每一项边框属性，都有border-left-width,border-right-width,border-top-width,border-bottom-width这样的四个分属性，也可以在某个属性后面连带四个值，分别表示对top、right、bottom、left的定义。这一点很有用，我们就可以运用它，做出类似光影的效果。而另外一个属性，所谓风格（style）就很难定义了。有些说法，比如说solid（实心），double（双层）很好理解。但是有些效果恐怕要您用过以后才能明白是怎么回事。这里笔者把它们全部列举如下:
</font></p>
<p> dotted、dashed、solid、double、groove、ridge、inset、outset。
</font></p>
<p> 下面有一个专门的关于表格的例子，大家看看，效果如图一 </font></p>
<p> <img height=152 src="../pic/style3_1.gif" width=360
tppabs="http://9/pic/style3_1.gif"> </font></p>
<p> 源码如下: </font></p>
<pre> < 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>
</font></pre>
<p> 至于表单，由于网页的交互性越来越被人们重视，表单的运用也越来越多。可是HTML本身所制定的那些标准形式的表单件的样子实在让人不敢恭维。文本框一律是内部深陷的长条，而按钮又全是那种灰灰的块块，放在一个精致的网站中实在不成样子。所以可以说适当的调整边框大小、颜色，做出符合网站个性的表单也是网站成功的一环吧。
</font></p>
<p> 大家要看效果的话可以借鉴一下fanso的打开音乐（http://music.fanso.com）的例子。（也可以<a
href="file:///D:/pcbyte/style3_2.gif"
tppabs="http://9/pic/style3_2.gif">看图二</a>）大家注意看它右边的一排输入框，其实它是将输入框做到最小了，但是味道却反而足了。
</font></p>
<p> 用到的定义语句其实很简单: </font></p>
<pre> .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
}
</font></pre>
<p> 大家应该可以看到，表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配，这个是其外观效果的关键。
</font></p>
<p class=H1> </span></p>
<p> <br>
<font
color=#ffa000> <b>
</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -