A CSS3 quiz

Posted on February 22, 2012 by wison

This may take you a little time to accomplish it , but i think it valueable.The quiz below is very funny, test what degree you master the css3.
1.Can you can specify more than one box shadow to an element?
　　a.yes
　　b.no
2.box-shadow: 5px 5px 5px #888; What does the third value in the declaration specify?
　　a.X off set
　　b.Y offset
　　c.Blur radius
　　d.Margin
3.What does the a in RGBa stand for?
　　a.Alt-transparency
　　b.Alpha
　　c.Alphabetic
　　d.Alphanumberic
4.RGBa can not be applied to which of these sections?
　　a.Backgrounds
　　b.Borders
　　c.Shadows
　　d.None of the above. RGBa can be applied to any property associated with color
5.Which of these declarations will result in a box whose bottom right corner has a radius of 20px?
　　a.border-radius: 40px 20px 20px 80px;
　　b.border-radius: 40px 20px;
　　c.border-radius: 20px 20px 40px 20px;
　　d.border-radius: 20px 40px 60px 80px;
6.Is this a valid declaration, under CSS3? text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
　　a.Yes
　　b.No
7.Which of the below is a valid way to embed and use non-standard fonts?
　　a.@font-face {
　　　　font-family: ‘Droid Sans’;
　　　　src: href(‘/DroidSans.otf’) format(‘opentype’);
　　　}
　　b.@font-face {
　　　　font-family: ‘Droid Sans’;
　　　　href: url(‘/DroidSans.otf’) format(‘opentype’);
　　　}
　　c.@font-face {
　　　　add-font: ‘Droid Sans’;
　　　　src: url(‘/DroidSans.otf’) format(‘opentype’);
　　　}
　　d.@font-face {
　　　　font-family: ‘Droid Sans’;
　　　　src: url(‘/DroidSans.otf’) format(‘opentype’);
　　}
8.Can the values of red, green and blue be interchanged in the RGBa notation?
　　a.Yes
　　b.No
9.Which of these is a keyword that can be used when using the box-shadow property?
　　a.Engrave
　　b.Emboss
　　c.Inset
　　d.Bevel
10.Can you use a negative number as the blur radius value?
　　a.Yes
　　b.No
11.Including the optional parameters, how many parameters does a box shadow declaration take?
　　a.3
　　b.4
　　c.5
　　d.This is a trick question. The correct answer is not a choice.
12.Which new property, introduced in CSS3, allows you to wrap long words?
　　a.auto-word-wrap
　　b.word-wrap-on
　　c.wrap
　d.word-wrap
13.Which vendor specific prefix do you have to use to target Opera?
　　a.-opera-
　　b.-o-
　　c.-vendor-
　　d.-custom-
14.Which of the following pseudo selectors isn’t a part of CSS3?
　　a.enabled
　　b.disabled
　　c.empty
　　d.visible
15.What does the :empty pseudo class target?
　　a.Matches elements that are invisible
　　b.Matches elements that have no parents
　　c.Matches elements that have no children
　　d.Matches elements that have no CSS associated with it.
16.Using the border-radius property, you can style either all four borders or none at all. This statement is..
　　a.True
　　b.False
17.Will the :empty pseduo class target an element if it only contains comments inside?
　　a.Yes
　　b.No

The correct answers:
acbdaadbcbddbdcba

how to use jquery easing

Posted on February 21, 2012 by wison

I have been use jQuery for a long time, but quite know about the multiple effect of the easing plugin, today i find some thing useful, and summary it here.

You must introduce the plugin after your jquery invoke.

1.Change the default animate effect of jQuery

jQuery.easing.def = "effect-string";

With this code in the top of your js code, then the default animate effect will change to the string you defined.

2.Make a difference of your multiple action, for example:

$(ele).animate({
   top: "+200",
   right: "-=100"
},{
   specialEasing:{
     top: 'swing',
     right: 'easeOutBounce'
   }
});

$(ele).animate({
   top: [500, 'swing'],
   right: [200, 'easeOutBounce']
},{
   specialEasing:{
     top: 'swing',
     right: 'easeOutBounce'
   }
});

You can use it after the version 1.4.

Tips of Operator Precedence

Posted on February 21, 2012 by wison

I saw this snippet in my one qq group:

$a=$b=0;
if($a=0 || $b =2)
{
    var_dump($a,$b);
}

