深山老林

2007-05-15[原]CSS书写顺序

整理了一下自己写CSS时的顺序，跟大家分享下。

下表顺序为从上到下，从左到右：
============================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
============================

2007-05-10[原]对图像替换的一点想法

近来发现对图像替换的方法越来越多人在意了，主要是因为“display:none”对SEO与屏幕阅读器不友好，而且还提出了解决方法，其中比较好的还是利用负值隐藏文字的方式（个人觉得）。然后一味的使用这种方法，真的就正确吗？

其实什么情况下会用到图像替换呢？

1. logo，做为一个站点的视觉标志，真的应该做成背景吗？
2. 图像按钮（虽然不太建议使用链接去做按钮，但有时看是按钮的东东也只是起来链接的作用），有支持SEO的必要吗？

使用样式背景是为了什么呢？把表现的图片从内容中分离出来，使内容结构合理、完整。即然是装饰性的图片，还需要支持SEO吗？当然，如果你是做垃圾站的话，不在此列。

2007-04-26[原]一行内文本溢出的处理

看到这个标题很容易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像写了这么多次，还是会不太记得。嘿嘿~~

一般的文字截断(适用于内联与块)：
==============CSS================ 
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
=================================

对于表格的话，定义有一点不一样：
==============CSS================ 
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
} 
=================================

注：这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。

2007-04-16[原]交互浅解

“好久没有更新blog了”发现每次一写日志，都少不了这一句。交互设计现在也成了一个热门词，到哪都总能听到交互这交互那的，当然工作上也少不了接触到交互。每每跟臭鱼聊到交互，总会提到“以目标为导向”的交互设计——以用户的目标为设计的主导，任务越少越好。貌似是怎么说的。

有个例子：“比如有一个人想从A地到B地去，古时候是要几个任务要做：

1. 带上枪
2. 拿上足够的钱
3. 租一辆马车

而现在如果也是要从A地到B地去，所要做的任务就不一样了：

1. 不能带枪
2. 拿少量现金
3. 定机票

虽然是完全不同的任务，但目标是一样的：从A地到B地。如果有个人帮你把这些任务提前给你安排了，那会不会更爽呢？当然！交互所要做的就是帮你把这些任务给你安排好，让你更快的到达目地地。”

听起来好像没错，但仔细想想，你会发现任务还是要做，交互所要做的不是帮用户把任务做了，而是让用户更顺利的完成必须要完成的任务。

学交互的同学应该都知道“别让我思考——Krug可用性第一定律”、“……设计者应该尽量做到，当我看一个页面时，它应该是不言而喻，一目了然，自我解释的。我应该能明白它――它是什么意思，怎样用它――而不需要进行额外的思考。……”当然不可能完全做到这种页面，过多的提示只会让用户有被当成“白痴”的感觉。所以整站统一的设计，能让用户更容易形成心理模型，更容易的自我帮助。

“自我解释” 在对于提高页面友好度是很有帮助的，特别是当用户需要完成一些操作的时候，如链接、按钮等操作。一个不知道结果的操作，对于用户来说，都有一定的“恐惧感”，点了之后会出现什么呢？最简单的一个例子，关于链接的：大家都知道链接可以打开新窗口，也可以在当前窗口跳转。当一个链接没有说明是否在新窗口打开时，用户对于要不要点这个链接，总会犹豫，因为不知会不会将当前页面的内容覆盖。观查下身边使用电脑的朋友打开网页的习惯（特别是找资料的时候），你会发现一个很奇怪的现象：有大部分的人会在链接上点右键，然后选“在新窗口打开...”，也有人会按着Ctrl键直接点链接（在新窗口打开链接），为什么呢？因为不用去担心会不会把当前窗口覆盖（-_-||我就喜欢在新窗口打开，不行啊？……）。

OK，其实只是想说明一点：让用户知道自己在哪、将会去到哪。

2007-03-29[原]对非IE浏览器使用条件注释

IE条件注释很多人都知道了，今天才知道，原来它也可以对非IE的浏览器起作用。嘿嘿，想知道吧。

 我们所认识的IE条件注释是这样的：

==============HTML===============
<!--[if IE]> IE的内容<![endif]-->
================================= 

看这个了解一下：IE条件注释参考

如果是非IE的浏览器，会把这一段也当成一个注释，当然也就不会起作用了。所以要这样写：

==============HTML===============
<!–[if IE]><![if !IE]><![endif]–> 非IE可见 <!–[if IE]><![endif]><![endif]–>
================================= 

这样非IE的浏览器就可以读到里面的内容，而IE则因为里面的条件为真而不显示内容。

例子在这：猜猜你用的浏览器是？