by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=651

一、关于纯CSS实现气泡对话框

首先，来张大图：

上边这张黄黄的，大大的，圆圆的，有个小尾巴，文字内容有些YY的图片，就是使用纯CSS实现的气泡对话框效果，一点图片都没有哦。看到这里，你是 不是跟我一样，有些惊叹CSS的潜力呢。关于这张图片，暂时先放到一边，下面我要讲一些与主旨相关的比较重要的，同时又很实用的一些技术。

我们首先看下面这一张图片（截自人人网）：

可能颜色有点淡，在左上角有个90度的尖角，于是整个形成了一个气泡对话框。现在考考你，如果你来实现这个效果，你会怎么做？//zxx:假设你已经思考了一会儿｡◕‿◕｡ 我想，如果您没有看本文标题，可能就想到的是做个90度等腰三角形小图片；就算您知道可以用CSS实现上面的效果，但是您知道是什么方法吗？当然，是绝对 兼容的方法（从已经在美国办了隆重葬礼的IE6到很多人喜欢的Firefox和Safari）。您有主意吗？

好，我们先来看看人人网是怎么实现的，我们用小bug（//zxx:指firebug，我喜欢亲切的称之为“小 bug”）看一看，原来也是使用的图片，600*6像素的图片，见下图：

查看此图片点此链接：http://xnimg.cn/imgpro/box/box_arrow.png

这可是活生生的多了一次图片请求啊，而且是个独立的小图片，关键是在访问量惊人的首页上。优秀与平庸的差异在哪里呢？前者追求极致，后者追随大流。

这里的图片完全没有必要，使用CSS可以实现近乎一样的效果，并且方法不止一种，我目前知道的有两种方法可以实现上面人人网的气泡对话框效果。我将 这两个方法自己定义为“边框法”与“字符法”。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

本文作者为：张鑫旭 来源于：张鑫旭-鑫空间-鑫生活 欢迎访问原出处

二、“字符法”与“边框法”

1. 字符法
关于“字符法”，其实在我的“告别图片—使用字符 实现兼容性的圆角尖角效果beta版”一文中已经比较详尽的提及过。

这里再简单讲述下，世界上的语言多种多样，字符的种类也是千差万别，形状也是千奇百怪，所以，有些字符就可以当作图形来使用，以模拟一些web表现 效果。例如，上面的人人网对话框尖角就可以使用棱形字符(◆)来实现，看到这个形状上面的90度的尖角了吗，我们可以让其溢出div显示，不就有了尖角效 果了吗！定位可以使用margin负值或是absolute绝对定位。

在我的网站上就应用了这个方法，您可以在网站的“提问与交流”页面看到类似下图所示的内 容：

具体使用，您可以狠狠地点击这里：“字 符法”实现气泡对话框demo
里面显示了CSS与HTML代码。

2. 边框法
关于“边框法”，这说起来话就长了。不急，慢慢来。
我们首先来看下面一段样式代码：

.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}

当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：

仔细观察边框色的交界处，四个角落有4个45°的斜边，将整个边框分成了四个等腰梯形。

现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的 边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。

.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

结果如下图（截自Firefox3.5）：

可见显示结果正如我们预想的。现在，再次开动脑筋，试想下，如果上面样式中的宽度和高度都是0，也就是width:10px; height:10px;变成了width:0; height:0;。对了，那么显示的将不会是个等腰梯形 了，而是个等腰直角三角形。做个简单测试就知道答案了，如下的代码：

.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

结果如下（依旧截图自Firefox3.5）：

此时，我们惊奇的发现，使用border属性居然产生了一个等腰直角三角形，而这个等腰直角三角形用做气泡对话框的尖角再合适不过了。所以，上面的 人人网对话框的尖角就可以用border实现了，只要让下边框有颜色，其他透明（或与外背景同色）就好了。

关于“边框法”实现的效果，您可以狠狠地点击这里：“边 框法”实现气泡对话框demo，或参见下图。

还没完，我们现在再开动我们智慧的大脑，设想下，如果各个边框的宽度不一致，又会产生怎样的结果呢？我们把测试代码再修改一下，让其边框宽度不一 致，如下：

.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

得到的结果如下图：

