摘要：
一、悠悠哉哉说点什么本来我有个很好的计划，就是本文用漫画来写，把话痨的火影漫画的文字重新抹掉，然后填本文相关的技术文字。哈，是不是很好啊！但是，想到了一个残酷的现实——流量，我一个月只有30G流量，几乎月月爆棚，要是这里全部用火影的图片要实现，页面没个1M搞不下来哈~，文章要是3000访问，就差不多3G，天哪，我表示压力很大。于是，我决定还是中规中矩用文字加一两小截图表示下吧~二、绝对定位元素的居中实现如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。兼容性不错的主流用法是：.element { width: 600px; height: 400px; posi... 阅读全文
摘要：
零：项目背景百度网盟推广平台是配合网盟推广用户的在线营销平台，推广客户可以在平台上实现全方位的推广管理，包括搭建账户结构、配置预算、定向方式、监控账户投放效果等等复杂的账户操作。但是由于系统的复杂度和功能性的增加，原有的系统对新功能的支撑显得有些捉襟见肘，所以在今年8月份，我们开始了对系统体验的分析和优化工作。一：产品理解广告投放平台广义上属于商业产品体系，商业产品和用户产品在体验的关注点上是有显著区别的。最大的区别就是使用需求不同，商业产品一般不会出现在我们日常生活中，大部分都是在工作时，或者是特定的时段内才会使用到。所以把握好商业产品的特性，是做好商业产品用户体验的关键。研究一个产品的特性 阅读全文
摘要：
一、基本JPEG(baseline jpeg)和渐进JPEG网络上那些色色的照片都是.jpg格式的（“色色”指的是色彩斑斓的意思）。不知诸位有没有注意到，这些jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)，例如下面的示意（图片来源：http://codinghorror.typepad.com）：一般线性加载（如不能显示点击这里查看）交错/渐进式（若无法显示点击这里查看）你网站的jpg图片是以何种方式呈现的呢？我猜你是“自上而下扫描式”的，擦擦~我在贴吧看海贼火影漫画时候，时不时会发现，其中部分图片就是 阅读全文
摘要：
本文分三部分讲解:效果图与页面的差异：主要讲解页面与效果图不同的细微之处Css3新特性：分两部分，新特性和实例部分设计与构建：构建的趋势与现状1.效果图与页面的差异：1)内核小常识分享主流内核：Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上Webkit内核：Safari,Chrome等1 Trident内核和W3C标准脱节，Trident内核的大量Bug等安全问题没有得到解决。2 Gecko：这是Firefox 和 Fl 阅读全文
摘要：
在工业化设计融入人们生活的现今，用户体验一词就常常出现在人们的视线里，随着互联网web2.0时代的到来，大大小小的网站设计中也都开始关注用户体验的方面，对什么是用户体验（百度这四个字，比我写什么解释都好）就不做详细赘述了，相信大家比我了解的更加丰富。用户体验从产品设计阶段便开始介入进来，如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀，听过这样的一句话：“具有良好用户体验的产品，不仅仅取决于一个有着丰富交互设计经验的产品设计师，还与产品生产过程中的每一个环节是否都具备良好的用户体验意识有一定的关系”。今天我想从一个页面重构工程师的角度出发，从两个方面去谈谈在我的工作中，我 阅读全文
摘要：
我们常以“整齐”，“易读”，“亲切”，“易于维护”，“复用性强”等来形容一些优秀的开发者所写的代码。现在，对代码的好评还有一个更为时尚的词“优雅”，是不是听起来觉得很亲切呢？页面是互联网产品的表现层面，不仅讲求外观，而且会应对更新迅速的互联网产品需求。要成为一名优秀的开发者，经验积累是必不可少的，而一部分经验归纳起来正是在工作过程中的细节。下文介绍的即是在页面开发流程中的多方面的细节内容，希望对这些细节内容的探讨，可以帮助各位页面开发者做得更出色，以更优雅的姿态来书写页面。从Photoshop开始从UI设计稿到静态页面一般都称作“切图”。这个词很容易令人联想到Photoshop中的“切片工具” 阅读全文
摘要：
可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。CSS3 greyscale 滤镜实现如下测试代码：.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filt... 阅读全文
摘要：
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1 阅读全文
摘要：
曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-block。（本文约定 display:inline-block 简写为 inline-block）开篇我们来看几个问题：IE6、7 真的不支持 display:inline-block 吗？disp 阅读全文
摘要：
随着业务的不断推进，现在我们的后台项目越来越多。但是由于前端和后台之间联调复杂导致项目经常会推迟。为了能优化项目流程，提高开发效率。交互和前端决定一起做一套DPL，做一系列的规范出来。这样可以减少交互，前端，后台互相的沟通成本，同时能够沉淀下这段时间大家的收获。交互参与的DPL（Design Pattern Library）中我们主要是做栅格体系，控件体系，视觉体系，下面我来和大家分享下DPL中的栅格体系设计栅格研究网页栅格系统前，来看一组数据：网站首页页面宽度 pxYahoo!950淘宝950MySpace960新浪950网易960Live Search958搜狐950优酷960AOL960 阅读全文