纯粹的灵魂 http://www.purelife.cn www.purelife.cn Tue, 04 Aug 2009 02:43:06 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 把Opera打造成手机样式的wap浏览器的实现方法 http://www.purelife.cn/2009/07/29/opera-wap-phone-style/ http://www.purelife.cn/2009/07/29/opera-wap-phone-style/#comments Wed, 29 Jul 2009 09:58:24 +0000 purelife http://www.purelife.cn/?p=212 经常使用PC访问wap网站或者做wap网站开发测试的朋友知道，opera几乎是PC上最方便易的wap浏览工具。
但是opera默认访问wap的效果是比较差的，如下图所示。
Opera访问wap版网易的效果
并且在opera上很难了解到wap页面在真实手机上的呈现效果，比如换行字数、图片宽度、浏览效果、屏幕高度等…

在了解到控制wap访问效果的只是一个css文件后，我决定操刀对其进行修改。
经过努力，我实现了以Nokia E51为背景的模拟手机浏览器的效果（页面区域遇长页面会自动出现滚动条）

实现步骤：
1. 下载css文件Opera wml css style 可右键另存为
2. 关闭正在运行的opera
3. 打开opera的安装目录（通常为C:\Program Files\Opera\Styles）
4. 使用附件里的wml.css文件覆盖掉原有的同名文件
5. 启动opera浏览器，打开http://wap.163.com来查看效果，是不是OK啦：）

效果如下图所示：
把opera打造成手机样式的wap浏览器的实现方法

标签：

相关日志

]]> http://www.purelife.cn/2009/07/29/opera-wap-phone-style/feed/ 2 2008年50个最佳CSS设计 http://www.purelife.cn/2008/12/08/best-of-css-design-2008/ http://www.purelife.cn/2008/12/08/best-of-css-design-2008/#comments Mon, 08 Dec 2008 06:00:16 +0000 purelife http://www.purelife.cn/?p=144 这50个CSS网站是由WebDesignerWall评选出来的，很具参考价值。我们在欣赏的同时，也能从中吸取很多灵感，也能从它们的源代码中学习更高级的CSS技术。今年，越来越多的设计师开始使用超大的背景图片技术和一些JavaScript框架（如jQuery及MooTools）来提高用户体验。还有一些设计师将Flash和CSS混合使用。也许我们能从中发现2009年的新网页设计趋势？

Let It Bleed

巨大而醒目的图片使得这个网站鹤立鸡群。

2009-网页设计-趋势

Vermont Coffee Works

很好的混合使用了Flash和CSS。

css-欣赏


Digital Mash

2008-css-网站


Good

很好的视觉和内容聚焦设计。

css-实例


Wilson Miner

css-设计


DrupalCon, DC

外国-css-实例


Future of Web Apps – Miami 2009

完美的将超大字体与破旧风格效果混合在了一起。

css-欣赏


Housing Works

在首页使用了很漂亮的超大背景图。超大背景的网页设计最近比较热门。

2008-css-网站

Future of Web Design – NYC 2008

另一个超大背景图设计的实例。

css-实例


Tennessee – Fall

我不得不承认，Tennessee的网站的确是一个相当棒的系列设计——秋天、春天、夏天和冬天。

css-实例


Tennessee – Spring

css-设计


Tennessee – Summer

外国-css-实例


Tennessee – Winter

css-欣赏


Five Runs

2008-css-网站


Branded07

css-实例


Cappuccino

具有非常好的可用性的且很有组织性的网站。

css-设计


LightCMS

LightCMS公司的一些铅笔/速写效果，网站上仍然能体现他们公司的感觉。

外国-css-实例


The First Twenty

非常漂亮的单页设计。

css-欣赏


YouLove.Us

非常完美的使用CSS和JavaScript(jQuery)

2008-css-网站


Luke Larsen

Luke Larsen的水族馆主题很好的证明如何使用好jQuery的Scrollto 插件.

css-实例


Design Disease

波浪和各种圆形让这个网站变得很生动有趣。

css-设计


Adaptd

虽然设计风格让我想起了ISO50 (Scott Hansen)，但它仍然值得推荐。

外国-css-实例


Jason Santa Maria

css-欣赏


Electricurrent

这个网站证明了如何使用超大背景图片来展现摄影作品。