可以发现，尖角被拉高了，也就是相邻边框宽度的比例会影响单个边框形状的高与低的比例，这不难理解。

现在，我们再开动一下我们的脑筋，如果我们让相邻两个边框显示颜色会怎么样呢？测试一下吧，如下代码：

.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}

结果如下图：

这不就不多说什么了，大伙儿都看到，上个相邻边框尖角实现的气泡对话框效果吧。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

本文作者为：张鑫旭 来源于：张鑫旭-鑫空间-鑫生活 欢迎访问原出处

三、“边框法”的高级应用

说是高级应用，准确讲应该是“复杂应用”。就是说用两个标签（或无标签 – 使用:before与:after伪类）形成的两个不同的边框进行组合显示实现的一些效果。

看下面两个图，本单元就是要实现下面两种效果：

1、效果(1)
CSS代码如下：

.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px;
    border-style:solid;
    border-color:#ffffff #beceeb #beceeb #ffffff;
    left:-40px;
    top:40px;
}
.test span.top{
    border-width:10px 20px;
    border-style:dashed solid solid dashed;
    border-color:transparent #ffffff #ffffff transparent;
    left:-40px;
    top:60px;
}

HTML代码如下：

<div>
    <span></span>
    <span></span>
    CSS “边框法”实现气泡对话框效果一
</div>

您可以狠狠地点击这里：效 果(1)demo

2、效果(2)
CSS代码如下：

.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color:#beceeb transparent transparent;
    left:80px;
    bottom:-40px;
}
.test span.top{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color:#ffffff transparent transparent;
    left:80px;
    bottom:-33px;
}

HTML代码如下：

<div>
    <span></span>
    <span></span>
    CSS “边框法”实现气泡对话框效果二
</div>

您可以狠狠地点击这里：效 果(2)demo

3、效果原理简述
原理的关键字就是“覆盖”，另外一个边框形成的尖角覆盖之前的一个，只要控制好覆盖的位置，然后就形成了实际上的不规则尖角或是尖角边框。您还可以发挥您 的创造力，实现更多其它的效果。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

本文作者为：张鑫旭 来源于：张鑫旭-鑫空间-鑫生活 欢迎访问原出处

四、关于“边框法”的一些说明

关于“边框法”，有一些知识必须要提一下。

1. IE6的奇偶bug
如果定位外框高度或是宽度为奇数，则IE6下，绝对定位元素的低定位和右定位会有1像素的误差。所以，尽量保证外框的高度或宽度为偶数值。

2. IE6的空div莫名高度bug
IE6下，空div会有莫名的高度，也就是说height:0;不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用font- size:0; + overflow:hidden;修复此问题。

3. IE6不支持实线边框透明transparent属性
IE6不支持实线边框透明transparent属性，当某边框设置为transparent属性，且有宽度的话，那么透明会以默认的黑色显示的。解决方 法有两个，一是将需要隐藏的颜色设置为背景色，这样与透明效果一样，此法有局限性，在复杂“边框法”应用下是行不通的；二是可以使用dashed代替 solid，可以实现IE6下边框transparent透明。为什么能够实现透明？您可以参考默尘的这篇文章Dotted&Dashed 终极分析及IE6透明边框，我说点题外话，其对原因的解释似乎说的通，但是，是不是如此，我是相当怀疑的，我尚未有时间验证，这个可以标记一下。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

本文作者为：张鑫旭 来源于：张鑫旭-鑫空间-鑫生活 欢迎访问原出处

五、利用CSS3实现气泡样式的对话框

之前我们所说的一切，是全兼容现在所有主流浏览器的。而这里的方法，只支持对CSS3支持良好的浏览器，例如Firefox3.5+，chrome 以及Safari。本文一开头的那张黄黄的大图就是使用的CSS3实现的圆形以及圆弧状的拐角尾巴。

效果的核心就是CSS3的圆角属性：border-radius， 例如开始的大尾巴图片，就是使用border-radius实现的三个圆组成的，大圆形成主体内容，两个小一点的圆相互遮盖，形成圆弧小尾巴，但这个不具 体讲，现在，以一个相对简单点的例子做示例。

CSS代码如下：

