CSS布局教程

基于web标准的网站设计指南

« 圆角输入框设计XHTML校验器 »

改变按钮样式

    按钮是表单必不可少的元素,对于表单按钮而言,同样通过与文本框相同的边框,背景色及图片等方式进行外观样式的变更,在这里我们继续尝试使用边框设置及背景设置创按钮风格。天津网站建设公司天津网站制作公司天津网络公司天津网站优化 
    RSS订阅按钮,熟悉RSS的应该都熟悉这个有XML字样的桔色小图标,通常我们都使用一个GIF来放置RSS订阅按钮,不过在这次我们将结合前面的内容尝试使用button元素模仿RSS订阅图标,在制作这样一个图标之前,先准备一个名为xml.jpg的图片,图片上放置xml的英文文字。
同样,我们使用了带有XML文字的JPG图片作为了背景放置1在按钮的左部,将按钮边框设置为单线模式,改变了原有的3D凸外观,然后通过行高line-height及text-indent设置完成了文字的定位,最终达到了设计目标。
    对比一下Rss订阅的经典造型,是不是觉得已经很接近了呢?这里是直接通过按钮实现的。使用按钮实现RSS订阅图标并不意味着使用按钮替代所有的GIF图片是明智的,在这里只不过借按钮样式的探讨继续了解CSS样式设计的丰富性。按能够变为订阅图标,同样能为表单提供更为丰富的样式定义,如何更美观那就取决于按钮的视觉设计了。
    下拉列表是表单中较为复杂的元素,下拉列表也是UI设计中非常优秀的一种元素,小小的下拉框不占用空间,却能够帮助用户进行厂众多项目的选择,直观方便。结合上面有关输  标入框及文本域的边框及背景设计,下拉列表同样也能够被设计富于变化,不过列表框在CSS的控制上也有着自己的独特性,列表框的每一个元素,都在XHTML中表现为一个<option>对象,而这种单独对象的定义使得我们能够对下拉列表中的细节进行控制,特别是在于一个具有分类特征的下拉列表中。

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号