| 域名空间 下载中心 社区论坛 信息公告 my小屋 |
![]() |
联系我们 设为首页 加入收藏 |
|
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务 |
| 新版上线![旧版] | |||||
注:打开慢时请稍等
css 循序渐进(三)样式“表”秀http://www.iyit.net 日期:2006-5-27 9:18:37 来源:转载 点击: |
不知道大家看完前面两篇以后是否对用style已经有了一点心得,其实前文所说的不过是样式表最基本的运用。笔者这里想问一问,读者们有没有感觉到html中所规定的那些标准形式的表格(table)和表单(form)样子过于呆板,而风格又时常与自己网页格格不入呢?而且,对于一个大信息量和交互式的网页而言,表格和表单是需要大量运用并且占有很重要的位置的。现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话,您是否会兴奋得跳起来呢?其实,如果恰当的运用style,甚至可以做出比作图更好的效果来。 先给大家说说关于定制表格的一些细节。在第一章里的那个例子里,大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂,主要的也就是对背景(background)和边框(border)进行定义。用的也不过是这两方面的属性。 块参数(block-level formatting properties)
颜色参数(color and background properties)
说起来这些属性在上次介绍文字排版的时候也用过了,不过您这次再看看它在表格里的表现,它们在这里扮演的角色非常重要,笔者决非是简单的老调重弹。需要说明的是所有的边框属性都是分位置的,也就是说,可以对外观的上、下、左、右四个方向分别作设定,也就是说,对于每一项边框属性,都有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}大家应该可以看到,表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配,这个是其外观效果的关键。 编辑:黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇:css 循序渐进(四)表里春秋(上) 下一篇:css 循序渐进(二)字的艺术 转载请注明来源:www.iyit.net 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
| 设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |
| |||||||