.test{
    width:300px;
    padding:80px 20px;
    margin-left:100px;
    background:#beceeb;
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
    position:relative;
}
.test span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;}
.test span.bot{
    width:30px;
    height:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    left:10px;
    bottom:-20px;
}
.test span.top{
    width:15px;
    height:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    left:0px;
    bottom:-40px;
}

HTML代码如下：

<div>
    <span></span>
    <span></span>
    CSS3 border-radius实现气泡对话框效果
</div>

最后的效果如下图：

您可以狠狠地点击这里：效 果(3)demo

六、结语

还是那句话，资历有限，错误难免，所以如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进 行提问交流。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=651

《页面表达常用方式》是整个“web交互设计方法”中的一部分：

设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次 要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。

一、页面的浏览顺序

对用户扫描页面的时候进行视线跟踪，这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。

从左至右，从上到下：长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线 从左至右、从上到下的，这样做会更快更有效。不要让文字排列成这样：

这样的排列也可以，仍是从左至右、从上到下：

按钮要放在右边：

左上角优先：下图中，亮度越高、越集中的地方，说明被关注的越多：

从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是次要信息的。

所以，在浏览顺序上靠前、靠上的位置，即先被看到的位置，是容易被关注和记忆的地方，即“左上角优先”。因为日常中人们往往没有充足的时间浏览网 页，或在很快地获取需要的资讯后即停止浏览或转连到其它网页，所以左上角常常成为视觉焦点。

对齐

在内容排版的设计中，把内容右对齐，会形成一种良好的双重边界，该边界沿着这一组对象的中间向下延伸（利用了格式塔原则——连续性原则），这样带来 的好处是加强了边界引导读者的眼光平滑向下延伸，有助于形成良好的视觉流。如下图：

在表单设计中，也是如此。能够使操作区域对齐，将大大提升用户的完成任务的效率。但是对齐是以左对齐还是右对齐也要引起注意。据研究表明，标签和输 入框之间的空白区域加重了用户的认知负担（cognitive loading），用户必须花相当多的时间以便在标签和输入框之间移动视线：

操作过程中，用户更关注输入框本身，而不是标签。用户眼睛关注点的转移速度是非常快的，并且即使不从头阅读标签也能明白它的意思。但人们习惯于从左 至右的书写，所以这种右对齐的布局给用户造成了细微的阅读障碍：

而以下这种摆放形式的好处就是，用户可以一眼就看到标签和它对应的输入框，而且不用担心用户阅读标签带来的额外负担：

二、大字更突出

文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求，给人以清晰的视觉印象。因此，设计中的文字 应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好、更有效的传达作者的意图，表达设计的主题和构想意念。

在页面文字的处理上，层次关系很重要。我们的眼睛常常被吸引到厚重而又对比强烈的图形上面，同时大的、加粗的字体表现了它的重要性和主题思想。字体 对比中，字体越大越粗，就表示该部分内容越重要。对标题来说，一般都使用一种突出的字体和其他内容区别开来——加粗、加宽、加大字号、强烈的颜色等（白纸 黑字，黑色字体与白色页面对比是最强烈，反之亦然）。其次是普通字体，这些字体是对主题进行进一步的说明。而指示和注释部分的小字重要性更次之，告诉了我 们：你也许想阅读这些内容，但是没有看到也没关系。同时要注意，所有图片中的文本都应该清晰易读。

三、图形更吸引人

界面需要一定的图形辅助，这将使产品更具吸引力。图形能够传达各种产品的个性，例如：安全可靠、令人激动、好玩、充满活力、舒适愉快、冷静、有力、 紧张等，这是情感诉求。Donald Norman（（唐•诺曼）认为，产品设计中一个非常重要的因素，那就是“愉悦”(Enjoyment)成分，让人 喜欢这个东西——让人觉得高兴、有趣。他说：“积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最 少。”“积极的情感能让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”一定层度上，不影响人们在界面上完成任务效率的前提下，适度 的装饰、漂亮的细节会影响人们使用产品的心情，引导人们再次逗留和探索多点时间，甚至推荐给别人。