2008-css-网站


Training by Collective Idea

css-实例


MacAllan Ridge

很好的视觉设计，简单的导航！棒极了！

css-设计


Pikaboo

组合了CSS、JavaScript和Flash的非常酷的设计。

外国-css-实例


Mochi Ads

css-欣赏


Volll

2008-css-网站


Fling Media

css-实例


eWedding

css-设计


Viget

Viget很好的在他们的系列博客中保持了他们的品牌形象——Inspire, Advance, Engage, and Extend.

外国-css-实例


Viget – Inspire

css-欣赏


Viget – Advance

2008-css-网站


Viget – Engage

css-实例


Viget – Extend

css-设计


August

使用了Flash可扩展背景图片的惊人设计（调整浏览器的尺寸可看到扩展后的背景图）

外国-css-实例


Car Freaks

这个博客会经常更换他们的首页背景图片来保持新鲜感。

css-欣赏


Go To China

这个一个使用高清晰度照片作为网站背景图的完美实例。在调整浏览器大小后网站的背景图也会随之扩展。（使用JavaScript CSS实现）

2008-css-网站


Jesus Christ

css-实例


Billy Hughes

css-设计


Free People

FreePeople 是我一直很喜欢的设计（喜欢它的拼贴风格）

外国-css-实例


Mouse to Minx

复古…性感…

css-实例


Dara’s Garden

css-设计


Design Sponge

剪贴薄设计风格与网站的内容很好的结合。

外国-css-实例


Ma.tt

css-欣赏


The Lippincott

2008-css-网站


Hot Meteor

喜欢它的复古字体。

css-实例


Fortyseven Media

css-设计


The Old State

很少能找到这样漂亮的黑白主题。

外国-css-实例

英文原文:Best of CSS Design 2008

标签：,

相关日志

  • 无相关日志
]]> http://www.purelife.cn/2008/12/08/best-of-css-design-2008/feed/ 10 鸟巢 http://www.purelife.cn/2008/10/14/the-national-stadium/ http://www.purelife.cn/2008/10/14/the-national-stadium/#comments Mon, 13 Oct 2008 16:48:46 +0000 purelife http://www.purelife.cn/?p=109
去看鸟巢

标签：

相关日志

  • 无相关日志
]]> http://www.purelife.cn/2008/10/14/the-national-stadium/feed/ 3 我在海边 http://www.purelife.cn/2008/09/18/sea/ http://www.purelife.cn/2008/09/18/sea/#comments Wed, 17 Sep 2008 16:23:57 +0000 purelife http://www.purelife.cn/?p=100 我在海边
看海

天空
天空

标签：

相关日志

  • 无相关日志
]]> http://www.purelife.cn/2008/09/18/sea/feed/ 5 在Flash中如何画圆角矩形（很多人都不知道哦~） http://www.purelife.cn/2008/08/19/flash-rounded-rectangle/ http://www.purelife.cn/2008/08/19/flash-rounded-rectangle/#comments Tue, 19 Aug 2008 08:18:21 +0000 purelife http://www.purelife.cn/?p=90 Flash CS3中圆角矩形的绘制最近使用flash做一个动画，自然而然就要用到圆角矩形
最开始在工具栏里没有看到圆角矩形选框功能，心里虽然疑惑（这么大牌的设计软件，居然会没有如此重要的功能？），但没来的及仔细研究
脑袋里也考虑过Illustrator里的圆角矩形是可以在绘画中按方向键上、下（↑、↓）来控制圆角的大小，可是没有在flash里尝试
后来使用Photoshop里做出来的圆角矩形图片代替之

后来需要用flash做的事情越来越多，开始不得不研究一下flash的圆角矩形的实现
乍一搜，很多flash的专业网站都没有给出答案，要么说不知道，要么给出一段AS代码，说是用代码来实现，靠！

下面给出实现方法：

在你拖出矩形框的时候，先不要松开鼠标左键，用左手按键盘方向键的上下键，这就是调节矩形圆角的弧度的。
注：方向键往下是增加圆弧，往上是缩小圆弧直至成为标准矩形。如果是flashCS3版本的话，就会出现内弧。

另外，在属性里也是可以直接输入圆角半径的数值进行精确控制圆角的大小
在这里，你甚至可以使四个圆角各使用不同的半径值，比如（10，0，0，0）就可以画出只有左上角为半径10px的圆，其他几个角为直角的特殊形状

