|
#2
j2ee1262008-12-09 15:00
|
大家先看一下附件中的这两张图片有什么不同!
图片的区别很明显！想信大家也看明白了！
这就是一般的网页元素组件，在不同的windows 外观样式下显示的方式会不同。
而从这两图片中可以看出windows经典样式下的元素组件不是很好看！
所以，我想给这些组件上加入CSS样式，让它们无论在什么样的windows外观下都显示一样的样式。
所以，现在呢！我想让大家把自己手里的、好看CSS样式拿出来，大家分享一下。
现在呢，我给大家分享下我找到的两个。
//统一格式文本框
.text{padding:1px 3px;background:#fff repeat-x 0 0;border:1px solid #B5B8C8;height:18px;}
例如:<input name="" type="text" class="text" /> //这个文本框在什么的外观下，都显示windows XP外观样式.
//统一格式按钮
<style>
.x-btn-button{border:0 none;background:transparent;font:normal 11px tahoma,verdana,helvetica;padding-left:3px;padding-right:3px;cursor:pointer;margin:0;overflow:visible;width:auto;-moz-outline:0 none;outline:0 none;}
.x-btn-left{width:3px;height:21px;background:url(btn-sprite.gif) no-repeat 0 0;}
.x-btn-right{width:3px;height:21px;background:url(btn-sprite.gif) no-repeat 0 -21px;}
.x-btn-left i{display:block;width:3px;overflow:hidden;font-size:1px;line-height:1px;}
.x-btn-center{background:url(btn-sprite.gif) repeat-x 0 -42px;vertical-align:middle;text-align:center;padding:0 5px;cursor:pointer;white-space:nowrap;}
.x-btn-over .x-btn-left{background-position:0 -63px;}
.x-btn-over .x-btn-right{background-position:0 -84px;}
.x-btn-over .x-btn-center{background-position:0 -105px;}
</style>
<body>
//这个按钮在什么的外观下，都显示windows XP外观样式.
<table border="0" cellpadding="0" cellspacing="0" onmouseover="this.className='x-btn-over'"onmouseout="this.className=''"><tbody><tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on" ><button class="x-btn-button" type="button" >确定</button></em></td><td class="x-btn-right"><i> </i></td></tr></tbody></table>
</body>
程序代码：
!