分享
 
 
 

CSS 循序渐进(三)样式“表”秀

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

不知道大家看完前面两篇以后是否对用style已经有了一点心得,其实前文所说的不过是样式表最基本的运用。笔者这里想问一问,读者们有没有感觉到html中所规定的那些标准形式的表格(table)和表单(form)样子过于呆板,而风格又时常与自己网页格格不入呢?而且,对于一个大信息量和交互式的网页而言,表格和表单是需要大量运用并且占有很重要的位置的。现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话,您是否会兴奋得跳起来呢?其实,如果恰当的运用style,甚至可以做出比作图更好的效果来。

先给大家说说关于定制表格的一些细节。在第一章里的那个例子里,大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂,主要的也就是对背景(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的打开音乐(http://music.fanso.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

}

大家应该可以看到,表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配,这个是其外观效果的关键。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有