说了这么说，相信您对类似的形状应该能应付自如了

好，下面布置一篇作业：
使用flash中的矩形工具如何快速画出一个盾牌的形状？请童鞋们回去之后认真完成！

Flash CS3 圆角矩形属性设置

标签：, ,

相关日志

]]> http://www.purelife.cn/2008/08/19/flash-rounded-rectangle/feed/ 3 使用Redirect或urlRewrite在.htaccess文件里设置301转向 http://www.purelife.cn/2008/04/30/redirect-urlrewrite-htaccess/ http://www.purelife.cn/2008/04/30/redirect-urlrewrite-htaccess/#comments Wed, 30 Apr 2008 14:48:26 +0000 purelife http://www.purelife.cn/?p=89 >http://your_domain.com/blog 让连接到/wordpress的连结重新定址到/blog，包含下层路径 例如：http://vinta.ws/wordpress/?p=334会被指向http://vinta.ws/blog/?p=334 在.htaccess中要这么写： Redirect /wordpress http://your_domain.com/blog 如果有安装mod_rewrite模组的话，也可以这样写： RewriteEngine on RewriteRule ^wordpress(.*)$ /blog$1 [R=301,L] 【情况二】http://your_domain.com/wordpress>>http://your_domain.com 让连接到/wordpress的连结重新定址到根目录，包含下层路径（如/wordpress/xxx） 在.htaccess中要这么写： Redirect /wordpress http://your_domain.com 如果有安装mod_rewrite模组的话，也可以这样写： RewriteEngine on RewriteRule ^wordpress(.*)$ $1 [R=301,L] 【情况三】 http://old_domain.com/>>http://new_domain.com/ 让连接到旧网址的连结重新定址到新网址，前提是你必须是旧网址的拥有者 建议让旧网址和新网址包持相同的目录结构 把.htaccess放到旧网址的根目录，然后要这么写： RewriteEngine on RewriteRule (.*) http://new_domain.com/$1 [R=301,L] 【情况四】 http://www.your_domain.com/>>http://your_domain.com/ 统一你的网址，不要出现www 由www.your_domain.com进入的连结一律重新指向your_domain.com 可以在.htaccess中这么写： RewriteEngine on RewriteCond %{HTTP_HOST} ^www\.your_domain\.com$ [NC] RewriteRule ^(.*)$ http://your_domain.com/$1 [R=301,L] ———— BLOG不应该放在根目录啊～ ———— 【技巧一】 确保你的网站实行了301 Redirect，可以到Search Engine Friendly Redirect Checker检查。输入要检查的网址和验证码就可以了。 【技巧二】 防止.htaccess档案被检视，则要在.htaccess中加入： order allow,deny deny from all 【技巧三】 通常该目录中没有index.html的时候，Apache会把此目录下的档案统统列出来。如果你不想这么做的话，在.htaccess中加入这一行： Options -Indexes 来源： http://vinta.ws/blog/370 标签：wordpress 相关日志 提供UTW(ultimate tag warrior)下载 (2) 偶翻译的wordpress相册FAlbum插件 (7) ]]> 使用Redirect或urlRewrite在.htaccess文件里设置301跳转， .htaccess，这个档案通常会在网站的根目录，如果没有，就自己用Notepad新增一个。你的操作系统不允许.htaccess这样的档案名称时，就先把它命名为htaccess.txt，上传到FTP之后，再把档案名称改成.htaccess。

—————网页服务器必须是Apache —————
【情况一】

http://your_domain.com/wordpress>>http://your_domain.com/blog

让连接到/wordpress的连结重新定址到/blog，包含下层路径
例如：http://vinta.ws/wordpress/?p=334会被指向http://vinta.ws/blog/?p=334
在.htaccess中要这么写：
Redirect /wordpress http://your_domain.com/blog
如果有安装mod_rewrite模组的话，也可以这样写：
RewriteEngine on
RewriteRule ^wordpress(.*)$ /blog$1 [R=301,L]
【情况二】http://your_domain.com/wordpress>>http://your_domain.com
让连接到/wordpress的连结重新定址到根目录，包含下层路径（如/wordpress/xxx）
在.htaccess中要这么写：