This outputs:

bool(true)
int(2)

Do you know why $a changed to the boolean true?
Someone explains that because the ‘||’ operator’s precedence is big than ‘=’,so the code is equivalent to

if($a= (0 || $b =2))
{
    var_dump($a,$b);
}

And that’s right!
Of course, you should not put an assignment in that situation.
Here is the operator precedence of all the operators in php:

The precedence of an operator specifies how “tightly” it binds two expressions together. For example, in the expression 1 + 5 * 3, the answer is 16 and not 18 because the multiplication (“*”) operator has a higher precedence than the addition (“+”) operator. Parentheses may be used to force precedence, if necessary. For instance: (1 + 5) * 3 evaluates to 18.

When operators have equal precedence, their associativity decides whether they are evaluated starting from the right, or starting from the left.

Studio-5th

Posted on February 15, 2012 by wison

Since i decided to establish a studio in my hometown, Sanmenxia city, i did’t know how to begin with it.The most important and difficult thing is to get customers, how to get and server them.
I did a start today.
1.Print business cards.The studio name is ‘studio-5th‘, to meet with the outsourcing, i want make it more meaningful, that means, do the work with html5 in the future.
2.Design the web page of studio-5th, i had never did that job before, and i copy the apple’s web design, almost all one page of it.That is one so bad idea, and i will change the page later.When i did this job, i found that, you must think about how is your page’s construction and what main color you want to use.If you did not think it clearly, a serial of troubles will come to with you.

There is one technology calls SVG is used in apple’s official website.
Next time i will share with you what SVG is, how and when you can use it.

How to solve rewrite in ngnix

Posted on October 12, 2011 by wison

Since i bought the vps with ngnix environment, i’m new about it.When i upload my site to the host, i can’t use the rewrite module.
The case is that, i am unable to use linux command and also vim,so i have to learn to deal with it.Finally i find that the rewrite sentences in apache rewrite and ngnix are difference, i change the commands.

The rewrite commands in apache rewrite are:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^.*(.css|.js|.gif|.png|.jpg|.jpeg)$

but in ngnix are:

if  (!-e $request_filename)
{
    rewrite ^(.*)$ /index.php;
}

And here is the command to restart the ngnix service:

/usr/local/nginx/sbin/nginx -s reload

The location of the vhost.conf is ‘/usr/local/nginx/conf/vhost.conf’;
Just modify it and restart the service. I think there is another way to use apache rewrite file in ngnix, if i find out it , i will memory it below.

There is one article about how to exchange apache rewrite commands to ngnix commands:
http://edu.codepub.com/2010/0829/25477.php, hope it is also useful to you.

经典互联网文案

Posted on October 5, 2011 by wison

最近一直在寻找名字，寻找文案，无意中在知乎里面看见此文，经典不容错过。

Apple
少即是多，多则更多。— MacBook
看得见的美，看不见的，更美。— iMac
This changes everything. Again. — iPhone 4
再一次，改变一切。— iPhone 4

Google
Don’t be evil. — Google
电子邮件可以更加直观、高效而实用，甚至可能很有趣。— Gmail
Yor’re awesome! Thanks for trying Google Chrome! — Google Chrome

Twitter
Follow Your Interests. Discover Your World. — Twitter

阿里巴巴
淘！我喜欢。— 淘宝网
没人上街，不一定没人逛街。— 淘宝商城

百度
百度一下，你就知道。— 百度

豆瓣
与喜欢的音乐不期而遇。— 豆瓣电台
此时此刻谁在和你同看一本书。— 豆瓣

饭否
在幻变的生命里，岁月，原来是最大的小偷。等你开饭！爱生活，爱饭否！— 饭否回归

时光
与爱电影的人们共勉：美好的事物永不磨灭。纪念一段被遗失的时光。— 时光回归

搜狐
生活在别处。— 白社会
上搜狐，知天下。— 搜狐
中国最大的门户网站。— 搜狐
相逢的人会再相逢。— 搜狐微博

腾讯
QQ邮箱，常联系。— QQ邮箱
弹指间，心无间。— 腾讯QQ十二年
与其在别处仰望不如在这里并肩。— 腾讯微博
别人问我飞得高不高。只有她，问我飞得累不累。— QQ 邮箱母亲节