图形需要减少认知负担。其实文字最早来源于图形，取材于自然形态，所以相比之下，简化的、顺畅的、示意性准确的图形能够减少认知负担，让用户不需要 一个个文字阅读，所以比文字更便于用户识别、理解和记忆。但图形设计一定要遵循简洁规则：你想要你的用户注意到你站点上所提供的产品、服务和信息，而不是 你站点的精美设计。过多的装饰将干扰用户操作。

四、动画会被误以为是广告

页面中动态的FLASH非常吸引人们的注意力了。Adobe公司的这项动画技术让互联网变得更为强大，从Nike公司非常夸张的首页动画到众多广告 商使用的网页Banner。但是这项动画技术现在已被滥用，使得用户默认看到动画就误以为是个广告，一个只对页面内容感兴趣的人、或者常常浏览网页的人， 可能会简单快速地跳过动画部分。所以在页面设计中，应该尽量少地使用FIash动画，过多的动画不仅没有实用性而且还会拖慢用户的网页浏览器。尤其是一个 充满广告的页面，那样会使你的目标客户无法阅读弃你而去。

五、内容逻辑：并列关系、从属关系

人们往往喜欢有条理的视觉信息，逻辑清晰、层次分明、严谨的内容才能有助于便捷快速地阅读。这里主要介绍“并列关系”和“从属关系”。

并列关系：并列关系就是把同等重要的信息依次罗列，彼此没有层级关系。逻辑上相关的部分在视觉表达上也相关。例如，把相近的内容分成一组，放在同一 个标题至下，采用类似的方式显示信息，并把它们全部放在一个定义明确的区域以内。

在表现的形式上，常常用到的方法有：内容缩进、位置或留白、线框或分组（线条、方框、颜色条）。

内容缩进：

位置或留白：

线框或分组：（线条、方框、颜色条等等）：

从属关系：从属关系表示A信息全部包含在B信息之内，或者表示A信息依附于B信息。就好比如标题和正文的关系，所以A信息是B信息的一个子集。如下 图中，“空间热点”就包含“日志精选”，她们之间就是从属关系。而“日志精选”里又包含6条文章名称，它们之间也是一种从属关系，这就是我们所说的正文和 标题的关系。

在这里，B信息里面也可以是好几条并列关系的内容组构成。如：

六、多项并列的信息

多项并列的信息，由于视觉的连续性，混在一起容易产生混淆。我们可以用一些小技巧将其区分。比如，在并列的信息内容前面加上小图标，或者区分排序：

七、不同的排序方式VS筛选

这里需要先说明两个名词的含义。“排序方式”——指的是将文件中的各个信息按数值（如参与人数、点击数等）、或者某种特性（如热度）的递升或递降次 序重新排列成为一个新的记录序列。而“筛选”是指一个以多个信息中按预定目标就某种特定性质进行精选的操作过程。它们都有“进一步”的关系，但是排序不会 有数量的变化；而“筛选”因为是进一步针对特定条件精确挑选所剩，有可能导致数量的减少。如：

排序：

筛选：

先谈一下面包屑的由来：

很久很久以前，在大森林的边上住着一个贫穷的樵夫，他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩 子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。

在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停 下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等月亮一出来，我们就看得 见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当月亮升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞 来飞去的鸟儿一点点地啄食了。

这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始，汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上，然后迅速地撒遍了全世界，变 成了今天大家所熟知的“面包屑导航”。

再了解一下面包屑导航的定义：

维基百科上关于面包屑的定义，把Websites那部分解释一下就是这样：

面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级 架构中通常是这个页面的父级页面。

面包屑提供给用户回溯到网站首页或入口页面的一条快速路径，它们绝大部分看起来就像这样：首页→分类页→次级分类页

以下是英文摘录：
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:
Home page → Section page → Subsection page

其次说说面包屑的作用：

一是：提供了多路径的交互方式，方便用户跳转到其它页面；

二是：从一个侧面展示了该信息集合的信息结构和集合方式。

三是：“面包屑”信息结构对于网站的SEO也有着大的好处，它可以更多的强调网站关键字，扩大关键字的范围，优化网站的SEO。
面包屑包含三种：

1、  定位面包屑路径

面包屑路径中最常见的一种。当前页面路径在商城有唯一的位置。

