完美骑士的天空城堡

腾讯公益慈善基金会、腾讯网联合中国红十字会李连杰壹基金计划开展网络在线捐赠

z-knight@qq.com(完美的骑士) — Wed, 14 May 2008 09:21:19 +0800

不在乎多少，尽自己的能力，愿意给汶川人民捐款的点下面的链接。

腾讯公益慈善基金会、腾讯网联合中国红十字会李连杰壹基金计划开展网络在线捐赠活动：　

http://gongyi.qq.com/juanzeng/llj_dizhen.htm

人在自然面前显得这么渺小，众志成城，希望汶川人民早日度过难关！

基于 CSS 的 ASCII 艺术

z-knight@qq.com(完美的骑士) — Wed, 07 May 2008 20:00:23 +0800

ASCII 艺术是一种使用计算机可打印字符（一般为ASCII码中的96个可打印字符）表现图形的一种技术，传统的 ASCII 艺术基于 HTML 代码，然而由于不同浏览器的差别，在一种浏览器下可以完美显示的 ASCII 艺术，到了别的浏览器就面目全非，Web2.0 时代，应该多在 CSS 上做文章，因为目前主流浏览器对 CSS 的支持都非常一致，使用 CSS 实现 ASCII 艺术可以更好地保持不同浏览器间的兼容。

下面这个图很难想象是用 ASCII 艺术做出来的，当然为了简便，我使用的是图片，原始 ASCII 艺术版可在这里看到。

jpeg2css 是一个非常有趣的程序，你提供一副黑白的 JPG 图片给它，几秒种之内，可以为你生成一个 HTML 网页文件，你可以在该网页上看到和源 JPG 图片几乎一模一样的 ASCII 艺术图形，而且是基于 CSS 的，你不用担心该 ASCII 艺术在不同浏览器间的兼容问题。

更多基于 CSS 的 ASCII 艺术（CSS 原始版可以在这里看到）

jpeg2css 下载地址：
http://www.romancortes.com/ficheros/jpeg2css.zip

O2 cocoon

z-knight@qq.com(完美的骑士) — Tue, 06 May 2008 09:34:02 +0800

独一无二「治愈系」手机∶

手机似乎和好莱坞电影一样，走进了创意用尽的死胡同，不是一窝蜂镜面，就是不再新奇、已经看很腻的双面设计。来自英国的 O2 有更好的点子，弄了这部「茧」O2 Cocoon 出来，有自然美感、3.5G 通讯技术和顶尖影音效能，配上独一无二的大师级配件，世界仅有的 3.5G「治愈系」美机就这麽诞生了。

不像手机，也不是 MP3

O2 说要带来「不一样」的手机，Cocoon 可真的成功了。O2 研发团队向来自世界各地的设计师、艺院学生和音乐人取经，做了这部「具自然风味、看起来不像手机或 MP3，又有强大功能」的 Cocoon，将天马行空的设计草图在生活中实现

一般谈到「茧」，我们会想到「破茧而出」这种词，如果这是 MOTO 的手机，可能会有一大堆特异功能从开了的茧里头飞出来。但 O2 很低调，没有特效加工，Cocoon 就静静地挂在树上，缓缓晃动，配上低吟的微风和流水声，优雅又舒服。

有生命的 LED 外置显示幕

Cocoon 纯白的外壳很吸引人，外壳 LED 灯号显示则让手机更具生命力。这片 LED 可显示很大的英数字型，科技蓝光在白色机壳上闪耀更是魅力满点。当它显示「HELLO」，好像真有「手机是活的」这种感觉，就如电影里的外星科技走到现实世界一样奇妙。

外盖除了说 HELLO，当然还有其它功用。不免俗，它要显示来电者、MP3 资讯、日期时间和简讯提醒。特别注意，上头还有 5 个小小的提示灯，即时显示手机状态。

反潮流的大「茧」

养过蚕宝宝的人都知道，最後蚕结出来的茧，和 Cocoon 这个白白胖胖圆滚滚的「茧」还挺像，但 Cocoon 可是个「巨茧」！94 x 49 x 21 mm 的尺寸，问题只在厚度，尤其 Cocoon 又是圆身，体积又被放大些，再加上 114g 的重量，非同小可。

2.2 寸 QVGA 大萤幕 + 极简按键

Cocoon 是部 3G 加 HSDPA 手机，因此在它的 2.2 寸 QCGA 大萤幕角落，出现了一颗 30 万画素视讯相机，让你打影像电话。按键部分，Cocoon 只用黑底、白字带过，简单有力，铺排则有点像韩系手机。据说 Cocoon 是由 Pantech 设计制造，看来直觉是正确的

