有一点爱的空间

乐趣购时尚志五月上

有一点爱 — Tue, 08 May 2012 12:23:05 +0000

五月，春夏之交，青黄不接，我有了青色和黄色，也代表着轻熟。

首页

EDM

页面网址：http://www.lequgo.com/fashion/20120501/index.shtml

沃尔玛电子商务网站首页

有一点爱 — Tue, 08 May 2012 12:18:37 +0000

参加沃尔玛电商网站设计时候的设计稿

首页版本一

首页版本二

最近做的一些Logo

有一点爱 — Mon, 30 Apr 2012 13:05:28 +0000

乐趣购微博焦点图

有一点爱 — Sun, 29 Apr 2012 07:30:20 +0000

针对IE的css hack

有一点爱 — Thu, 19 Apr 2012 02:02:37 +0000

.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同

乐趣抢拍到底

有一点爱 — Wed, 28 Mar 2012 02:31:21 +0000

经过二十多天的折腾，乐趣抢拍终于在昨天上线，设计稿前前后后有七个版本，主要是banner的变换，下面一一呈现。

这是最初的，还没成形，因为不用“拍卖岛”这个主题，所以胎死腹中。

这一版和前面的是同一时期的，做的小岛和海洋，白费了。

于是开始了下面一系列的设计修改：

第三版，想用摄影的抢拍来表达“抢拍”，被否定。

来个拍卖捶+欢呼出价的人群表现“抢拍”，Pass掉。

这一版是花了心思，在听取了各方意见后，用锤子来捶盒子，然后拍品从盒子里跃出。后来记不清什么原因也没通过，好像是背景的问题。

这版是我最喜欢的，就在emily在做EDM的时候，我冒出了灵感，在一个表盘上面每个整点刻度挂上拍品，用拍卖捶当时针，来表现拍卖的时效性，旁边放上哄抢的人来表现抢，背景天蓝色，表盘橙色，冷暖对比。后来老板介入，要求去掉圆盘和商品。于是乎，我只能在抢拍到底几个字上做花样了。

这是最终版。

乐趣抢拍详情页难产记–后续

有一点爱 — Wed, 28 Mar 2012 02:11:17 +0000

还没完呢，就在准备上线时，老板出现了，狠批了我的设计，字体太多，排版太乱，于是加班加点，出来了这一版。

字体换成微软雅黑，提示黄带固定在一个位置，看起来是整齐多了，经过几轮细致和样式调整，终于通过了。

sougou浏览器img不能点击

有一点爱 — Fri, 23 Mar 2012 04:21:54 +0000

我们的测试工程师Bardon发现在搜狗里，拍卖岛的商品图片不能点击，其他浏览器里都是没问题的，后来发现在IE6里也是这样。我是在列表div外面直接加了a标签，div里面还有dl,img原来是放在dd里的。emily网上找了答案，说是img外面加了其他标签就会造成这种状况，我把img移动a 的后面，紧跟着a,问题就解决了。

乐趣抢拍详情页难产记

有一点爱 — Thu, 22 Mar 2012 08:46:58 +0000

将抢拍首页基本得到大家的认可之后，我以为详情页会很容易了，无非是放一个拍品的大图和抢拍操作及提示，和拍品的介绍，最初的详情操作部分是这个样子地：

在一次产品讨论会上，技术部和咱头儿认为详情页的图片没必要这么大，就用原来的图片规格310*310px就可以了，于是我纠结了，右边正方形的图片，右边操作区域不好弄了，图片太小，右边区域就要加大，可抢拍的提示就这点字，怎么放都显得空，想用图形来填充，于是有了下面的设计稿：

想到用大括号来包围操作区域，我还挺佩服自己的。于是将页面切出来交给技术套程序，忘了发邮件给产品和咱头儿确认设计稿了。苦逼的是技术套完程序测试的时候，产品才看到这个页面，顿时急了，说太难看了，要求改回到大图版的设计，否则不能上线。我勒个去的，咱得赶紧和头儿沟通，重新设计啊，要不然上不了线的罪名我可担不起。咱头儿还是要求用正方形的拍品图片，我只得赶紧想点子了，怎么让右边的区域有新意又好看呢？

还好脑子没停电，搞出来了一款我自认为满意的设计稿。

瞧瞧，挺有科技感的吧，可咱头说箭头太难看了，右边的区域和图片对比，要一个凸起来一个凹下去，好吧，做点错位和立体感。搞了好几个效果，头儿说力度太大了，稍微有点效果就行了，这个度不好把握啊。

最好出来了这个：

头儿终于认可了，发给产品看的时候，她说背景的斜杠不行，太难看了，我觉得挺不错啊，无论如何说不通，好吧，加个背景！她终于认可了。

firefox下清除浮动后的margin不起作用的原因及解决方法

有一点爱 — Tue, 13 Mar 2012 09:31:24 +0000

今天在写前端代码的时候发现当给div应用清楚浮动效果后，margin-top:20px不起作用，加上float:left就可以了。

原来clear属性应用在非float的box上的时候，这个box将产生一个足够的高度来使自己的顶端置于上一个浮动元素的低端之下。而将clear属性应用在浮动的box上的时候，这个被清除（左，右，全部）box的顶端必须置于上一个（左，右，全部）浮动box低端之下。（这里是一一对应的关系。）