基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别（一般是多于两级）的导航方案。 在下面的例子中(来自于SitePoint)，每一个页面的文本链接表示它比它右边的文本链接高一级。

举例(来自蓝色理想论坛)：http://www.sitepoint.com/article/introducing-joomla/

B  提供指向先前访问过的页面（或网站）和其他区域的捷径。

本质上，它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史，而是在整个网站中某个固定的位置。就是说，不管用户是如何到达 location 页面，面包屑路径都是一样的。

2、   路线面包屑路径

路线面包屑是动态的。当前页面路径是根据用户的点击产生的。
根据到达方式的不同，特定页面上的面包屑路径也不同。基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤，它们显示用户在到达 当前页面之前访问过的页面。

举例：http://www.epicurious.com/旧 版  qzone旧版路径

3、  属性面包屑路径

当前页面可以通过N条路径找到。
属性面包屑是描述一个页面的方式，不是它在网站中的位置，也不是访问的路径，而是它在某种元数据方案中的位置，这种方案往往是主题层级的。
基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。

举例：
A、在Newegg，面包屑路径表示在一个特定页面显示的特性内容。
这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。

B、amazon ，面包屑表达的是物品所属类别，并允许点击类别名称访问上级的类别。整条路径提供了最低一级的页面。也就是说提供了多条通往结点页面的情况。

前瞻第七期出炉啦！
本期由司徒公子为您解读界面狂想曲，神秘的蛋蛋来挑逗您的点击欲，与色彩打了多年交道的杰克叔叔来展示一下他的调色板。《界面狂想曲》第一部分“三维化界 面”内容摘录自Blizzard的《界面的虚拟现实化》一文。

相关链接：
http://www.whitevoid.com/portfolio/
http://www.simpleviewer.net/tiltviewer/app/
http://www.thirteen23.com/experiences/desktop/blu/
http://bumptop.com/
http://all.vic.sina.com.cn/200906nokian97/n97.swf
http://www.meizu.com/cn/m8.html
http://www.eben.cn/
http://tw.asus.com/product.aspx?P_ID=qdwslBLhhfuw43HS
http://www.eicodesign.com/portfolio/1403.shtml

相关链接：
http://zoocha.com/
http://www.toffeenutdesign.com/
http://www.pro-foods.com/
http://www.axiom.ee/
http://www.hybridworks.jp/
http://www.naturellementpulpeuse.com/
http://www.toyinteractive.com/
http://www.floridaflourish.com/
http://www.howarths.nl/
http://www.giraffe.net/
http://www.mikeprecious.com/

相关链接：
http://www.mcdonalds.com.cn
http://www.t-mobile.com/
http://www.ccbk.co.kr/index.jsp
http://pepsi.com/
http://www.ford.com/
http://www.ups.com/
http://www.nbc.com/
http://www.pamaliqueur.com/age-verification.php
http://www.creativespark.co.uk/
http://www.whitehouse.gov/

设计的目标：设计是为了更好的传达信息。其中的“更好”包括：更美丽的、更高效的、更优雅的……

这是我们经过反复讨论后得到的共识。

只有这样的共识，还不够。因为我们会遇到这样的情况：我希望把这段文字设计成蓝色，这会更有感觉、更舒服。但是，使用蓝色可能会让用户迷惑，因为这段文字没有链接，且这个页面中，有链接的文字都是蓝色。“更美丽的信息传达也是设计的目标啊~”

所以，要让设计的目标能更有效的指导设计工作，我们还需要再做些什么—进一步规范“更好的”各项具体要求。

更高效的是基本要求，是需要首先被落实的。“更优雅的、更美丽的”则是更高的要求。这类似与“温饱”与“小康”的关系。

为什么这么说呢？

1. 用户是来使用产品的，而不是来欣赏的，即使是apple.com也是同样的。要欣赏就去美术馆了，十几英寸的显示器上能欣赏出啥来呢？

2. 视觉设计中很多涉及功能的视觉表现本来就应该以科学、社会学、心理学为基础，而不是凭空的、随意的“创造”。比如，绿色普遍被理解为“可行的”“允许的” “正确的”，那么，页面出错的信息用绿色背景就是不好的，甚至可以说是错的。