天涯
天涯一路同行。— 天涯社区

土豆
人人都是生活的导演。— 土豆

网易
网聚人的力量。— 网易
做有态度的门户。— 网易新闻
无跟帖，不新闻。— 网易新闻

mysql中时间函数应用

Posted on October 4, 2011 by wison

查询一天：
select * from table where to_days(column_time) = to_days(now());
select * from table where date(column_time) = curdate();
查询一周：
select * from table where DATE_SUB(CURDATE(), INTERVAL 7 DAY) <= date(column_time);
查询一个月：
select * from table where DATE_SUB(CURDATE(), INTERVAL INTERVAL 1 MONTH) <= date(column_time);
mysql的日期和时间函数
查询选择所有 date_col 值在最后 30 天内的记录。
mysql> SELECT something FROM tbl_name
WHERE TO_DAYS(NOW()) – TO_DAYS(date_col) <= 30; //真方便,以前都是自己写的,竟然不知道有这,失败.

DAYOFWEEK(date)
返回 date 的星期索引(1 = Sunday, 2 = Monday, ... 7 = Saturday)。索引值符合 ODBC 的标准。
mysql> SELECT DAYOFWEEK(’1998-02-03’);
-> 3

WEEKDAY(date)
返回 date 的星期索引(0 = Monday, 1 = Tuesday, … 6 = Sunday)：
mysql> SELECT WEEKDAY(’1998-02-03 22:23:00’);
-> 1
mysql> SELECT WEEKDAY(’1997-11-05’);
-> 2

DAYOFMONTH(date)
返回 date 是一月中的第几天，范围为 1 到 31：
mysql> SELECT DAYOFMONTH(’1998-02-03’);
-> 3

DAYOFYEAR(date)
返回 date 是一年中的第几天，范围为 1 到 366：
mysql> SELECT DAYOFYEAR(’1998-02-03’);
-> 34

MONTH(date)
返回 date 中的月份，范围为 1 到 12：
mysql> SELECT MONTH(’1998-02-03’);
-> 2

DAYNAME(date)
返回 date 的星期名：
mysql> SELECT DAYNAME(“1998-02-05″);
-> ’Thursday’

MONTHNAME(date)
返回 date 的月份名：
mysql> SELECT MONTHNAME(“1998-02-05″);
-> ’February’

QUARTER(date)
返回 date 在一年中的季度，范围为 1 到 4：
mysql> SELECT QUARTER(’98-04-01’);
-> 2

WEEK(date)
WEEK(date,first)
对于星期日是一周中的第一天的场合，如果函数只有一个参数调用，返回 date 为一年的第几周，返回值范围为 0 到 53 (是的，可能有第 53 周的开始)。两个参数形式的 WEEK() 允许你指定一周是否以星期日或星期一开始，以及返回值为 0-53 还是 1-52。这里的一个表显示第二个参数是如何工作的：

值含义
0 一周以星期日开始，返回值范围为 0-53
1 一周以星期一开始，返回值范围为 0-53
2 一周以星期日开始，返回值范围为 1-53
3 一周以星期一开始，返回值范围为 1-53 (ISO 8601)

mysql> SELECT WEEK(’1998-02-20’);
-> 7
mysql> SELECT WEEK(’1998-02-20’,0);
-> 7
mysql> SELECT WEEK(’1998-02-20’,1);
-> 8
mysql> SELECT WEEK(’1998-12-31’,1);
-> 53

