到这边一个礼拜了，基本上就绪了，准备开始新的工作，马上就十一月了，做下计划有个良好的开端。
在接下来的十一月要处理的事情还是很多的，工作上和自己的研究目标
工作上
首先是人手问题，项目的开展需要解决人手问题。
其次设计用户注册流程，十一月要把用户注册审批这一块包括功能开发搞定
第三是网站调整，目前网站有很多需要调整的地方
第四网站内容页跟列表页的优化
个人需要研究的
linux服务器平台
phpcms模板深入研究
我的CSS框架的整合
前几天朋友推荐我玩一个小游戏，说他老婆连续几天玩到凌晨三四点了，游戏也不大，才50多M，下下来玩了下，果然不错，像我这种不玩游戏好多年的人也不觉一下玩了三个多小时，网上一查，这个游戏的fans还真不少。强烈推荐！！！
有兴趣的朋友可以去太平洋下载中文版，翻译的不错，很有趣：
http://dl.pconline.com.cn/download/55136.html
ps：要是这游戏有PSP版的多好，休闲娱乐性一定不错
玩S60的手机，证书和签名当然必不可少。
不知道证书和签名作用的可以先看以下帖子
http://bbs.dospy.com/thread-413794-1-1.html
所以获取证书是，玩S60手机的第一步，N79入手后第一件事就是申请证书，以前没玩塞S60的手机，不知道申请证书也不是那么简单的。
现在能申请到证书的网站有以下几个：
http://cer.dospy.com/ 可以直接在线申请，但是只能每天上午11点开始申请，每天只能申请4000个，晚了就申请不到了，我就是老是到时间忘记申请了，最早一次12点去申请也没申请到，对于我这种懒人，只能放弃。
http://zhengshu.zol.com.cn/ 这个需要100手机币，需要在论坛发帖灌水，对于我这种懒人更要放弃了。
http://isign.imobile.com.cn/ 这个即使申请即时就可以使用，唯一的缺点就是没实体证书下载，只能用它提供的在线签名工具签名，好在简单易用，我现在一直用这个了。
N79到手也有一个多礼拜了，基本上研究得差不多了，阴差阳错的就成为了塞班一族。
本来一直在想买个什么手机，像我这种虽然称不上精英的IT人士，当然是要用智能手机，iphone之流用不起，M8之流又不屑，选来选去2000价位的也就htc diamond可以入法眼。研究了几天一直纠结与是买htc diamond还是全键盘的htc touch pro。
谁知道人算不如天算，老天帮我选择了，参加移动的一个活动竟然中了二等奖，得了一台N79，免费送上门的当然不要白不要了。上周一接到通知就冲到了营业厅领了奖。俺现在手机也智能了，oh yeah！
最近一个项目在使用jquery tools在用Flashembed组件的时候，发现了sIFR这个东西，就顺便了解了一下。
一、什么是sIFR?
sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。
二、如何使用sIFR？
sIFR的用法很简单，首先在官方http://www.mikeindustries.com/blog/sifr/下载最新的sIFR版本。然后在页面中引用相关的js（sifr.js和sifr-addons.js，如果用jquery tools则不需要加载这两个js），最后通过js方法将指定选择器按指定的样式来调用即可。具体可以看官方demo和jquery tools上的介绍。
三、最遗憾的，sIFR的局限
讲了这么多，你可能已经心动了吧，我当初了解了以后也是，这个在制作一些企业网站的时候是很有用的，不过最大的问题，目前sIFR不支持中文，主要原因是中文字库太大。不过我想如果能自己做一个只有一个企业站常用字的字库是否可行呢？不过这个还涉及到了字库的制作，不是更麻烦了？还是老老实实用图片先吧，也许在不久的将来随着带宽的提高技术的进步会有更多更好的方案出来，现在还是忍忍吧！
最后羡慕下国外的同行吧！
想了解更多的同志可以去看看：
最近忙着移动网站改版的任务，博客也有近两周没更新了，在这次改版的过程中发现了不少好用的东西将陆续来分享。
今天要介绍的就是一个非常好用的jq的UI库，叫jquery tools，它的官方网站是http://flowplayer.org/tools/index.html这个UI库提供了我们在做网站的过程中需要用到的一些常用JS效果的方案，我试用了一下常用的tab和Scrollable感觉还比较灵活，配合CSS可以实现我们想做的大多数效果。
这个UI库包含了6大工具
1、选项卡功能(Tabs)
2、提示工具条功能(ToolTips)
3、信息滚动功能(Scrollable)
4、遮罩效果(overlay)
5、突出效果(expose)
6、Flash嵌入
http://css9.net/flexible-ui-library-jquery-tools/这个博客上对这个UI库有比较详细的说明，我就不赘述了。有兴趣的可以尝试一下。
今天在做移动新版页面的模板的时候因为页面中用到了很多圆角的效果，基本效果如下：
所以准备做一个圆角的通用模板。考虑到网站中此圆角样式只有两种宽的尺寸370和750，但高度不定所以首先做了一个固定宽高度自适应的模板。
代码如下：
Html部分：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="box"> <div class="box-top"> <h2>宽固定高自适应box</h2> </div> <div class="box-bd"> <ul> <li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li> </ul> </div> </div> |
CSS部分：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .box { width:370px; padding-bottom:3px; background:url("../images/box-round.png") 0 100% no-repeat; } .box .box-top { height:27px; padding:2px 2px 4px; background:url("../images/box-round.png") -370px 0 repeat-x; } .box .box-top h2 { font-size:14px; line-height:27px; color:#1866a6; padding-left:20px; background:url("../images/ico.gif") 5px 7px no-repeat; } .box .box-bd { border-left:1px solid #c6c6c6; border-right:1px solid #c6c6c6; padding:5px 10px 8px; } .box { background-position:0 100%; } .box .box-top { background-position:-370px 100%; } |
提示：你可以先修改部分代码再运行。
如果还要新加一个750宽度的，则要修改一下代码。
html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="width1">
<div class="box">
<div class="box-top">
<h2>宽固定高自适应box</h2>
</div>
<div class="box-bd">
<ul>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
</ul>
</div>
</div>
</div>
<div class="width2">
<div class="box">
<div class="box-top">
<h2>宽固定高自适应box</h2>
</div>
<div class="box-bd">
<ul>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
<li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li>
</ul>
</div>
</div>
</div> |
CSS代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | .width1 { width:370px; margin:20px auto; } .width2 { width:750px; margin:20px auto; } .box { padding-bottom:3px; background:url("http://www.yuwuxing.cn/code/box/images/box-round.png") no-repeat; } .box .box-top { height:27px; padding:2px 2px 4px; background:url("http://www.yuwuxing.cn/code/box/images/box-round.png") repeat-x; } .box .box-top h2 { font-size:14px; line-height:27px; color:#1866a6; padding-left:20px; background:url("http://www.yuwuxing.cn/code/box/images/ico.gif") 5px 7px no-repeat; } .box .box-bd { border-left:1px solid #c6c6c6; border-right:1px solid #c6c6c6; padding:5px 10px 8px; } .width1 .box { background-position:0 100%; } .width1 .box .box-top { background-position:-370px 0; } .width2 .box { background-position:-740px 100%; } .width2 .box .box-top { background-position:-1490px 0; } |
提示：你可以先修改部分代码再运行。
宽度固定，高度自适应的圆角就这样完成了，如果需要宽度也能自适应敬请期待PART II，宽高自适应的圆角边框
今天整理了一下自己之前买的书，有一年多没买书了，不是不想买，而是看之前买的那些都没怎么看，下定决心看完之前买的书再买新的不然就变成了一个“图书收藏家”了。
看着书桌上javascript权威指南上那厚厚的灰尘，我感到自责，三年前就买了这本书，到现在只看了不到100页，买的第四版，现在第五版都出版一年多了。
反思之后，我决定给自己定下一个计划，每天读书至少一个小时。不管工作多忙。
整理了一下尚未读或者没有读完的书：
最近首先要看的就是
javascript权威指南（第四版）
JavaScript DOM编程艺术
每天一小时，从今天开始！
CSS3 Columns属性研究
Columns属性是用来制作类似杂志布局，下面是该属性的简单介绍：
这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：
1 2 3 4 5 6 | -moz-column-count: 2; /* For FireFox */ -webkit-column-count: 2; /* For Safari/Chrome */ column-count: 2; /* For when the standard gets fully supported */ -moz-column-width: 250px; /* For FireFox */ -webkit-column-width: 250px; /* For Safari/Chrome */ column-width: 250px; /* For when the standard gets fully supported */ |
这段代码分别是定义的栏数根每栏的宽度
支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+
属性的使用很简单，比如要做一个宽度固定为800px，4栏的布局可以用如下代码：
1 2 3 4 | width: 800px; -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; |
同样如果要制作一个高度固定为400px，每栏宽度300px的布局可以用如下代码
1 2 3 4 | height:400px; -moz-column-width: 300px; -webkit-column-width: 300px; column-width: 300px; |
但是如果同同时使用了column-width和column-count会有怎么样的效果呢？
我们实验一下最开头的代码，
1 2 3 4 5 6 | -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-width: 250px; -webkit-column-width: 250px; column-width: 250px; |
分别用FF3.5和chrome/safari打开看一下
我们发现chrome/safari是按照设定的每栏宽250px，两栏显示的，但是FF下却成了两栏，但是每栏的宽变成了整个容器的50%的宽度。说明在FF下优先考虑的是容器的宽度。
然后我们再测试一下极端一点的情况：
提示：你可以先修改部分代码再运行。
在限定了高度，栏数，栏宽，字数又超过了的情况下，在FF下，栏宽还是容器宽度的50%，栏宽的限制也不起作用了，唯一起作用的是高度，在chrome/Safari下，栏宽跟高度还是保持，栏数超出设置。这个在使用这个属性的时候都是要注意的。
前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。
原文：9 CSS3 Properties You Can Use Now
当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。
下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。
这个属性使用的属性值是这样定义的：
1 | text-shadow: 2px 2px 5px #000; |
其中第一个和第2个值代表了阴影的偏移量，第3个值代表模糊半径，第4个值代表阴影颜色。
支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+
注：想了解该属性详细情况可以查看之前的一篇文章CSS文字阴影效果
这个属性跟文字阴影有点相像，但是又有一些区别，它可以作用于一块区域的阴影效果，而不像文字阴影只能作用文字区域。它的属性值是如下所示定义的：
1 | box-shadow: 5px 5px 10px 10px #000; |
前两个属性值代表阴影的便宜量，第3个值代表模糊半径，第4个值代表阴影的扩散半径，第5个值代表阴影的颜色值。
支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+
这个属性虽然被列入CSS3属性中，但是还尚未广泛支持CSS3的规格。
这个属性相对比较简单，包含了3个属性值，content-box、border-box和inherit。
1 | box-sizing: content-box | border-box | inherit; |
在浏览器行为中，默认情况下为content-box，内容显示的大小实际上是内容、填充、边界以外指定的宽度和高度，所以一个有20px宽度内容、1px边界以及5px的间距实际上会被当成总宽度为20+1+1+5+5=32px。
所以利用这个属性，如果我们定义为border-box，那边界和边距将会被定义在元素之内，上面举的例子中，总宽度将会被当成20px，这个在实际布局中很有用。
支持此属性的浏览器：IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+
这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：
1 2 3 4 5 6 | -moz-column-count: 2; /* For FireFox */ -webkit-column-count: 2; /* For Safari/Chrome */ column-count: 2; /* For when the standard gets fully supported */ -moz-column-width: 250px; /* For FireFox */ -webkit-column-width: 250px; /* For Safari/Chrome */ column-width: 250px; /* For when the standard gets fully supported */ |
这段代码告诉我们，内容将会以2列展示，每一列250px宽。
支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+
因为很多人都很喜欢圆角，但是在CSS3之前就不得不使用图片来实现很多效果，所以在CSS3中加入了这个属性，收到了大家的欢迎，但是在Mozilla 和 Webkit 核心浏览器中仍然需要他们自己的前缀，属性书写如下：
1 2 3 | -moz-border-radius: 10px; /* For FireFox */ -webkit-border-radius: 10px; /* For Safari/Chrome */ border-radius: 10px; /* For when the standard gets fully supported */ |
支持此属性的浏览器：Safari 3.1+, FireFox 2.0 (non-antialiased), FireFox 3.0+, Chrome 1.0+ (non-antialiased)
这个属性没有像Border-radius这个属性那么频繁的被使用，因为在理解上还是有点困难。但是对于一些特殊的效果，用这个属性就很合适：
1 2 | -webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch; -moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch; |
需要查看这个属性的更多细节，请点击：his full article
浏览器对于此属性的支持：Safari 3.1+, FireFox 3.5, Chrome 1.0+
这个属性是说用户可以自定义一些个性字体，为了包含自己定义的字体，可以通过这个属性进行定义：
1 2 3 4 | @font-face { font-family: "My Awesome Font"; src: url(MyAwesomeFont.otf) format("opentype"); } |
然后可以通过下面的形式进行引用：
1 | h1 { font-family: "My Awesome Font", sans-serif; } |
支持此属性的浏览器：Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+ (sort of)
这个属性还是值得一提的，之前我们定义背景颜色，就是一个颜色值，但是通过CSS3的这个属性，如果你想定义一个透明度为50%的一个背景色，就会很容易实现：
1 | background: rgba(0, 0, 0, 0.5) |
浏览器对于此属性的支持（不包含滤镜）：Safari 3.1+, FireFox 2.0+, Chrome 1.0+
这个属性可以让你实现一些之前必须用图片实现的效果，比如说线性渐变之类的：
1 2 3 4 5 6 7 | #element { opacity: .7; -webkit-transition: opacity 1s linear; } #element:hover { opacity: 1; } |
以前都是CSS3属性中加入的属性，对我们在工作当中都有了一个很好的帮助。
最近评论