“更高效”是个无条件的要求。不应为了实现其他设计目标而受到损失。

如何保证“更高效”？

保证“更高效”，是不是保留页面原型中的所有信息不变就可以了？不是。不说也知道，如果要是的话，显然就不用在这里特意说了。那，为什么不是？

视觉设计中有这样两类工作：

1. 渲染气氛，表现视觉风格。通过内容单元框的形状、颜色，文字颜色，背景色，背景图形…表现出特定的视觉风格，渲染气氛，让用户在浏览网页的时候感受到或温馨、或可信、或可爱…

2. 用图形元素直接或者辅助传达信息。比如：图标的设计，按钮样式的设计，重点信息的图形展示…

做这些工作，不随意删改页面原型中的内容，只是基本的要求。渲染气氛的过程中干扰了正文信息的显示是不对的；使用图形元素达意不恰当也是不对的，不需要传达信息的地方用图标来装饰更是不对的。

在视觉设计过程中保证信息传达的高效水平不被降低甚至是能更高，这是项难度很大的工作。

之前我曾经给了个简单的结论“视觉表现元素不应带有信息量”，这是一个可以直接执行的结论，是设计目标的产生出来的一个具体要求。也就是说，如果你不愿意去理解设计的目标，更高效、更美丽谁在先，谁在后，如果是，那么，你只直接执行“视觉表现元素不应带有信息量”这个结论就行了。

这样看来，从设计的目标中还能产生出更多的类似“视觉表现元素不应…”结论。我还没想到，想到再说吧。

SQL常用语句一览

存储过程：
修改：ALTER proc [dbo].[PR_Commodities_Add]
创建：create proc [dbo].[PR_Commodities_Add]

(1)数据记录筛选：
sql=”select*from数据表where字段名=字段值orderby字段名[desc]”
sql=”select*from数据表where字段名like’%字段值%’orderby字段名[desc]”
sql=”selecttop10*from数据表where字段名orderby字段名[desc]”
sql=”select*from数据表where字段名in(‘值1′,’值2′,’值3′)”
sql=”select*from数据表where字段名between值1and值2″
select top 1 userid,id from ZL_U_qy

(2)更新数据记录：
sql=”update数据表set字段名=字段值where条件表达式”
sql=”update数据表set字段1=值1,字段2=值2……字段n=值nwhere条件表达式”
(3)删除数据记录：
sql=”deletefrom数据表where条件表达式”
sql=”deletefrom数据表”(将数据表所有记录删除)
(4)添加数据记录：
sql=”insertinto数据表(字段1,字段2,字段3…)values(值1,值2,值3…)”
sql=”insertinto目标数据表select*from源数据表”(把源数据表的记录添加到目标数据表)
(5)数据记录统计函数：
AVG(字段名)得出一个表格栏平均值
COUNT(*|字段名)对数据行数的统计或对某一栏有值的数据行数统计
MAX(字段名)取得一个表格栏最大的值
MIN(字段名)取得一个表格栏最小的值
SUM(字段名)把数据栏的值相加
引用以上函数的方法：
sql=”selectsum(字段名)as别名from数据表where条件表达式”
setrs=conn.excute(sql)
用rs(“别名”)获取统的计值，其它函数运用同上。
(5)数据表的建立和删除：
CREATETABLE数据表名称(字段1类型1(长度),字段2类型2(长度)……)
例：CREATETABLEtab01 (namevarchar (50), datetimedefaultnow ())
DROPTABLE数据表名称(永久性删除一个数据表)
4.记录集对象的方法：
rs.movenext将记录指针从当前的位置向下移一行
rs.moveprevious将记录指针从当前的位置向上移一行
rs.movefirst将记录指针移到数据表第一行
rs.movelast将记录指针移到数据表最后一行
rs.absoluteposition=N将记录指针移到数据表第N行
rs.absolutepage=N将记录指针移到第N页的第一行
rs.pagesize=N设置每页为N条记录
rs.pagecount根据pagesize的设置返回总页数
rs.recordcount返回记录总数
rs.bof返回记录指针是否超出数据表首端，true表示是，false为否
rs.eof返回记录指针是否超出数据表末端，true表示是，false为否
rs.delete删除当前记录，但记录指针不会向下移动
rs.addnew添加记录到数据表末端
rs.update更新数据表记录