注意，在版本 4.0 中，WEEK(#,0) 被更改为匹配 USA 历法。注意，如果一周是上一年的最后一周，当你没有使用 2 或 3 做为可选参数时，MySQL 将返回 0：
mysql> SELECT YEAR(’2000-01-01’), WEEK(’2000-01-01’,0);
-> 2000, 0
mysql> SELECT WEEK(’2000-01-01’,2);
-> 52

你可能会争辩说，当给定的日期值实际上是 1999 年的第 52 周的一部分时，MySQL 对 WEEK() 函数应该返回 52。我们决定返回 0 ，是因为我们希望该函数返回“在指定年份中是第几周”。当与其它的提取日期值中的月日值的函数结合使用时，这使得 WEEK() 函数的用法可靠。如果你更希望能得到恰当的年-周值，那么你应该使用参数 2 或 3 做为可选参数，或者使用函数 YEARWEEK() ：
mysql> SELECT YEARWEEK(’2000-01-01’);
-> 199952
mysql> SELECT MID(YEARWEEK(’2000-01-01’),5,2);
-> 52

YEAR(date)
返回 date 的年份，范围为 1000 到 9999：
mysql> SELECT YEAR(’98-02-03’);
-> 1998

YEARWEEK(date)
YEARWEEK(date,first)
返回一个日期值是的哪一年的哪一周。第二个参数的形式与作用完全与 WEEK() 的第二个参数一致。注意，对于给定的日期参数是一年的第一周或最后一周的，返回的年份值可能与日期参数给出的年份不一致：
mysql> SELECT YEARWEEK(’1987-01-01’);
-> 198653

注意，对于可选参数 0 或 1，周值的返回值不同于 WEEK() 函数所返回值(0)， WEEK() 根据给定的年语境返回周值。
HOUR(time)
返回 time 的小时值，范围为 0 到 23：
mysql> SELECT HOUR(’10:05:03’);
-> 10

MINUTE(time)
返回 time 的分钟值，范围为 0 到 59：
mysql> SELECT MINUTE(’98-02-03 10:05:03’);
-> 5

SECOND(time)
返回 time 的秒值，范围为 0 到 59：
mysql> SELECT SECOND(’10:05:03’);
-> 3

PERIOD_ADD(P,N)
增加 N 个月到时期 P(格式为 YYMM 或 YYYYMM)中。以 YYYYMM 格式返回值。注意，期间参数 P 不是一个日期值：
mysql> SELECT PERIOD_ADD(9801,2);
-> 199803

PERIOD_DIFF(P1,P2)
返回时期 P1 和 P2 之间的月数。P1 和 P2 应该以 YYMM 或 YYYYMM 指定。注意，时期参数 P1 和 P2 不是日期值：
mysql> SELECT PERIOD_DIFF(9802,199703);
-> 11

DATE_ADD(date,INTERVAL expr type)
DATE_SUB(date,INTERVAL expr type)
ADDDATE(date,INTERVAL expr type)
SUBDATE(date,INTERVAL expr type)
这些函数执行日期的算术运算。ADDDATE() 和 SUBDATE() 分别是 DATE_ADD() 和 DATE_SUB() 的同义词。在 MySQL 3.23 中，如果表达式的右边是一个日期值或一个日期时间型字段，你可以使用 + 和 – 代替 DATE_ADD() 和 DATE_SUB()(示例如下)。参数 date 是一个 DATETIME 或 DATE 值，指定一个日期的开始。expr 是一个表达式，指定从开始日期上增加还是减去间隔值。expr 是一个字符串；它可以以一个 “-” 领头表示一个负的间隔值。type 是一个关键词，它标志着表达式以何格式被解释。

朝CMS策略的发展

Posted on September 6, 2011 by wison

作为曾经的公司开发人员，两年多的时间虽然也经历过不少的项目，做过不少的网站，但一直有遗憾么有亲自开发网站后台程序以及商城的开发。
有时候回想起来，对于离职事件连自己都感觉很突然，刚开始提出的离职被领导提出来的项目有那么一些打动了，后来在经历漫长的两个月时间等待无果后，毅然决然的提出了离职，算起来前后时间也就两天。
回到家中以后由最初的终于可以轻松一下到现在的挺茫然，心理上感觉经历了很长一段岁月。
我也终于有点点体会，每一次恋爱，每一次工作机会都会让人成长很多。
最近，一直忙于修改胖子那套后台程序，水平层次不一样，他写的东西对于我来说还是有点晦涩难懂，尤其是需要修改的时候太浪费时间，因此决定将程序进行修改到自己比较熟悉的风格。
回想以前做过的一些网站，归总以后目前对网站做了如下方面调整：

1、首先是订单功能，新增加了类似购物系统的多订单表，将原来的一个表拆分成客户表和订单表
2、增加了产品和自助栏目中可以上传多图片的功能
3、以前一直觉着类似siteconfig这样的表太过浪费，经常性的一个表里面只会存放一条数据，后来参考wd新建一个param表，将各个参数、配置等信息按照键值对的形式进行存储。新写了类似于jQuery的能set、get的函数来进行操作
4、增加主题选择功能，网站只要有做好的主题可以在后台进行任意更换，但这功能不打算对直接客户开放
5、前几天碰见以后后台增加自助栏目以后可以在左侧作为栏目导航使用，这是对我们之前接触的网站后台程序的一大不同之处，感觉对于网络知识缺乏的客户来说却是挺方便的，也就给引入进来，增加控制开关
6、将留言数据库表进行更改，可以很方便的扩展至产品和新闻留言
7、保留友情链接功能
8、增加数据库控制栏目

未来的计划中，准备介入目前的主流功能，类似博客，以及会员同步等等。
对于这套程序，目前采用的是smarty+面向过程的开发方式，感觉这样对于小型的网站已经可以使用，避免了实用类开发代码冗余的弊端。不过，或许在以后的使用过程中，功能逐渐的增多，也可能会引入面向对象来开发。
感觉越来越向着CMS的方向发展了，未来这套系统功能将会越来越完善，控制越来越灵活，期待中！
忙碌的时间总会感觉很充实，这也许就是劳累命吧。
哈哈，不过挺好的。

美的灯饰上线

Posted on September 2, 2011 by wison

这段时间忙碌了很多事情，经历过工作的愤怒，尝试过敢情的痛苦，从来不敢说自己的经历有多丰富，但也会不禁的沉湎在记忆的长河，时而年幼的可笑，时而年少的疯狂，但仍没有现在的精彩。
“文字能表达一种思想，即使你的思想很丰富，但缺少表达的渲染也就不会让这些思想保留下来”
一直都在计划这每天能写点东西，沉湎的文学的魅力，尽管我更多的还是喜欢小说类的作品，但不能因此剥夺对文学的喜爱。
2011年9月2日，“美的灯饰”正是上线，开始做百度推广，可以说是自从6月31日离职到现在唯一作为自己的事业的事情，尽管目前来看前景渺茫，我更会珍惜这次经历，让这么美好的记录伴随着我的成长，在这里留下记忆的痕迹。
回忆一下当时的情景：

“现在百度推广已经生效了吗？我怎么没有一点感觉啊。”
“你还想有啥感觉，能吃啊”

就这样，我很没有感觉的就开始走走上了这条分岔路口。
感慨：我们经常听别人说，万事开头难，自己也很清楚这个道理，但事情只有自己亲自经历的时候才能切身的体会到，“万事”开头怎么个难发。
鼓励：虽然是不熟悉的领域，但相信自己，珍惜经历！
这段时间在家的时候，就如刚开始“大墩哥”说的那，回家以后就不受控制的生活规律就开始松散下来了，后来每次想停歇下来，不想工作学习的时候，就用这句话来提醒自己：I leave uncultivated today, was precisely yesterday perishes tomorrow which person of the body implored!
这是摘自哈佛图书馆管训里面的一句：我无所事事地度过的今天是昨天死去的人们所奢望的明天！
慢慢的要学会珍惜，珍惜时间，珍惜生命，珍惜亲情，珍惜爱情，珍惜生命！

css属性zoom的使用

Posted on August 3, 2011 by wison

相信很多开发者写css的时候使用过zoom属性，以前也模仿使用过，那时候刚开始接触前端开发，抄过来一段代码就知道能解决什么问题，实现了什么功能，但是对于里面使用的各个属性并不是很了解，也没有很深入的去研究过。
这种现在伴随着我成长了很长一段时间，然后才意识到这其实是一种很大的弊端，很不利于对于技术的研究。反复告诫自己，在研究代码，研究程序的时候尽量要做到彻底弄清楚实现的原理！
今天在看alipay一位前段大虾的博客的时候，又碰到了关于这方面的问题，于是乎，本着不能草草了事，知其然须知其所以然的态度，在网上搜索了一下相关的内容，有很多大致类似的解释和说明，下面摘录修改了一段感觉比较能明确解释其功能的文字：

zoom : normal | number
语法取值
normal  : 默认值。使用对象的实际尺寸
number  : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值
使用说明
此属性仅IE6使用。设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

尤其后半句的说明更加重要，利用这个代码来实现ie6下清楚浮动的功能。网上比较流行的清楚浮动的代码：

.clear:after{ visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0; }.clear{zoom:1}

Developer-Tricks

"SELECT `tricks` FROM `developer-tricks` WHERE `tricks` in ('php','jQuery','HTML5','CSS3');"

Author Archives: wison