CSS探讨

使用JS操作HTML，创建N个层

tianshi0253 — Wed, 09 Jul 2008 18:00:23 +0800

作者: tianshi0253 链接：http://css.group.javaeye.com/group/blog/213191 发表时间: 2008年07月09日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！







testing




	创建新的层

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

成功的用户体验必须遵循的各个步骤

tiger.passion — Wed, 11 Jun 2008 14:48:11 +0800

作者: tiger.passion 链接：http://css.group.javaeye.com/group/blog/202149 发表时间: 2008年06月11日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

目前很多网站都留不住很大一部分原因就是用户体验的设计，所以这一点是我们在网站开发中必定要考虑到的。
让使用者接受易用导航模式，让他们能方便在网站巡游，最短时间接触到最重要的信息，这是我们每一个做web开发人员的目标。其中当然要充分考虑人机对话方式的设计。

功能规格的完整性，如：登录、注册、用户个人信息管理；

合理的交互设计，如：操作提示，热点提示，乃至异常错误提示。

但以上这些只是从表层来考虑用户体验，然而真正成功的用户体验不仅是如此，它必须是要从用户需求和网站目标出发的。
成功的用户体验必须是遵循右图中的各个步骤来考虑的。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

建立用户体验（User Experience，UX）过程的实用指南

tiger.passion — Wed, 11 Jun 2008 14:44:17 +0800

作者: tiger.passion 链接：http://css.group.javaeye.com/group/blog/202145 发表时间: 2008年06月11日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

由De Dream', Windy(http://www.DeDream.com)，2007年7月

摘译自Box&Arrows团队和Amy Hillman的Pioneering a User Experience (UX) Process

名词：用户体验，User Experience/UX

也许你刚刚来到一家公司，他们希望进行一些“可用性”工作。你可能是一名UI设计师，业务分析师，或前端开发人员，一名产品经理，或者负责用户体验部门的经理或副总。你知道，如果更好地了解使用产品/软件/网站的人，就可能开发出更好的产品/软件/网站。不管怎么样，不管你是谁，也不管你在哪里，用户体验这件事，现在就归你管了。

那么，你也许会希望建立一个关于用户体验（UX）的过程，当然，这样一个过程可能是物有所值的，也可能会带来灾难，但是，其中隐藏着很多机会，能改进产品开发的过程，当然，也包括产品本身。

要建立这样一个过程，该从哪里开始呢？可以采用哪些方法？需要避免哪些问题？如何能保持自己的动力，保持热情，保持专业而不气馁？

为什么要建立用户体验过程？

• 用户体验过程有助于开发出人们期望得到并可以满足他们需要的产品
• 用户体验过程可以节约时间和金钱

记住，这两点都强烈地关联到了公司里很多人都重视的：金钱。不管是通过销售所得的收入还是通过节约带来的开支减少，从财务影响着手来解释用户体验活动的价值是切实可行的。

从小处着手

从小处着手可以防止你不小心贪多嚼不烂，也可以帮助你脚踏实地地开始建立这样一个过程。循序渐进比一开始就对过程中所有方面进行根本变革更有效。

记得把UX活动和产出物记录下来，并跟踪它们的进展，将来在解释你的UX过程时，它们自有用武之地。

找到业务驱动因素，并对它们进行跟踪

简单而言，让数字说话。找出公司的目标，并让用户体验过程的目标和它保持一致。例如，如果公司的主要目标是通过减少技术支持电话的数量来节约开支，那么让你其中一个主要的UX目标是改善可用性，提高产品的自服务率，并对过程前后技术支持电话数量进行记录分析。

提前计划UX活动

从一个小一些的项目着手的另一个好处是你更可能在项目计划上施加一些影响。在早期阶段参与项目计划让你有机会为项目团队把UX纳入开发进行准备。

要深入，不要铺开

避免把你自己分布到太多的项目里去。如果你是公司里唯一一个进行UI设计和可用性研究的人，项目经理们可能会希望你帮他们辅助每一个项目。你需要不惜一切代价避免这么做。因为你服务的项目越多，你的服务质量就越有可能打折。而且你很快就会精疲力竭，没法进行实质性的改变。资源有限而需求很大的时候怎么办呢？一个折衷的办法是，发展你的UX团队，而在开始的时候尽力不要铺得太开。