SQL语句的添加、删除、修改虽然有如下很多种方法，但在使用过程中还是不够用，不知是否有高手把更多灵活的使用方法贡献出来？

添加、删除、修改使用db.Execute(Sql)命令执行操作
╔—————-╗
☆ 数据记录筛选 ☆
╚—————-╝
注意：单双引号的用法可能有误(没有测式)

Sql = “Select Distinct 字段名 From 数据表”
Distinct函数，查询数据库存表内不重复的记录

Sql = “Select Count(*) From 数据表 where 字段名1>#18:0:0# and 字段名1< #19:00# ”
count函数,查询数库表内有多少条记录，“字段名1”是指同一字段
例：
set rs=conn.execute(“select count(id) as idnum from news”)
response.write rs(“idnum”)

sql=”select * from 数据表 where 字段名 between 值1 and 值2″
Sql=”select * from 数据表 where 字段名 between #2003-8-10# and #2003-8-12#”
在日期类数值为2003-8-10 19:55:08 的字段里查找2003-8-10至2003-8-12的所有记录，而不管是几点几分。

select * from tb_name where datetime between #2003-8-10# and #2003-8-12#
字段里面的数据格式为：2003-8-10 19:55:08，通过sql查出2003-8-10至2003-8-12的所有纪录，而不管是几点几分。

Sql=”select * from 数据表 where 字段名=字段值 order by 字段名 [desc]”

Sql=”select * from 数据表 where 字段名 like ‘%字段值%’ order by 字段名 [desc]”
模糊查询

Sql=”select top 10 * from 数据表 where 字段名 order by 字段名 [desc]”
查找数据库中前10记录

Sql=”select top n * form 数据表 order by newid()”
随机取出数据库中的若干条记录的方法
top n，n就是要取出的记录数

Sql=”select * from 数据表 where 字段名 in (‘值1′,’值2′,’值3′)”

╔—————-╗
☆ 添加数据记录 ☆
╚—————-╝
sql=”insert into 数据表 (字段1,字段2,字段3 …) valuess (值1,值2,值3 …)”

sql=”insert into 数据表 valuess (值1,值2,值3 …)”
不指定具体字段名表示将按照数据表中字段的顺序，依次添加

sql=”insert into 目标数据表 select * from 源数据表”
把源数据表的记录添加到目标数据表

╔—————-╗
☆ 更新数据记录 ☆
╚—————-╝
Sql=”update 数据表 set 字段名=字段值 where 条件表达式”

Sql=”update 数据表 set 字段1=值1,字段2=值2 …… 字段n=值n where 条件表达式”

Sql=”update 数据表 set 字段1=值1,字段2=值2 …… 字段n=值n ”
没有条件则更新整个数据表中的指定字段值

╔—————-╗
☆ 删除数据记录 ☆
╚—————-╝
Sql=”delete from 数据表 where 条件表达式”

Sql=”delete from 数据表”
没有条件将删除数据表中所有记录)

╔——————–╗
☆ 数据记录统计函数 ☆
╚——————–╝
AVG(字段名) 得出一个表格栏平均值
COUNT(*|字段名) 对数据行数的统计或对某一栏有值的数据行数统计
MAX(字段名) 取得一个表格栏最大的值
MIN(字段名) 取得一个表格栏最小的值
SUM(字段名) 把数据栏的值相加

引用以上函数的方法：
sql=”select sum(字段名) as 别名 from 数据表 where 条件表达式”
set rs=conn.excute(sql)
用 rs(“别名”) 获取统的计值，其它函数运用同上。

╔———————-╗
☆ 数据表的建立和删除 ☆
╚———————-╝
CREATE TABLE 数据表名称(字段1 类型1(长度),字段2 类型2(长度) …… )
例：CREATE TABLE tab01(name varchar(50),datetime default now())
DROP TABLE 数据表名称 (永久性删除一个数据表)