Redirect /wordpress http://your_domain.com

如果有安装mod_rewrite模组的话，也可以这样写：
RewriteEngine on
RewriteRule ^wordpress(.*)$ $1 [R=301,L]

【情况三】

http://old_domain.com/>>http://new_domain.com/

让连接到旧网址的连结重新定址到新网址，前提是你必须是旧网址的拥有者
建议让旧网址和新网址包持相同的目录结构

把.htaccess放到旧网址的根目录，然后要这么写：

RewriteEngine on
RewriteRule (.*) http://new_domain.com/$1 [R=301,L]

【情况四】

http://www.your_domain.com/>>http://your_domain.com/

统一你的网址，不要出现www
由www.your_domain.com进入的连结一律重新指向your_domain.com

可以在.htaccess中这么写：
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.your_domain\.com$ [NC]
RewriteRule ^(.*)$ http://your_domain.com/$1 [R=301,L]

———— BLOG不应该放在根目录啊～ ————

【技巧一】
确保你的网站实行了301 Redirect，可以到Search Engine Friendly Redirect Checker检查。输入要检查的网址和验证码就可以了。

【技巧二】
防止.htaccess档案被检视，则要在.htaccess中加入：

order allow,deny
deny from all

【技巧三】
通常该目录中没有index.html的时候，Apache会把此目录下的档案统统列出来。如果你不想这么做的话，在.htaccess中加入这一行：
Options -Indexes
来源： http://vinta.ws/blog/370

标签：

相关日志

]]> http://www.purelife.cn/2008/04/30/redirect-urlrewrite-htaccess/feed/ 5 寻找共同使用移动线路盘古合租服务器的朋友 http://www.purelife.cn/2008/04/22/paangood-coserver/ http://www.purelife.cn/2008/04/22/paangood-coserver/#comments Tue, 22 Apr 2008 07:22:46 +0000 purelife http://www.purelife.cn/?p=88 活动已停止

现有apache，php，mysql合租空间 5G/760元一年，总共每月流量120G（详情请查看http://www.paangood.com/coserver.php）（只推荐blog用户使用, 非blog流量不是很大的用户也可以考虑，我主要担心有抢占带宽的情况出现）
服务器开通时间2008-04-17
化整为零，每个空间容量为1G,我自己用一份，售出四份，每份150元RMB
比使用虚拟主机强多了，要知道虚拟主机可是只能买100M左右的，而且流量限制较为严格
是移动线路的主机，电信和网通的访问速度都不错

空间测试
php探针 http://zzss.courage218.paangoodhost.cn
上海移动双线线路客户演示上海移动测试论坛
盘古官方也提供有主机试用服务

如何定价，我考虑再三，决定还是采用4+1的方式，4×150 + 1×160 = 760，也就是说大家采用整数，150这样支付比较方便


附上空间资料

服务器类型 移动双线(30人)
介绍 热点产品推荐! 全国网通电信用户访问移动双线速度快,详情请见客户演示
单台服务器人数 30人
价格(年付) 760元 次年起价格为760元的8折(即608元)
价格(月付) 暂无
托管机房 上海移动双线机房
带宽 20M独享
CPU Intel Xeon X3210 (4核处理器)
主板 Intel S3000AH
内存 金士顿ECC DDR2 4G
硬盘 2*SATA硬盘160G (同步备份数据)
其他 1U服务器专用机箱.纯铜CPU风扇.涡轮风扇风冷系统 500W纯净电源
操作系统 CentOS4 (Linux AS4)
控制面板 官方正版 cPanel (英文+中文)
远程管理SSH 提供 (您可以做更多底层操作,管理更方便) **注
HTTP Apache 1.3.X
PERL PERL 5.8.x
PHP 5.2.X
MySQL数据库 MySQL 5.0.X
Zend Zend Optimizer 3.2.X
GD库 GD Library 2
Mod_Rewrite 支持
.htaccess 支持
定义错误页面 支持
磁盘空间(每位) 5G
连接数(每位) 不硬性限制
CPU使用率(每位) 不硬性限制
流量限制(每位) 120G/月 (可以根据使用情况临时增加)
独立站点(每位) 5个(完全独立的5个网站.独立FTP权限)
Email(每位) 50个(web收发管理或者pop,smtp收发)
Mysql数量(每位) 10个(不限制单个数据库大小,大小包含在总空间以内)
FTP帐号(每位) 10个(分配到不同目录)
子域名(每位) 15个(非转向)
到期数据保留 到期后数据保留一个月,可免费取回数据. 超过一个月不保证数据完整性,取回数据需要原价格5%手续费.
退款政策 年付支持7日内退款,扣除3%手续费.7日后如无特殊情况不可退款 月付不支持退款 请务必先试用
开通SSH 通过SSH管理需要您通过电话或者在线提问,由我们人工为您开通,并且您已经填写好个人真实信息
支持脚本 我们的服务器都是专业Linux服务器,不支持ASP以及JSP.
标签：