要现实，也要灵活

对公司在UX方面的支持做一个现实评估，然后相应调整你的期望。如果公司里大部分人都还不知道UCD和可用性测试的概念，你可能不应该开展长达数月的人种学研究或花费一大笔钱去进行实地可用性测试。

灵活一些，在陈述你的观点和建议的同时，也要让大家看到你会照顾到各个方面并在需要的时候进行折衷。

记住：有很多摘得到的果子，别太担心怎么才能摘到它们，只要保证把它们摘下来就行了。

注意刺儿头，但不用避开他们

没有人希望听到用他们的方法将会得到不好的产品，或者会让公司损失金钱，没有人会希望听你说，你是对的，他们是错的。

关键是给他们看，而不是说；是说服，而不是陈述，使用屏幕/视频捕捉工具，例如Morae；说服开发人员通过概念设计和原型开发你会让他们的工作更容易，花费的时间更少。让产品经理们看到你可以帮他们更好地定义业务需求。

有耐心，设立清楚的期望值

在建立一个新的用户体验过程时，保持耐心最不容易。好的UX过程不会一蹴而就。

有创意

因为你的资源几乎总是很有限，必须有创意，让你的团队看到，UX的活动并不需要很昂贵或需要很多时间：
• 公司内部的代表用户可以当做用户资源
• 在预算不充分的情况下，进行远程访谈和举行可用性活动
• 人员不够？向你的开发人员传授一些UI设计的最佳实践
• 没有预算购买昂贵的软化和研究工具？笔和纸可以发挥你意想不到的用处
• 用电子邮件发送UX讲座节选，大范围传播UX消息
• 制作海报，展示常见的UX错误和经典的解决方案

记录你的成果，毫不犹豫地发布它们

要在你的公司推广UX，也许这是最重要的。你做了那么多，现在该是把一切放在一起的时候了。只要取得了成果，不管多小，都要毫不犹豫地在公司发布它们，还有，别忘了感谢整个团队，当然，准备好，又有更多的工作将落到你的肩上。

完整原文参见：Pioneering a User Experience (UX) Process
by B&A Staff and Amy Hillman on 2007/06/19

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

关于背景图片的定位(background-position)

ice-cream — Sun, 08 Jun 2008 16:37:03 +0800

作者: ice-cream 链接：http://css.group.javaeye.com/group/blog/201365 发表时间: 2008年06月08日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

最近仔细研究了一下关于css 背景图片的定位问题，也许有的朋友会认为这是个简单的问题，以至于在网上很难搜到关于background-position的详细解释，能搜到的帖子基本上都是千篇一律的把概念复制一下贴出来的。
不过在这里我还是先要把概念再罗嗦一遍(不想看的朋友可以直接跳过这个部分)

语法：
    background-position : length || length
    background-position : position || position

取值：
    length : 百分数 | 由浮点数字和单位标识符组成的长度值。
    position : top | center | bottom | left | center | right

说明：
    设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。
    默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
    如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
    如果设置值为 right center，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。

background-position -- 定义背景图片的位置

取值:
[  |  | left | center | right ] [  |  | top | center | bottom ] ] 
 * 水平
 left: 左
 center: 中
 right: 右
 * 垂直
 top: 上
 center: 中
 bottom: 下
* 垂直与水平的组合
 x-% y-%
 x-pos y-pos

 初始值: 0% 0%
 继承性: 否
 适用于: 所有元素
 background:背景.position:位置.

以下就是我要重点讲解的地方：




background-position定位问题

background-position:left top;(见图1).

背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。

等同于 background-position:0,0;

也等同于background-position:0%,0%;

background-position:right bottom;(见图2)。

背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。

等同于background-positon:100%,100%;

也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

background-position:500px 15px；(见图3)。

背景图片从容器(container)左上角的地方向右移500px,向下移15px，超出的部分隐藏。