╔——————–╗
☆ 记录集对象的方法 ☆
╚——————–╝
rs.movenext 将记录指针从当前的位置向下移一行
rs.moveprevious 将记录指针从当前的位置向上移一行
rs.movefirst 将记录指针移到数据表第一行
rs.movelast 将记录指针移到数据表最后一行
rs.absoluteposition=N 将记录指针移到数据表第N行
rs.absolutepage=N 将记录指针移到第N页的第一行
rs.pagesize=N 设置每页为N条记录
rs.pagecount 根据 pagesize 的设置返回总页数
rs.recordcount 返回记录总数
rs.bof 返回记录指针是否超出数据表首端，true表示是，false为否
rs.eof 返回记录指针是否超出数据表末端，true表示是，false为否
rs.delete 删除当前记录，但记录指针不会向下移动
rs.addnew 添加记录到数据表末端
rs.update 更新数据表记录

╔————————————————–╗
☆ 关于SQL语句怎么样才能实现中文数据按首字母排序    ☆
╚————————————————–╝
关于SQL语句怎么样才能实现中文数据按首字母排序?
SQL   Server?

try
——————————–
–排序可以
declare   @t   table([name]   varchar(10))
insert   into   @t   select   ‘张三’
union   all   select   ‘李四’
union   all   select   ‘王二’
union   all   select   ‘王五’
union   all   select   ‘吴三’

select   *   from   @t   order   by   [name]   collate   Chinese_PRC_CI_AS

查询同一周内的数据，。sql语句是：
select * from 表 where datediff(week,时间字段,getdate())=0

也可以稍作修改用来查询与指定日期在同一周内的数据：
select * from 表 where datediff(week,时间字段,’2002-01-01′)=0

由于ACCESS与SQLServer2000中的某些查询略有不同，所有下面列出access的查询：
select * from 表 where datediff(“ww”,时间字段,date())=0

下面是指定日期的
select * from 表 where datediff(“ww”,时间字段,#2002-01-01#)=0

MYSQL的

select *from 表where now()-时间字段<1000000*7

Mysql的计算时间差方法是这样的：
差一分是100；
差一秒是1；
差一时是10000；
差一天是1000000;
差一月是100*一天；
差一年是100*一月；
查一个月：
datediff(date,时间字段,getdate())<30

select * from 表 where datediff(Month,时间字段,getdate())=0
上个月是 =1
下个月是 =-1
只有为0才是自然月

IE7/IE8 /FF2/FF3 等DIV自动高问题解决方案

把下面代码贴到样式文件里面就行了。

/*针对非IE 自动高度问题*/

div:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*针对IE*/
div{zoom:1;}

在赣州呆了近四个月，这四个月带我进入了互联网行业，收获颇多。在这期间我对生活也有了新的观念，慢慢地感觉到了理想与目标，感觉自己成长了好多。今天向老板辞职了，没太多的依恋。重新开始，寻找自己的理想。

Thank you for visiting the Windows Internet Explorer Testing Center

This website contains several collections of new test pages that we developed in conjunction with the World Wide Web Consortium (W3C) working groups. These 192 test pages have been updated based on feedback and now include some new HTML5 test pages.

We respect how challenging it is to build one page that works the same in every browser as the technology advances and customer expectations rise. We have created these tests (and welcome your feedback!) to help web developers see if a browser supports what they are trying to do before they depend on it. Because there are ambiguities and options in any specification, there may be cases where some browsers behave differently. The Internet Explorer team remains committed to making the same standards-based markup work across browsers. This is why we are contributing these new test cases to the appropriate web standards working groups at the W3C.

There are two tables below. The first table is a summary of the test results with the May 2010 IE Platform Preview and each of the major shipping browsers running on Windows. The table at the bottom of this page provides details and links to each of the new test cases we submitted to each appropriate W3C working group to help the web become more interoperable.

I want to thank the members in the W3C working groups that helped us develop these tests, the community members for providing valuable feedback on the tests, as well as the engineers on the IE team that made these possible.

Thank you,

http://samples.msdn.microsoft.com/ietestcenter/#html

今天我们班那几个家伙来赣州考试了，好久没有看到他们的面孔了，突然一见，很是亲切。

随后来到一家烧烤店吃了起来，啤酒加烧烤，很是痛快。

很久没有这么痛快的畅饮过，终于发现有一帮朋友是一件很幸福的事，因为你可以跟他们分享一切。