200 万 AF + 500 首 MP3 + 2 GB 记忆体

这部特别的手机卖点不只有外型，摊开影音配备一看，你可能会大吃一惊。Cocoon 配备 200 万画素自动对焦相机，可拍下清晰影像，也能录制不限时的有声影片。

音乐更不得了，Cocoon 有完整的 MP3 播放器、FM 收音机和免费 Hi-Fi 耳机，内建 2 GB 记忆体，可存放 500 首音乐。为了彰显个性，Cocoon 预先载入的免费音乐也刻意和别人做区别。三星选了碧昂丝，个性派 Cocoon 则选上了知名乐团 Ash、The Doors 和蓝调歌手 Paolo Nutini，附赠的 MP3 和影片，一点也不落俗套。

鸟巢充电底座精品床头闹钟

Cocoon 设计前卫，卖价又贵，配件自然不马虎。O2 为它设计了一个超 cool 的底座「The Nest」，也就是「巢」。这个「巢」让手机横躺上去後，不只充电，手机还会变型成床头闹钟，自动切换至扩音模式，在指定时间用铃声或 FM 广播叫醒你，外盖还有「Good Morning」跑马灯问候（下午说 HELLO），够正点吧！

其实 Cocoon 与 O2 在台湾上市的手机很不一样，它并不是采用微软 Windows Mobile 介面的机种，而是不折不扣的一般手机，因此它的手机介面就如同其他 feature phone 一般简洁，配色上也十分具有科技感。但 Cocoon 有极大的可能不支援中文显示，想购入的朋友可能要三思了。

Cocoon 目前仅在英国上市，空机一部卖 299.99 英镑，折合台币要 19,800 元，而且还不包含运费喔！至於会不会在台上市，由於亚太区 O2 对台策略是「只卖智慧手机」，所以 Cocoon 注定与我们无缘，邻近的香港也不会有，读者只能从英国 eBay 或代标公司下手了，最便宜大概卖 260 英镑，也要台币 1.7 万元。

我们找到了几张 Cocoon 的真机照片，很罕见，因为 Cocoon 在英国也开卖没多久，网路上可找到的资源并不多。从照片看来，Cocoon 真机和图片一样精致（也很巨大），包括外 LED 显示和细致的白色机身。

盒装也是树枝图案，再挂著「茧」的造型，和崇尚自然的 SE S500i 相比，Cocoon 显然美得更另类。右边那张图应该是曝光过久了，所以 LED 灯光晕散许多，不过还是很美，光是这些灯泡就能收服很多挑剔玩家了！

3种方法实现的圆角边框

z-knight@qq.com(完美的骑士) — Mon, 05 May 2008 20:03:15 +0800

最近工作种经常要用到圆角的边框，所以就写了几个实现方法，有用图片的，也有不用图片的，估计大家都会，仅仅是做个存档的目的。

预览地址

先看图片，第一种要用到的图片：