background-position:-500px -15px;(见图4)。

背景图片从容器(container)左上角的地方向左移500px，向上移15px，超出的部分隐藏。

background-position:50% 50%;(见图5)。

等同于left：{容器(container)的宽度—背景图片的宽度}*left百分比，超出的部分隐藏。

等同于right：{容器(container)的高度—背景图片的高度}*right百分比，超出的部分隐藏。

例如：background-position:50% 50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background-position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px，向下移235px；

6.（这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显）

background-position:-50% -50%;(见图6)。

等同于left：-{{容器(container)的宽度—背景图片的宽度}*left百分比（百分比都取正值）}，超出的部分隐藏。

等同于right：-{{容器(container)的高度—背景图片的高度}*right百分比（百分比都取正值）}，超出的部分隐藏。

例如：background-position:-50% -50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即background- position:-250px,-70px;也就是背景图片从容器(container)的左上角向左移250px，向上移70px；

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

CSS 表头固定

littlebode — Sun, 01 Jun 2008 21:05:21 +0800

作者: littlebode 链接：http://css.group.javaeye.com/group/blog/199212 发表时间: 2008年06月01日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

做页面表格展现的时候，经常会遇到一种情况 -- 将第一行和第一列的固定，便于数据阅读（统计数据表通常要求不分页），自己做的过程中遇到一些小麻烦，网络上看都有人用JS实现表头固定，但是此时表头却是透明的，下拉下去的时候看着太不舒服，偶然间看到一篇单纯用CSS实现而且巨容易，简略的说就是用到expression，position: relative，而且容易扩展，也有的代码无需结构改动，只要在固定的行、列加入class = ""即可，而且固定的行和列可以任意选择，不止一行或者一列，发出来大家一起分享。

（今天登录，看到系统消息：发帖被评为新手帖，扣10分。有点不太明白，不能随便发帖啊呵呵。不过新手的确是，2007年毕业到现在从事软件开发满打满算一年，正在学习中.....现在处在代码工人向编程思想转变的过程中...嘻嘻）

TopLeftHeadStatic.css

.FixedTitleRow
{
    position: relative;
    top: expression(this.offsetParent.scrollTop);
    z-index: 10;
    background-color: #E6ECF0;
}

.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}

.FixedDataColumn
{
    position: relative;
    left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
    background-color: #E6ECF0;
}

TopLeftHeadStatic.htm

商业运行动态
商业企业	到货量	分拣打码量	零售户退货量	商商调剂量	库存量
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34
北京市烟草公司	100.34	100.34	100.34	100.34	100.34

将CSS、htm内容保存，存放到同一目录就可以看到预览效果了。有个小问题，当我表格内容是通过innerHTML写到iframe中时，左侧第一列列我只能控制初始时确定的那些行，根据数据库自动填上的我拉动横向scroll时，不是固定的，正在研究解决中。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

CSS表常用小技巧

bufanliu — Wed, 23 Apr 2008 14:18:35 +0800

作者: bufanliu 链接：http://css.group.javaeye.com/group/blog/185888 发表时间: 2008年04月23日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

CSS样式表常用小技巧

· ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 有值。

· 同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。 [zy]

· 初学可能会碰到这样一个情况，同样一个标签的属性在 IE 设置成 A 显示是正常的，而在 Mozilla 里必须要设成 B 才能正常显示，或者两个倒过来。
临时解决方法：选择符 {属性名:B !important ; 属性名:A;} //IE7 下无效

· 如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的 margin 属性吧，而不要去定义位于外面的标签的 padding

· li 标签前面的图标推荐使用 background-image 而不是 list-style-image

· IE 分不清继承关系和父子关系的差别，全部都是继承关系。

· 在给你的标签疯狂加选择符的时候，别忘了在 CSS 里给选择符加上注释。等你以后修改你的 CSS 的时候就知道为什么要这么做了。

· 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

· 定义链接的四种状态要注意先后顺序： Link Visited Hover Active

· 与内容无关的图片请使用 background

· 定义颜色可以缩写 #8899FF = #89F

· table 在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

·