标题:『 网站前台同一样式设计 』需要大家一起来完成!
只看楼主
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
结帖率:100%
 问题点数: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)
搜索更多相关主题的帖子: 前台 样式 设计 
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
bygg
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:乖乖的心中
等 级:版主
威 望:241
帖 子:13555
专家分:3076
注 册:2006-10-23
得分:0 
你何不直接做张按钮的背景图标???

飘过~~
2008-12-11 10:05
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
得分:0 
这个行吗?我回去试一下。
主要是其它元素控件的样式,谁有啊! 发出来共享一下啊!!
2008-12-11 13:02
bygg
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:乖乖的心中
等 级:版主
威 望:241
帖 子:13555
专家分:3076
注 册:2006-10-23
得分: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;
}

飘过~~
2008-12-11 13:14
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
得分:0 
bygg  你写的这个怎么用啊!能举个例子吗??
 还有啊,你把你用到的图片也传上来啊
2008-12-11 17:13
bygg
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:乖乖的心中
等 级:版主
威 望:241
帖 子:13555
专家分:3076
注 册:2006-10-23
得分: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)

飘过~~
2008-12-11 17:30
知道不知道
Rank: 1
等 级:新手上路
威 望:2
帖 子:183
专家分:0
注 册:2008-10-4
得分:0 
我还是喜欢经典样式,朴素
2008-12-11 18:45
j2ee126
Rank: 1
等 级:新手上路
帖 子:124
专家分:0
注 册:2007-12-22
得分:0 
bygg  我用哪你说的方法怎么在经典样式中出现了以下问题!请看附件!


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

经典样式.jpg (8.28 KB)
2008-12-12 08:56



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-248430-1-1.html




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

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