网站前台同一样式设计需要大家一起来完成！ - WEB前端(UI)

问题点数：0 回复次数：12

『网站前台同一样式设计』需要大家一起来完成！

大家先看一下附件中的这两张图片有什么不同!
图片的区别很明显！想信大家也看明白了！
这就是一般的网页元素组件，在不同的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>

XP 样式.jpg (43.19 KB)

图片附件: 游客没有浏览图片的权限，请登录或注册

经典样式.jpg (30.22 KB)

图片附件: 游客没有浏览图片的权限，请登录或注册

搜索更多相关主题的帖子: 前台　样式　设计　

第 2 楼

得分:0

忘记了按钮样样式图片：

btn-sprite.gif (1.31 KB)

图片附件: 游客没有浏览图片的权限，请登录或注册

第 3 楼

得分:0

各位手中没有吗？？唉！失望!!!

第 4 楼

得分:0

你何不直接做张按钮的背景图标???

飘过~~

第 5 楼

得分:0

这个行吗？我回去试一下。
主要是其它元素控件的样式，谁有啊! 发出来共享一下啊!!

第 6 楼

得分:0

程序代码：

.button 
{
     background-image: url(../images/btn_bg.gif); 
     HEIGHT: 20px; 
     text-align:center;     
     FONT:12px/180% arial;
     FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
     MARGIN:1px 1px 1px 1px;
}

飘过~~

第 7 楼

得分:0

bygg 你写的这个怎么用啊!能举个例子吗??
还有啊，你把你用到的图片也传上来啊

第 8 楼

得分:0

先在你需要引用该CSS的页面的<head>...</head>中引用
<link href="/myCss.css" rel="stylesheet" type="text/css" />
myCss.css里面就包含我上面发的那段代码

在你设置button样式时
<input type="button" class="button" id="btn1" value="返回" />

btn_bg.gif (96 Bytes)

图片附件: 游客没有浏览图片的权限，请登录或注册

飘过~~