| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2415 人关注过本帖
标题:『 网站前台同一样式设计 』需要大家一起来完成!
取消只看楼主 加入收藏
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
结帖率:100%
收藏
 问题点数:0 回复次数:5 
『 网站前台同一样式设计 』需要大家一起来完成!
大家先看一下附件中的这两张图片有什么不同!
图片的区别很明显!想信大家也看明白了!
这就是一般的网页元素组件,在不同的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)
图片附件: 游客没有浏览图片的权限,请 登录注册
搜索更多相关主题的帖子: 前台 样式 设计 
2008-12-09 14:38
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
收藏
得分:0 
忘记了按钮样样式图片:

btn-sprite.gif (1.31 KB)
图片附件: 游客没有浏览图片的权限,请 登录注册
2008-12-09 15:00
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
收藏
得分:0 
各位手中没有吗??唉!失望!!!
2008-12-11 09:36
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
收藏
得分:0 
这个行吗?我回去试一下。
主要是其它元素控件的样式,谁有啊! 发出来共享一下啊!!
2008-12-11 13:02
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
收藏
得分:0 
bygg  你写的这个怎么用啊!能举个例子吗??
 还有啊,你把你用到的图片也传上来啊
2008-12-11 17:13
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
收藏
得分:0 
bygg  我用哪你说的方法怎么在经典样式中出现了以下问题!请看附件!


我个人感觉经典样式下的组件不好看,尤其文本框及文本区域怎么像一个窟窿!
也许有些人好看这些窟窿,也说不定!你说是吧 知道不知道 !

经典样式.jpg (8.28 KB)
图片附件: 游客没有浏览图片的权限,请 登录注册
2008-12-12 08:56
快速回复:『 网站前台同一样式设计 』需要大家一起来完成!
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.019626 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved