通行证: 用户 密码 域名空间  下载中心 社区论坛 信息公告 my小屋
联系我们
设为首页
加入收藏

 

qq,asp,php,jsp,xml,sql,.net,编程 程序 网页图象 建站经验 私服
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿
论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图
专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版
社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务
当前位置:首页>>网页设计>>html/css>>正文 新版上线![旧版]
注:打开慢时请稍等

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

http://www.iyit.net  日期:2006-5-27 9:18:37  来源:转载   点击:
参加讨论】css 循序渐进(三)样式“表”秀:
三、样式“表”秀——介绍样式表中表格与表单的定制

  不知道大家看完前面两篇以后是否对用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}

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



编辑:黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇:css 循序渐进(四)表里春秋(上)
下一篇:css 循序渐进(二)字的艺术
转载请注明来源:www.iyit.net
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

 相关文章
最新更新 热点排行 推荐新闻
在 css 中关于字体处理效果的思考
html 初学者指南
showmodelessdialog()使用详解
仿 office 2003 的工具条
跟我学xsl(一)
在 css 中关于字体处理效果的思考
html 初学者指南
showmodelessdialog()使用详解
仿 office 2003 的工具条
跟我学xsl(一)
跟我学xsl(二)
利用css改善网站可访问性
用js封装的时间设置器
ubb 转换函数演示
用 onerror 获取错误信
一个优秀的超链接鼠标悬停提示css+js
使用dom创建xml
*.htc 文件的简单介绍
html 初学者指南
读取符合rss2.0规范的xml文档
优秀公益广告作品欣赏(8)
java数据类型转换
windows xp专业版iis连接数的更改
新开放qq免费挂级网站
优秀公益广告作品欣赏(7)
免费在qq上看在线电影电视听音乐
office2007简体中文版浮出水面 美图抢
qq珊瑚虫外挂4.0版本发布!
web服务器配置全攻略(三)
免费把qq炫铃设为本机qq的系统提示音
msn8.0下载
如何在win20003中更好的玩游戏
qq收费头像免费使用的方法 
微软将在华推分期付款,充值卡pc 可低价
 amd处理器am2测试 风扇竟运行7分钟
exeplorer.exe错误的问题的总结、解决
asp.net 2.0 中的异步页功能应用
硬盘坏道修复及数据恢复宝典
免费登录搜索引擎入口大全
搜索引擎注册九大秘法
 友情链接
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
copyrights © 2004-2006 iyit.net all rights reserved.
网站合作、广告联系qq:147007642、466949678
易特网络技术 点击这里给我发消息