12 2009 档案
摘要:浅析网页色彩应用在设计网页之前,客户或产品经理会提出对网页视觉风格设计的期望:活跃、大气、稳重、信赖、都市化….. 设计师一听到关键词或许很自然地在心里蹦出几个配色与“关键词”相匹配了。网页的色彩,是访问者登录页面时的第一印象,好的页面色彩能给用户留下深刻的印象,并且能产生很好的视觉效果和营造网站整体氛围的作用。色彩是我们接触事物的第一直观认知,在浏览一个新的...
阅读全文
摘要:一年前网上还找不到关于 inline-block 属性的文章,为了方便大家更好的理解该属性,当时总结整理了篇《display:inline-block的深入理解》。而现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性(注:原来只有 Opera、Safari 支持),...
阅读全文
摘要:最近 Yahoo! Exceptional Performance 在 《优化网站性能的 14 条规则》的基础上又增加了 20 条新的规则。1. 尽早清除缓冲区[server]2. AJAX 请求使用“GET”方法[server]3. 延迟加载组件[content]4. 预加载组件[content]5. 减少 DOM 元素的数量[content]6. 跨域分离组件[cont...
阅读全文
摘要://显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent
阅读全文
摘要:优化网站性能的14条规则(更新)1. 尽可能的减少 HTTP 的请求数[content]2. 使用 CDN(Content Delivery Network)[server]3. 添加 Expires 头(或者 Cache-control )[server]4. Gzip 组件 [server]5. 将 CSS 样式放在页面的上方[css]6. 将脚本移动到底部(包括内联的)[javascript...
阅读全文
摘要:有时候在一个页面用到收放功能的时候时,总有一个虚线框在触发收放的功能按钮上,显得特别刺眼,那如何去除这个虚线框呢?虽然从可用性的角度,隐藏虚线框的做法会让键盘偏执狂不满。但从视觉上,有时候虚线框确实影响美观。方法一:IE 下可使用其私有的html属性:hideFoucs,在标签的结构中加入 hidefocus=”true” 属性。即:<a href="http://w...
阅读全文
摘要://显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent
阅读全文
摘要:表格的 cellspacing 和 cellpadding 我们经常会用如下的方式来清除默认样式:<table cellspacing="0" cellpadding="0"></table>很多朋友会说表现在结构中,这样不符合标准,那如何将这个表现拿出来,有些朋友或许很迷惑。我们可以用 table 的 border-collapse: collapse; 属性 来代替ce...
阅读全文
摘要:margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。一、margin的基本特性margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin,可以用来设置 box 的 margin area。属性 margin 可以用来同时设置 box 的四边外边距,...
阅读全文
摘要:1、使用 fieldset 和 legend标签 在 form 中,我们经常会对 form 中的信息进行分组,比如注册 form ,我们可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),那我们如何更好的来实现呢?我们可考虑在 form 中加入下面两个标签:fieldset:对表单进行分组,一个表单可以有多个fieldset legend:说明每组的内容描述 <form i...
阅读全文
摘要:form 无论是在网站的制作中,还是在网站的重构中,我们都会频繁地“碰面”,当“碰面”的次数多了,反而觉得他更让人迷茫,有种熟悉的“陌生”,越来越把握不了他。下面我们将带大家走进 form 的世界,一起来熟悉、探讨、掌握他的“脾性”。对于简单 form 的设计图(如图,yahoo 注册页面的一部分),我...
阅读全文
摘要:分别定义各种浏览器的透明效果:.transparent{filter:alpha(opacity=12);-moz-opacity:0.12;opacity:0.12;background-color:#000;}filter:alpha(opacity=12); 支持 IE 浏览器 -moz-opacity:0.12; 支持 FireFox 浏览器 opacity:0.12; 支持 Opera,...
阅读全文
摘要:尽管有 CSS 的 vertical-align 特性,但是并不能有效解决未知高度的垂直居中问题(在一个 DIV 标签里有未知高度的文本或图片的情况下)。标 准浏览器如 Mozilla, Opera, Safari 等.,可将父级元素显示方式设定为 TABLE(display: table;) ,内部子元素定为 table-cell (display: table-cell),通过 vertica...
阅读全文
摘要:三角的一个特殊做法:CSS部分:em {display:block;font:0/0 "宋体";border:6px solid;border-color:#fff #fff #fff #000 ;}XHTML部分:<em></em>代码简单,还可以利用border的颜色轻松做出各个方向的三角!
阅读全文
摘要:IE中z-index BUG首先先来看一个演示例子的代码部分。XHTML 部分:<div id="container"> <div id="box1">这个box应该在上面</div></div><div id="box2">这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-ind...
阅读全文
摘要:z-index 属性简介z-index : auto | numberauto: 默认值。number: 无单位的整数值,可为负数 。z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。注意:这个属性不会作用于窗口控件,如 select 对象。在IE5.5+中, i...
阅读全文
摘要:表达方式:+property:value测试环境:IE5,IE6 ,IE7,FF1.5,FF2.0,Opera 9,Safari 2测试结果:IE5,IE6 ,IE7浏览器识别;FF2.0,Opera 9,Safari 2浏览器不识别。结论:我们可以用”+”来实现只有 IE 识别的 CSS Hack。比如我们要实现在 IE 中 480px 的宽度,而在其他浏览器 500px...
阅读全文
摘要:在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有:Opera、Safari。但很...
阅读全文
摘要:“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。题目的难点在于两点:垂直居中; 图片是个置换元素,有些特殊的特性。 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:.box { /*非IE的主流浏览器识别的垂...
阅读全文
摘要:由于连续的字符(字母、符号、数字)在默认情况下是不换行的,可能会破坏整个界面布局。那如何解决这个问题呢?在 IE 和 Safari 1.3+ 下相对比较容易解决,使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ,因为有一个特殊的情况,该属性无法解决换行——连续的英文标点符号。注:word...
阅读全文
摘要:我们在做表单的时候经常会使用到这样的结构:<fieldset> <legend>哪些浏览器legend标签设定的宽度有效</legend> <input type="checkbox" value="ie6" name="width" id="ie6" checked="checked" /><label for="ie6">IE6&...
阅读全文
摘要:<style type="text/css">p { line-height:17px;}</style><div class="mdse-detail"> <p> <strong style="font-size:30px"> 品牌:XZX<br /> 市场价:145元<br /> 颜色:黑色<br /...
阅读全文
摘要:我曾经找遍整个网络以尝试找到一些简洁而结构良好的网站实例,这可能是一个独特的布局或者只是使用一些好的排版、间距简单的呈现出来,或者是网站的给人的第一印象,这里只是一些我喜欢的。从这些网站实例中我们很容易发现一些特性,比如大空白、巨大而且漂亮的图片、对比鲜明的色彩、主色调为浅色(白色或者浅灰)、以及网格化布局等。Brian HoffKyle SteedSpoon GraphicsSushi and ...
阅读全文
摘要:关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。 事关大小字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:1、相对大小包括...
阅读全文
摘要:根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后,决定写这篇文章。总的来说,我注意到由于误导性信息,他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法,但是这绝对是错误的!这个建议只是针对使用HTML表格来定义网页的布局,但是表格在方便的排列数据信息行和列方面非常完美,而且如果你一定要在一个页面上显示表列...
阅读全文
摘要:一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。jQuery是继prototyp...
阅读全文
摘要:这是 Seoptimise 的 Tad Chef 对 2010 年的 Web 所做的 30 个预测,包括 social media(社会媒体), business(商务), mobile(移动), marketing(营销), search(搜索), SEO, web design & development(Web设计),Blogging(博客), software(软件) 9 个方面。...
阅读全文
摘要:可视性的问题几乎在每次不同产品的用户测试中都会出现:用户总是对页面的某些元素、功能视若无睹,或根本无视。基于此,对这个问题进行了一番小小的研究。为何用户视若无睹?视觉是人的生理与心理现象。本文述及的是视觉作为心理现象,也即由知觉、思维、记忆、情感等视觉认知引起的可视性问题,而非用户眼睛在生理上存在缺陷,也不是错幻视觉(详见链接图例)。用标准些的心理学术语来说,这里所说的“视若无睹&rd...
阅读全文
摘要:.case01{border:1px solid #96c2f1;background:#eff7ff} .case02{border:1pxsolid #9bdf70;background:#f0fbeb} .case03{border:1pxsolid #bbe1f1;background:#eefaff} .case04{border:1pxsolid #cceff5;background:...
阅读全文
摘要:IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢?且看《IE7的web标准之道》系列文章,和你一起见证IE7的改变!CSS选择符IE7最令网页设计者兴奋的改进,便是支持更多、更丰富的C...
阅读全文
摘要:direction: rtl;这句代码很NB,可以让你的浏览器body滚动条在左边.
阅读全文
摘要:这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。1.性能差异【border:0;...
阅读全文
摘要:这些具有动态效果的滑动盒都基于同样的基本原理。在你经过想要\\\"窥见\\\"对象中的其他两个项目,这个带有\\\".boxgrid\\\"的DIV标签充当着一个窗口。基本原理这些具有动态效果的滑动盒都基于同样的基本原理。在你经过想要"窥见"对象中的其他两个项目,这个带有".boxgrid"的DIV标签充当着一个窗口。还不明白? 让这个图片来给你线索吧:理解了这个基本原理之后,我们就可以利用滑动元...
阅读全文
摘要:如何让网上购物真实地模仿了象在逛商店的体验?一张邮寄单张通过聪明的设计使其发挥两个不同的功能;一张卡片上有两个人的信息,更加有效传达团队精神,但如何设计得漂亮?如何将一张了无生气的Excel表格转变成吸引人的设计?精心的安排能够让设计便宜也有好货。原文出处:www.bamagazine.com网站:网上商店模仿了真实的店铺 ShoeGuru的网上鞋店给人的感觉是如此的真实,你几乎都可以闻到皮革的味...
阅读全文
摘要:设计一个吸引人的网页主横幅其实可以很简单,我们思考的只是如何分配区域。点击上图看大图 在一个简单的网页中,上方的横幅是最重要的视觉元素。在很多博客网页中,它甚至是唯一的视觉元素。所以它的作用可以说是相当大的。它必须能够与网站的风格配合,并能传达视觉上的信息。它必须让人看上一眼就让人知道这个网站是属于什么类型,风格是什么。这个横幅还必须能够提供简单明了的导航链接。所有这些,我们都可以通过将横幅分成三...
阅读全文
摘要:滑动AnythingSliderEasy SliderCoda-Slider 2.0图像排列展示GalleriajQuery Panel GalleryslideViewerSupersized导航jquery mb.menuHorizontal Scroll Menu with jQuery AutoSprites表格和表单Password StrengthAjax Fancy CapchaCh...
阅读全文
摘要:在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题,也是方兴未艾的Web2.0大浪下设计师们的最爱(看看那些在全世界遍地开花的SNS网站,无论是视觉元素还是交互流程均能轻则轻)。本文主要从实践和总结的角度出发,提出了让设计变得更轻的6个技巧。 在网站或软件...
阅读全文
摘要:交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置...
阅读全文
摘要:三、考虑Tab的易用性更复杂的交互行为的出现,在不刷新页面的状态下异步更新内容,以及如何满足用户使用不同访问方式,包括那些很难确定的非典型状况下的访问需求,这些状况令易用性成为当前最热门的话题。本章节中,我们将讨论一些在设计Tab元素时你应该知道的易用性原则。“选择”和“未选中”状态的标签 应该使用对比鲜明的颜色为了让视力上有障碍的用户能分清哪些标签...
阅读全文
摘要:内容区之间的切换 应该没有延迟。使用Tab来控制内容切换的特性之一是快速和互动。为此,应该在html代码里提前内嵌所有内容区的代码,并通过CSS/Javascript来隐藏未被选中内容区,而不是等用户切换到某个标签后再去远程请载入信息。避免在标签切换的时候去载入页面,使用AJAX从远程读数据来生成动态菜单也是一个办法,但这对使用语音阅读器的用户(译注:Screen-Reader:为视力障碍的用户准...
阅读全文
摘要:信息之间不应该存在对比或并行的关系Tab元素中,同一时刻,只能显示一层内容区。当用户需要对位于不同内容区上的信息进行对比,或者这几种信息同时显示会更便于用户阅读时,就不应该使用Tab。否则会导致用户为了比对所需的信息,而不停在标签之间进行切换。下面这个案例中,BGPatterns (一个在线制作背景图案的网站)tab就用得不是地方。当用户想设计或修改他所制作的背景图案时,必须反复在几个标签之间进行...
阅读全文
摘要:译者:西乔 来源:Smashing Magazine 作者:Jacob GubeModule Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。(译注:本文中指的是狭义的Tab,指在...
阅读全文
摘要:<abbr></abbr>的作用是表明标签中的内容为缩写形式<acronym></acronym>的作用是表明标签中的内容是首字母缩写词<abbr><acronym>需要加TITLE进步不说明;strong要比em力度更大一点。如果说em是中国词汇中的“强调”、“注意”,那么st...
阅读全文
摘要:头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:downloa...
阅读全文
摘要:颜色#000000可以缩写为#000;#336699可以缩写为#369;margin:1em 0 2em 0.5em; 上右下左边框(border)border:1px solid #000; 背景(Backgrounds)background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat...
阅读全文
摘要:1、页面的基本构成和开发标准<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&g...
阅读全文
摘要:本期特约作者:打火机,菜花,布莱恩,为大家一起分享他们的独特见解。本期特约作者:打火机,菜花,布莱恩,为大家一起分享他们的独特见解。关键字:创意、混维所谓反 Box 布局,就是不再拘泥与传统的 Box 布局模型,而是采用一种更有创意的的布局,为用户带来非常规的视觉体验。然而需要指出,这种创意布局需要非常注意易用性问题,一种新的创意布局需要时间去慢慢成熟。当混维的概念进入页面设计师刻意营造出来的3D...
阅读全文
摘要:根据Brand New的 消息,以“QuickTime X”命名的新一代苹果QuickTime将启用新的Logo图标。
阅读全文
摘要:1993面世的Windows 3.11的界面是Windows系列中最出色的,很显然设计师们在创作的时候赋予了很大的热情,在细节和配色上经过了详细的斟酌。原文作者:Denis Kortunov原文链接:10 Outstanding Metaphors in Icon Design译者:JJ.Ying1. Windows 3.11 1993面世的Windows 3.11的界面是Windows系列中最出...
阅读全文
摘要:几组游戏图标设计来源:http://forum.chinaui.com/viewthread.php?tid=66857&extra=page%3D1#zoom
阅读全文
摘要:本文转载自:[技术分享]RDFa相关介绍-构建更友好的web页面原作者:Raina转载请经原作者同意,并保留其版权,多谢! 看着这个题目可能大家会有点陌生,不知道是什么,说的直白一点,RDFa就是让你的页面更好的被机器所理解,而不简简单单是展示你的页面,下面就关于此对什么是RDFa做个简单介绍。背景:为什么会出现RDFa这个东西呢?现在的互联网主要是为人类的使用而创造的,虽然机器可读的数据是互联网...
阅读全文
摘要:过去我们分享过很多天才和大方的设计师制作的大量图标,这些图标对我们在前端设计和开发中起到了很大的作用。现在我们整理一批2009年出现的最好的图标给大家,这些都是值得收藏的,合理的使用它们会大大的提高你的工作效率和设计效果。BasicOnebit Icon Set 2Hand Pointer IconsWP WooThemes Ultimate Icon SetLed Icon SetMinIcon...
阅读全文
摘要:中文翻译行动召唤按钮:实例与最佳实践英文原文Call to Action Buttons: Examples and Best Practices版权所有,转载请注明出处,多谢! 行动召唤在网页设计中——尤其是在用户体验方面——是一个描述在网页中用于诱导用户行为的元素的术语。在网站界面中,最流行的行动召唤的表现是出现在点击表单按钮、完成一个行动(比如...
阅读全文
摘要:作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果。然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来漂亮,要么就是最终的结果只是看起来“不完美”。网上有很多关于极简主义设计的文章,而本文的目的是帮你实现一个漂亮而不空洞的极简网站设计。最重要的是,我们将展示一个小的极简网站设计画廊,这样你就可以分析为什么一些设计可以而其它的则不可以。什...
阅读全文
摘要:Utah TravelLift InteractiveMailChimpIdea FoundryThe Creative DotMichael DickMission Community ChurchSushi & RobotsWonderbra Ultimate StraplessLight CMSTwo24 StudiosTypejockeysEcosimplyGlueAdcetera...
阅读全文
摘要:屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;} /*FF,可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/select:empty {font:12px !important;} /*safari可见*/这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7与IE5....
阅读全文
摘要:text-align:justify; text-justify:inter-ideograph;
阅读全文
摘要:At-rules@-moz-documenturl(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(21tx.com){div{color:red;}} url是指定样式在哪里网址下可以用,url-prefix是指定样式在哪个目录下,domain是指定样式在哪里玉米下有用,用“,”可以使用多个...
阅读全文