第一种方法用的是九宫格技术，原理就是通过背景图片的百分比定位，用四个div进行嵌套，然后给最外层的div背景颜色，这个方法的自适应很好，横向纵向都能自适应。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body{ margin:0; padding:0; font-size:12px; line-height:1.8em; }
.lt{ background:#014477 url(<a href="http://www.zknight.net/attachments/month_0805/u20085519402.gif" target="_blank">http://www.zknight.net/attachments/month_0805/u20085519402.gif</a>) 0 0 no-repeat;}
.rt{ background:url(<a href="http://www.zknight.net/attachments/month_0805/8200855194015.gif" target="_blank">http://www.zknight.net/attachments/month_0805/8200855194015.gif</a>) 100% 0 no-repeat;}
.lb{ background:url(<a href="http://www.zknight.net/attachments/month_0805/8200855193949.gif" target="_blank">http://www.zknight.net/attachments/month_0805/8200855193949.gif</a>) 0 100% no-repeat;}
.rb{ background:url(<a href="http://www.zknight.net/attachments/month_0805/y200855194011.gif" target="_blank">http://www.zknight.net/attachments/month_0805/y200855194011.gif</a>) 100% 100% no-repeat; padding:20px; color:#FFF;}
</style>
<title>圆角边框</title>
</head>

<body>
<div class="lt">
  <div class="rt">
   <div class="lb">
    <div class="rb">
    佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器，新的9点自动对焦系统中央一点为十字检测点，搭载了流行的Liveview功能，3英寸LCD，DIGIC III处理器的高性能再加上套机5500左右的市场售价，在入门级数码单反相机中极具吸引力，新加入了点测，反光板预锁等以往在入门级机身上很难出现的功能，可以预测，EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细，握持手感好，按键排布合理，操控便捷，人机界面友好，功能强大，性价比高，LCD效果良好，色彩还原准确，ISO100-ISO800成像质量都较为优秀，噪点轻微。     
    </div>
   </div>
  </div>
 </div> 
 <p>这个圆角框可以自由伸展，四个方向都能自适应（拖动浏览器大小试试）</p>
 <p><a href="<a href="http://www.zknight.net" target="_blank">http://www.zknight.net</a>">返回骑士的博客</a></p>
 </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

第二种方案比较常见，也比较简单，分做上中下三个部分，固定宽度，高度自适应，现在大部分网站的圆角都使用这个方法来做：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body{ margin:0; padding:20px; font-size:12px; line-height:1.8em; }
.yuanjiao2{ width:427px;}
.yuanjiao2 div.top{ background:url(<a href="http://www.zknight.net/attachments/month_0805/020085520740.gif" target="_blank">http://www.zknight.net/attachments/month_0805/020085520740.gif</a>); height:14px;}
.yuanjiao2 div.c{ background:#014477; color:#FFF; padding:6px 20px;}
.yuanjiao2 div.bottom{ background:url(<a href="http://www.zknight.net/attachments/month_0805/020085520744.gif" target="_blank">http://www.zknight.net/attachments/month_0805/020085520744.gif</a>); height:14px;}
</style>
<title>圆角边框</title>
</head>

<body>
 <div class="yuanjiao2">
  <div class="top"></div>
  <div class="c">
  佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器，新的9点自动对焦系统中央一点为十字检测点，搭载了流行的Liveview功能，3英寸LCD，DIGIC III处理器的高性能再加上套机5500左右的市场售价，在入门级数码单反相机中极具吸引力，新加入了点测，反光板预锁等以往在入门级机身上很难出现的功能，可以预测，EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细，握持手感好，按键排布合理，操控便捷，人机界面友好，功能强大，性价比高，LCD效果良好，色彩还原准确，ISO100-ISO800成像质量都较为优秀，噪点轻微。  
  </div>
  <div class="bottom"></div>
</div>
 <p>这个圆角框可以上下伸展，高度自适应，宽度固定住</p>
<p><a href="<a href="http://www.zknight.net" target="_blank">http://www.zknight.net</a>">返回骑士的博客</a></p>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

第三种方法不用到图片，原理是通过div的嵌套和div设置的margin值的递增来实现圆角，代码如下：

HTML代码

<body>
<div id="nifty">
 <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div></div>
 <span class="text">佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器，新的9点自动对焦系统中央一点为十字检测点，搭载了流行的Liveview功能，3英寸LCD，DIGIC III处理器的高性能再加上套机5500左右的市场售价，在入门级数码单反相机中极具吸引力，新加入了点测，反光板预锁等以往在入门级机身上很难出现的功能，可以预测，EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细，握持手感好，按键排布合理，操控便捷，人机界面友好，功能强大，性价比高，LCD效果良好，色彩还原准确，ISO100-ISO800成像质量都较为优秀，噪点轻微。 </span>    
 <div class="rbottom"><div class="r5"></div><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>

<p>这个圆角框可以自由伸展，四个方向都能自适应，而且，不用图片</p>

<p><a href="<a href="http://www.zknight.net" target="_blank">http://www.zknight.net</a>">返回骑士的博客</a></p>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

---------------------------分割线--------------------------
by gemini :

第一种方法是IE6下的一个bug，但是这个bug一般情况下只有在运用了position之后才会产生，这里没有position的存在不知道为什么也会出现，具体原因有待研究。
先说解决方法，
针对IE6给一个HACK
* html p{ position:relative;}
还有一个方法
.lt{ background:#014477 url(http://www.zknight.net/attachments/month_0805/u20085519402.gif) 0 0 no-repeat; zoom:1;}
通过这个方法能够解决来看，还是haslayout的问题

Pink Floyd《Money》-偷天换日主题曲

z-knight@qq.com(完美的骑士) — Thu, 01 May 2008 23:35:30 +0800

播放音频文件

在线播放

歌词：
Money, get away.
Get a good job with good pay and you’re okay.
Money, it’s a gas.
Grab that cash with both hands and make a stash.
New car, caviar, four star daydream,
Think I’ll buy me a football team.

Money, get back.
I’m all right Jack keep your hands off of my stack.
Money, it’s a hit.
Don’t give me that do goody good bullshit.
I’m in the high-fidelity first class traveling set
And I think I need a Lear jet.

Money, it’s a crime.
Share it fairly but don’t take a slice of my pie.
Money, so they say
Is the root of all evil today.
But if you ask for a raise it’s no surprise that they’re giving none away.

“HuHuh! I was in the right!”
“Yes, absolutely in the right!”
“I certainly was in the right!”
“You was definitely in the right. That geezer was cruising for a bruising!”
“Yeah!”
“Why does anyone do anything?”
“I don’t know, I was really drunk at the time!”
“I was just telling him, he couldn’t get into number 2.
He was askingwhy he wasn’t coming up on freely,
after I was yelling and screaming and telling him why he wasn’t coming up on freely.
It came as a heavy blow, but we sorted the matter out”

点击下载歌曲

xiaoxiao新婚大喜~

z-knight@qq.com(完美的骑士) — Tue, 29 Apr 2008 21:27:15 +0800

"云柯得露开双蕊天骨凝香结百年静夜月圆",这是xiaoxiao的qq签名.

xiaoxiao的博客头部，很有感觉

生日

z-knight@qq.com(完美的骑士) — Mon, 28 Apr 2008 12:55:19 +0800

先是吃、喝，然后去唱歌。凌晨回到家，我就去了趟卫生间，出来一看，生日蛋糕的蜡烛都点起来了！

这帮鸟人也没提醒我要许愿，直接就把蜡烛吹了，吃了。

你看我们搬新家了，沙发看起来很安逸吧~宜家的！你看连标签都还没来得及撕掉！晚上点上那个落地台灯，倒上一杯酒，手里再捧个书，往那沙发上一坐，享受。。。到时候看看再养个狗，一手捧书，另一只手就时不时时伸出来摸摸狗头什么的…

这土狗一看就知道是个吃货

又老了一岁

z-knight@qq.com(完美的骑士) — Sat, 26 Apr 2008 18:11:06 +0800

昨晚12点一过，收到短信，打开一看-生日快乐

哎呦，原来我又老了一岁了，这段时间忙的焦头烂额，几乎快忘记了，只知道生日大概是这几天。

生日，我们呱呱落地的那天，是母亲的受难日，所以一直都不认为有什么应该庆祝的。父母不单赋予了我们生命，还要负责我们的吃喝拉撒，成长，一切都要他们来操心。不管我们多大，父母总是为我们永远操着心。

所以，要说一声：妈妈，辛苦了。

都说生日要许愿望，我就许两个吧，第一个是希望家人身体健康；第二个希望自己能有所成就。

加油加油~

怎样才能设计简洁、漂亮的网页

z-knight@qq.com(完美的骑士) — Sat, 26 Apr 2008 14:20:41 +0800

【译者的话】虽然你一心想设计简洁的作品，但更多的时候却是苍天弄人：客户往往给你很多的信息要求加在设计上。信息众多并不能成为做不好设计的借口。在本文中，我们将深入发掘迈阿密大学艺术科学学院的网页设计，看看我们能够从中学到什么宝贵的经验。

迈阿密大学的艺术科学学院网页通过细节的精心处理给人一种赏心悦目的视觉效果。

最好的设计往往就是最简单的设计：一个中心思想，一幅图片，少量的文字，开放的空间。这种风格的设计清晰、漂亮，让人印象深刻。
但真实的生活并不经常是如此的简单，更多的是杂事缠身。在设计一个项目时，往往需要将很多不同的信息同时放上去，一个都不能少，就象现在很多的网站一样，信息密集，显得非常拥挤复杂。

在本文中，我们将介绍迈阿密大学的艺术科学学院网站的版面，它之所以吸引我们的注意，是因为该网站虽然有很多信息，但却给我们留下美好的印象。该网站通过两个途径实现这种效果：一，它尽可能地减少各种元素，只保留最重要的部分（其实仍然是“简单的设计”思想在起作用），二，就是在处理各种细节时都经过精心处理。这种设计手法在技术上其实一点不难，让我们进去看看：

主页虽然多达二十多个链接，但整体却显得温和，协调一致。

结构：

网站的页面尺寸并没有走极端，不会太长，大多数页面上的内容不需要拖动就可以轻易浏览，是一种方便人们阅读的屏幕尺寸。每个页面由三个区域构成，每一个区域负责不同的信息，最上方及最下方的区域内容是固定的，改变的只是中间区域的内容。

不同的颜色定义了不同的区域：白色区域是中心舞台，这个区域通过上方颜色较深的页眉与下方较浅的页脚而得到确定。固定内容的区域包含了各种最基本的元素：标志，链接，搜索等诸如此类的内容。中间白色区域的内容则是变化的，主要展示不同的事件信息、新闻简讯等内容。从下方示意图可以看出，这个页面结构相当紧凑，可以有效组织各种内容，比起那种需要拖动滚动条的页面更容易阅读。紧凑，是其中的关键。

页眉：

此外由两个色带构成：绿色及棕色。这两种颜色构成了一个简单坚实的页眉并统领着这个网站。标志及链接文字则反转成白色字体。为了柔和视觉效果，左方还使用了象是阳光照射所呈现的一个非常微弱的渐变面。

页眉右方远处有四个固定的链接，文字的颜色显得相当低调，但由于处于页眉的区域内，没有人会忽视它的存在。

主链接：

第一级链接处于页眉的标色色带区域内。链接的字体、颜色及阴影与上方的标志呼应，使两者之间产生视觉上的联系。

绿色及棕色当然是两种不同的颜色，但如果你将这两种颜色变成灰度显示，你可以发现他们的相同之处，其灰度色值是基本一样的，这个隐藏的共同点使两者在视觉上既有区别，又有联系。

下图中，字母的间距比较宽松，与普通的字母间距相比，呈现一种轻松气息，也传达了一种从容及尊严。在屏幕显示时，字母间距较大也更容易阅读。

次级链接：

当浏览者深入这个网站时，字体字母及颜色在细节上的变化都在暗示读者这是另外的一些信息。但字体及尺寸仍然与主链接相同。

中心舞台：

在页眉与页脚之间的白色区域是我们的中心区域，也是这个网站的视觉焦点所在。在每一个页面中的文章，都显得相当简短，而且象印刷的书本那样的文字排版，行距非常大，采用衬线字体，整个页面显得清爽而不窒息。其书本气息让人能够舒适阅读。

页脚：

有效设计的页脚是可以发挥很大的作用的。不要将页脚想象成一条多出来的“尾巴”，而应该将它看作是一个支撑点，支撑着上述所有内容的一个区域。页脚区域中放置的也是一些固定不变的内容，如链接、联系信息及标志等。

在设计中，层次感是非常重要的。上图左，如果将页眉与页脚设计成相同的份量，给人的感觉就象奥利奥夹心曲奇饼，它分散了读者的注意力，弱化了版面的力量感。相反，三个区域呈现层次感使到每个区域都能够正确承担起自己的任务。在脑海中一定要记住的是，读者的眼睛永远会集中在中心区域内，所以这里要放置最重要的信息。周围所放置是支持性的内容。

字体：

这个网页中，正文的字体全部采用Georgia字体，可以说是一种在屏幕上显示的最佳衬线字体，当样，Georgia作为印刷字体同样表现良好。中国设计者在使用英文字体时更多会采用默认的Times字体。

让我们看看Georgia字体与Times字体的区别，从这种区别中，也可以知道为什么在屏幕上显示时，Georgia字体会赢了这一回合。

字母的间距与字母形状一样重要， Georgia字体用于正文时，整体显得平滑、重复及具有节奏感。

试比较以下两者的观看感觉。

综上所述，Georgia字体是一种在线观看时表现突出的字体。Times字体当初设计时还没有迎来电子时代，所以它主要是用于印刷。而Georgia字体则是专门为屏幕观看而设计的字体，就算在低分辨率的情况下，仍然表现出众。在上图中，当Times字体在屏幕显示时，总给人一种起伏及断续的感觉。但就算用于印刷，Times字体其细小的衬线及弧线仍然给人一种过于锋利及不连贯的感觉。

阿密大学艺术科学学院网址：http://www.as.miami.edu

本文所用颜色如下：

本文由logosky.net设计师陈汉聪编译，转载请注明出处

分享ffffound漂亮的图片

z-knight@qq.com(完美的骑士) — Tue, 22 Apr 2008 13:37:33 +0800

偶然发现了这个网站，http://ffffound.com，f多了一点，里面的图片多到不行。有闲的人就幸福了，可以看上一整天。
随便找了几张来给大家分享一下