相关日志

  • 无相关日志
]]> http://www.purelife.cn/2008/04/22/paangood-coserver/feed/ 1 好软推荐《小喇叭》音乐搜索下载一体化播放器 http://www.purelife.cn/2008/03/02/labaplayer/ http://www.purelife.cn/2008/03/02/labaplayer/#comments Sat, 01 Mar 2008 17:29:24 +0000 purelife http://www.purelife.cn/2008/03/02/labaplayer/ 小喇叭音乐搜索下载播放器labaplayer

因为经常要换电脑用，所以尽管我电脑里mp3已经攒了二十G,也没法随身带

手机也只能存1G的音乐，且不便于更新… 难道要去听那些.rm格式的劣质音乐在线试听？

要如何使搜索、下载、设置、播放这样的流程简化？

所以我推荐我在使用的《小喇叭》播放器www.ilaba.com，很方便的
随时搜索、试听、下载音乐，还支持EQ调节、歌词同步下载显示等增强功能，光是上面说的，就已经很好很强大了，但是这么一个小的播放器居然还有歌手库歌曲库（这个不错数据组织的好）、移动设备同步功能，可谓麻雀虽小，五脏俱全啊，真是让人惊喜的一个小软件

看我上面对小喇叭界面的抓图，你会发现，在它的右侧是什么？
居然还有关联歌手提示，关联音乐推荐功能，呵呵，简直酷毙了！！

详细评测文章见http://tech.sina.com.cn/s/s/2006-08-22/150375468.shtml

我也试用过其他的音乐播放器，比如QQ音乐QQmusic、酷狗kugou、酷我koowo播放器(看完酷狗，再看这个名字，会不会觉得有点怪，作者起这个名字的时候是怎么想的，想探究一下)。其中qq音乐界面最舒服，不过也是限制最为变态的一个了，搜索到的音乐不能直接下载（想要下载的话需要花money开通什么钻会员，呵呵），不支持EQ（这个我个人比较看重）且还有广告，简直是不负QQ家族的美名而酷狗之前我用的比较多的，不知怎麽我来这边就不能联网了，所以就放弃了

不过有点遗憾的是，他的皮肤现在仅有10款，而且不算精美，所谓好马配好鞍嘛，我觉得小喇叭应该也要在界面上多下的功夫，毕竟界面是能吸引用户的一个重要因素。
经我试听，小喇叭的音质有不完美的地方…加油啊

《小喇叭》之所以被我推崇，我想是因为他应了现在的互联网应用潮流，“把一切都交给网络”，我们现在能直接在互联网上编辑文档，处理表格，高效阅读学习（rss），打开pdf，都是托了互联网的福。

多说一句：视频播放器我使用的是酷热影音视频播放器KUREE，也是挺不错的。

下面是引用著名下载站的评述：

“小喇叭播放器（iLaba Player）”是一款基于互联网技术的音乐播放器，永久免费且无须注册，占用系统资源极小，大大简化音乐爱好者们的音乐体验过程，将搜索、下载、设置、播放等步骤缩减为短短数秒，让您只通过点击鼠标就可体验任何您想收听的音乐，为您提供高品质的互联网音乐体验服务。小喇叭最大的特色就在于其强大的快速搜索功能，自动搜索并返回最真实的在线收听及下载地址，剔除假链接、无效链接，继而自动筛选最适合本地网络的高速下载链接进行排序，电信、网通搜索排序结果截然不同，既实现高速在线播放功能，又具有便捷的同步下载功能，在线听歌的同时自动下载所听歌曲至指定硬盘文件夹。小喇叭还拥有全新音频引擎，支持所有格式到WAVE、MP3、APE、WMA等格式的转换，支持同步歌词滚动显示和拖动定位播放，支持歌曲路径、歌词下载和歌词编辑功能。拥有iLaba小喇叭播放器，您所拥有的将不仅仅只是一个有限的PC硬盘音乐空间与音乐播放器的整合体，而是一个无限广阔、任您畅游的网络音乐世界！

关键词：mp3搜索播放,影音,音乐搜索,在线音乐播放软件对比

标签：, ,

相关日志

]]> http://www.purelife.cn/2008/03/02/labaplayer/feed/ 2 用JavaScript实现的十个图像特效 http://www.purelife.cn/2008/01/23/image-javascript/ http://www.purelife.cn/2008/01/23/image-javascript/#comments Wed, 23 Jan 2008 09:48:26 +0000 purelife http://www.purelife.cn/2008/01/23/imagejs/ 此文翻译转载自www.blogohblog.com，翻译的不好

Reflex
Reflex.js

此JavaScript，可以为你网页上的图像添加变形和反射的效果。 您可以调整反射，倾斜角度和边缘变形。 结果是这个样子。

反射和变形效果Reflex Image

Curl
Curl.js

这个JavaScript能为您的图象添加翻页效果，且可以随鼠标动作，有动画的效果。支持所有主流的浏览器。

翻页效果Curl Image

Edge

Edge.js

这个JavaScript可以为您的图像添加炫目的撕边效果。你还可以添加背景图像能产生令人惊艳的效果。 而此脚本能做到这一点。

撕边效果Edge Image

Corner
Corner.js

这个JavaScript允许你为图像添加 圆角，阴影（内、外） ，底纹等效果。

圆角及阴影效果Corner Image

Slided
Slided.js

用这个JavaScript您可以为你网页的图像添加相框。无论如何，我相信这可以帮助一些不会使用图像处理软件的人。

相框效果Slided Image

Glossy
Glossy.js

用这个JavaScript您可以为你网页的图像添加光泽效果，使他们脱颖而出。 也允许添加圆角，遮盖及阴影效果。这是应用后的结果。

水晶光泽效果Glossy Image

Filmed
Filmed.js

这个JavaScript能为你的图像添加胶片效果。当然，你也可以在胶卷边缘添加阴影和光泽效果。 它看起来是这样的。

javascript胶片效果Filmed Image

Loupe
Loupe.js

你有没有想过再你网页的图像上添加一个放大镜，能让你查看更多的图像细节？这个脚本能让你如愿以偿。 下面是预览。

javascript放大镜效果Loupe Image

Instant
Instant.js

这个JavaScript支持为你的图像添加一个相片的画面效果，您可以添加边界，倾斜和阴影，来实现你想要的相片效果。 这里是一个示例。

JavaScript相片效果Instant Image

Bevel
Bevel.js

这段JavaScript能实现一大堆效果！它可以为你的图像添加斜面与发光，阴影及光泽效果。 这是它作用后的效果。

JavaScript边缘斜面效果Bevel Image

标签：, ,

相关日志

  • 无相关日志
]]> http://www.purelife.cn/2008/01/23/image-javascript/feed/ 4 上海随拍 http://www.purelife.cn/2008/01/08/shanghai/ http://www.purelife.cn/2008/01/08/shanghai/#comments Tue, 08 Jan 2008 15:13:40 +0000 purelife http://www.purelife.cn/2008/01/08/shanghai/ 上海的象征东方明珠和上海滩

IMG_0031IMG_0412IMG_0046IMG_0020

IMG_0007IMG_0013IMG_0023IMG_0043IMG_0006IMG_0004 IMG_0022IMG_0015

来几张夜景

IMG_0410 IMG_0411 IMG_0413 IMG_0415 IMG_0416 IMG_0034

上海多伦路文化名人街

IMG_0404 IMG_0391 IMG_0388 IMG_0386 IMG_0385 IMG_0383 IMG_0382 IMG_0378 IMG_0377 IMG_0375 IMG_0373 IMG_0370 IMG_0368 IMG_0367 IMG_0364 IMG_0363 IMG_0362

标签：, , ,

相关日志

]]> http://www.purelife.cn/2008/01/08/shanghai/feed/ 3