wlsy

迎新年，换域名

wlsy — Thu, 31 Dec 2009 23:26:28 +0800

是的，换域名了，原来的g9net.com将做跳转，新域名为wlsy.me 。更加和谐，更加清纯。打打住，俺对天发誓wlsy真的不是你们想的wlsy，好了大家元旦快乐。

happy birthday to me & g9net

wlsy — Fri, 18 Dec 2009 21:42:49 +0800

去年的这个时候，我重新建了这个博客，域名就是g9net，那天正是我生日。

话说之前新人秀的时候，在某煽情的节目后俺最后道出了一句“那尼”，之后似乎也成了我另一个别称了。

感谢UED

号外：那尼？！曾哥在我生日那天出了自己首张专辑http://www.1ting.com/album/a1/album_42144.html。

曾哥都可以，你，还有什么好害怕的？

周末杭州撩影

wlsy — Tue, 08 Dec 2009 22:29:05 +0800

难得的好天气，蚁居在窝里真是总罪过，出去透气了。有图有真相，请小心围观

天气实在好的不行，光线也不错，就是这叶子没选对。

穿梭于此，你真的能呼吸到久违的大自然气息

从地下电梯走出来，抬头遍见，感觉甚爽

这树红的很显眼，很壮观

路过竹素园，园里

也在园里，不过时间有点晚了

很喜欢这种感觉。

天气实在好的很，另外可围观自认为很帅的某人(长天)的肖像照，再者可围观已被墙的本人picasa

使用CSS3 创建动画效果

wlsy — Sun, 06 Dec 2009 22:35:23 +0800

概述

在CSS3中新增了几个很好玩的东东：CSS Animation，CSS Transition 和 CSS Transform，顾名思义就是通过CSS来实现动画，过渡和变形。

它们与HTML5中的canvas能绘制动画图形不同，这些只能应用在已存在的元素上，但这足以让我很兴奋了，我不必要在去写那些复杂的JS代码，运用它们我能更简单的创建自己的想要的动画。

应用前景

伴随着CSS3的普及，这些特性被各大浏览器支持也只是时间上的问题。有消息称在Internet Explorer 9 中将更好的支持HTML5和CSS3。所以各位围观群众不必担心这只是昙花一现。以下是我就目前的浏览器支持状态统计的一个表格：

	IE8 -	chrome&safair	firefox 3.5.5 *(3)	opera 10.10- *(4)
CSS Transiton	X	O	X	X
CSS Animation	X	O	X	X
2D Transform	*(1)	O	O	X
3D Transform	X	*(2)	X	X

备注：
*(1)：IE可以通过滤镜来实现部分变形
*(2) : Windows下的chrome和safair支持部分3D Transform。mac和iphone下的safair支持全部3D Transform(未验证)
*(3)：firefox3.7同IE9一样称将支持更多CSS3特性，不过最终是否支持Animation和3D Transform还不是很确定
*(4)：oprea已经在表示在Presto2.3(opera内核)中将支持Transtion。可查看wiki

接下来要开始了，各位看官准备好chrome或safair，演示和代码使用webkit的私有属性，let’s 干吧。

CSS Transition

这个能实现很舒服的过度效果，先看CSS代码片段：

.box {
width: 200px;
height: 200px;
background: #ccc;
-webkit-transition: all 1s ease-in-out; /*实现hover状态是backround的过渡*/
}
.box:hover {
background: #333;
}

你可以在这里看到这个演示，务必请用基于webkit的chrome或safair（以下同）。看完演示是不是很有兴趣想去学如何去使用了？transiton属性有这几个值：

transition-property :* //指定过度的性质，比如transition-property：backgrond 就是只指定backgound参与这个过渡

transition-duration:*//指定这个过渡的持续时间

transition-delay:* //延迟过渡时间

小贴士
linear //线性过度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢

timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。你可以在这里看到 cubic-bezier曲线图

Transiton和下面的Animation都是支持CSS伪类

同样的，这些我们可以简写，拿上面的代码 -webkit-transition: all 1s ease-in-out; 包含了property , duration ,timing-fuction。

参考资料：
CSS Transitions Module Level 3 （这个是w3c的官方文档，英语好的可以详细看看）
http://webkit.org/blog/138/css-animation/ （这个webkit官方博客上的讲解，也有例子）

怎么样，赶紧打开编辑器自己写写吧

CSS Animation

顾名思义，这个就能实现元素的动画效果，那时我就被震惊了，无数次那尼感叹。可以先看下演示，代码如下

@-webkit-keyframes title {
0% {
text-shadow:0px 0px 15px #000;
}
50% {
text-shadow: 0px 0px 30px #3995bd;
color: #aac7d4;
margin-top:200px;
}
100% {
text-shadow: 0px 0px 15px #000;
}
}
h1 {
-webkit-animation: title infinite ease-in-out 3s;
}

animation有这几个属性：

animation-name//属性名，就是我们定义的keyframes
animation-duration //持续时间
animation-timing-function //同上面的transition-timing-function
animation-delay // 设置动画延迟
animation-iteration-count //定义循环次数，infinite为无限
animation-direction //定义动画方式

这些同样是可以简写的。但真正让我觉的很爽的是keyframes 这个似乎有点象js里面的function，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)，简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。

你是不是已经开始蠢蠢欲动了？

参考资料：
http://www.w3.org/TR/2009/WD-css3-animations-20090320/

Transform

transform就是实现元素的变形，为什么放到最后？如果跟上面的CSS Animation结合起来是不是更酷呢？先看看这样一个演示，相信你不敢相信这只用CSS写出来的效果吧。

transform有几种类型：

scale(num,num) //尺寸，scale(2,3)即x轴方向放大两倍，y轴方向放大3被，同样的可单独写scaleX(2),scaleY(3)

rotate(*deg) //旋转的角度

在2d transform中旋转角度俺当前的平面顺时针或逆时针旋转。在3d transform中新增了 rotateX 和rotateY它们分别以y轴或x轴为中心进行旋转，同样可以简写称rotate(*,*)。目前已被chrome和safair支持

skew（*deg）//倾斜角度，同样的有skewX和skewY 可简写为skew（*,*）

translate //移动

在2d transform中分为translateX 和translateY 简而言之就是元素网x轴或y轴的移动距离，而在3dtransform中新增了一个translateZ 及实现Z轴的移动，实现透视效果。目前在Windows系统上还没有浏览器支持，同样的这些可以简写。

了解完这些用法后在去看看那个演示的源码，相信你肯定会惊叹transform和animation配合的动画效果了吧

参考资料：
http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/ （w3c文档）
3D Transforms （webkit博客上的文章，所以在Windows下没法看到，不过那里有截图过过瘾，并有一个很酷在Windows下打了折扣的demo哦）
http://www.zachstronaut.com/lab/isocube.html(这个就是用transfrom实现的立方体)

结语

看到这些，你是否跟我一样期待HTML5和CSS3的快点普及呢？在运用这些新特性能快速而简单的创建原本需要复杂js来实现的动画效果，这是多么让人兴奋的。

不过这些还是有那么些缺点的，CSS Animation的确很酷，但不得不提及它的资源占用问题，CSS transform的确很神奇，但不得不提及它的锯齿问题，当然了这些问题相信浏览器的开发者会逐渐改善的。

在wordpress非安装目录调用其函数

wlsy — Wed, 21 Oct 2009 00:17:16 +0800

其实问题很简单，假设wordprees安装到非根目录文件夹下，那如果在不同站点下如果调用其最新文章呢？在纠结了很久我先想到了几个方法：

方法一：通过js来调用它的RSS输出，然后在其他站点引入这个js。

我没写过原生的效果，不过有很多可以这样调用的方法，比如可以利用google ajax api中的 feed api来实现，利用feedsky来烧录RSS然后调用。我试用了其中但还是感觉很不爽，一来需要依托第三方，再者修改也很不方便，不能按照自己的需求进行更改。好吧，这种方法先作罢。

方法二：直接用php取数据库内容然后调用。

这种方法很灵活应用也很广泛，好一段时间纠结在写这个效果，对高手来说很简单，但俺是新手哈哈。在长天的帮助下初步完成，那哥们事后也写了篇MYSQL常用命令温故知新。

其中有几个问题总结：

在数据库库关联查询中直接查询的方式要比join的方式的效率高。
在匹配关联查询时类型一定要一样（我就犯了这么一个低级错误。。）

似乎问题已经解决了，但总感觉很不优雅，wordpress提供了那么多帅气又好用的函数难道就不能用吗？

方法三：调用wordpress自身函数

在此之前一直很纠结。无意间打开wordpress根目录下的index.php，发现它是一个文件套着一个文件，那是否我在非安装目录是只要引用到index.php那就可以调用其的函数呢？具体这样来：

在wordpress函数之前引入<?php require(‘/你的wp安装目录/wp-blog-header.php’); ?> 。这段代码也是index.php的主要代码。比如你要在非安装目录调用其最新文章。就可以初步这样来写：

<?php require(‘/blog/wp-blog-header.php’); ?> //引入wp-blog-header.php

<?php get_archives(‘postbypost’, 10); ?>//wp 自带调用最新10篇文章

结果也就是我想要的，有了这个办法，以后就可以灵活应用wordpress了～

PS:好久没更新了，最近生活比较波折。现在慢慢好起来了，哪天把博客改版下嘿嘿。

结束与开始

wlsy — Wed, 05 Aug 2009 00:44:53 +0800

懒了将近一个月了，在不写我脑袋估计会钝掉了。

话说一个月前在送走同学离开学校的时候，童鞋这个词就不再与我有任何瓜葛了。回想四年大学生活不过转瞬，或多或少都有值得记忆的，后悔当时没在床前暗藏玄机，或者留下诸如”长夜漫漫，无心睡眠请拨打×××”之类的联系方式来促进与学弟学妹的交流沟通。

印象最深的估计就是地震了，离校的前一天的三更半夜又给我来了一个刺激的，眯着眼睛就下意识的往床下跳，片刻之后便听到整个宿舍区的喧哗声，不过相比去年512的那次，喧哗中少了恐惧。到现在我都有一些后遗症，每次躺在床上时一有摇晃就特别敏感。。

当当然最忘不了第一次吃的那个牛肉盖浇饭，那滋味到现在都回味无穷，虽然已经过了三四年了。那牛肉，那浓汤（专业术语或许可说“羹”）铺在一大碗的的饭上，微微的冒着热气夹杂着香味扑面而来，拿上汤勺舀一口饭，浓汤慢慢裹住饭粒，那牛肉摇着它的身躯使你完全没有办法拒绝它啊，咬伤一口，啊。我受不了了，我简直无法用语言来形容，啊×n，你能想他有多好吃就有多好吃，关键的是一份才6快啊！

大四之前的学校旁有条小吃街，也就是同学们不能忍受学校食堂的”猪食“在万众期盼中孕育而生的。不过虽然深受我们的喜爱，但是那帮连春哥都惧怕的城管却红了眼，幸运的话你能在五分之内看到一条街从人山人海到空无一人的盛况。不论小贩们在做什么只要听到一句”城管来了“就好象仇家或债主来了。话说有一次，几个同学在小吃街吃饭喝酒甚欢，几分钟骚动后转头准备结帐付款面对空荡荡的街找寻不到老板了。。。。

恨自己学了四年还没学成型的川话，话说刚进大学也就是从瓜娃子开始学起，不过却养成了特别喜欢听成都女娃讲川话，甜而不腻，又酥又麻，没有刻意的腔调让你听着很舒服。

四年要写的太多了，真的要我写的话这篇文章我估计可以写四年。对于留恋来说唯一寄托希望的就是再见了。再见了信息安全的同学们。再见了大学里朋友们。再见了的操场，哈哈大二大三晚上每天晚上都被我践踏。再见了三个食堂，我到现在都觉得它们的名字取得很有创意，分别为：晨曦，正阳和霞光。再见了四川。再见了传说中的四川的美女一半在成都，成都的美女一般在川师（四川师范大学）的川师。再见了那个买牛肉盖浇饭的老板（含泪）。再见了那些暗恋我的而我又不知道的人。。。

整个7月份注定要忙于生活了，来杭州了除了每次苦苦寻找传说的盖浇饭而又每次让我失望的同时就是呆在住的地方等通知面试通知面试了。最后很幸运我能在淘宝UED来开始我的另一个开始，在此也要特别感谢玉伯。在面对不可知的未来，我必须重新规划和审视自己了。加油～。

最后附赠一张非专业人士拍的7月日全食照片

有关web前端中的语义化

wlsy — Sun, 28 Jun 2009 17:35:16 +0800

作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念，于是乎也就花点时间搞搞它。语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太在意，哇哈哈，其实我也就算只比较老的菜鸟而已，本文不是说教，只是分享有关语义化的一些东西。

那什么是语义化呢？

首先抽象的说下语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。”娘的，太抽象了。其实在那个用4000W打造的超级防猥琐的绿坝就有个叫语义分析的功能，如果发现不健康信息，立马对其进行关闭，哼哼。

通过强大的拆字我们可以简单的理解它为：用特定的语言来定义特定的事物。在web前端中语义化标记也可以这样理解。

绿坝它全家靓照

你是不是特别特别喜欢div标签？

在刚开始学习web前端时想必你肯定听说div+css布局，说的那是如此好如此妙如此呱呱叫，于是乎你就div+css了，div套div，div何其多，去w3c验证发现还能通过，仰天长呼，so easy，so easy。

然而堂堂的(X)HTML就一个div标签？答案肯定不是，那其他的标签是不是没有用？答案更不是。任何事物存在亦有它的价值所在滴。在初学XHTML时，我曾经犯了一个很傻的错误，在定义几个行列表项时我是这样写的：

<div id="list">

虫下米<br />

wlsy<br />

虫下米wlsy合体<br />

</div>

你别笑，我当时真的是这样写的，只不过其中的文字记不清了，写完后发现在浏览器中是我想要的结果也就认为代码是正确的。代码是正确的吗？代码当然是正确的但是不规范。在XHTML中有个专门定义列表的标签ul（无序列表），ol（有序列表），dl（定义列表）。所以更加规范，更加有语义的我们可以这样写：

<ul id="list">

<li>虫下米</li>

<li>wlsy</li>

<li>虫下米wlsy合体</li>

</ul>

在学习XHTML时，应尽量能够熟悉有定义到的标签，并在特定的内容加以应用，比如我们可以用strong(用strong来替代b)标签来强调内容，用Hx(h1,h2…..)来定义标题等等。我可以吐血奉献我搜刮到一些资源：XHTML Cheat Sheet（这是常用的XHTML标签表格，可以下下来看，不过是英文的），HTML 4.01 / XHTML 1.0 参考手册（这里面有标签的详细用而且还配有实例），在早些时候我有写过一篇：几个不太常见的(X)HTML标签。

另外关于语义化标签蓝色理想上有篇帖子很不错：http://bbs.blueidea.com/thread-2658231-1-1.html

所以呢相对于叫div+CSS布局，我更喜欢叫做(X)HTML+CSS布局。

结构命名中的语义化

这里说的结构就是就是我们平常编写的XHTML代码，而命名就是我们为id或class所取的名称。

有个例子是这样的，你是不是有时会类似这样来写代码（代码比较粗糙演示用）：

<div id="left">

<p>今天是个好天气呀</>

</div>

<div id="right">

<p>我的一些照片</p>

</div>

CSS代码：

#left{float:left;display:inline;width:50%;}

#right{float:right;display:inline;width:49%;}

但是某天我突然闲着没事想换个布局来增加新鲜感，比如对掉左右边的内容，那么我仅仅要在CSS里面这样改：

#left{float:right;display:inline;width:50%;}

#right{float:left;display:inline;width:49%;}

结果呈现的效果确实是你想要的，但是为其id命名是不是违背的你的原意？你原本命名id=“left”的div内容的意思就是要在左边显示，而现在却显示在右边了。虽然结果是你想要的，但是命名好像很别扭的跟你做对。所以如果要对其进行语义化的命名我们可以这样来：

<div id="content">

<p>今天是个好天气</p>

</div>

<div id="sidebar">

<p>我的一些照片</p>

</div>

这样命名为content就是内容，命名为sidebar就是边栏，管它上窜下跳，左躲右藏，命名内容块始终为包含内容，命名边栏块也始终包含边栏。这个例子就是语义化命名的实例，很好理解吧。

看看我是怎么给自己的网站结构命名的：

结构命名为常用的英文单词，多词之前用-来分割。因为是个人博客所以命名也就没什么其他特殊要求了。如果想看看其他的网站的命名推荐各位用firebug，这是在Firefox的一个插件，能很方面的查看，修改和调试代码。

这里有一些有用的文章能够让你更加理解结构命名中的语义化：

CSS类命名的语义化VS结构化方式（这篇文章有很好的配图帮助你理解语义化命名）

语义化有什么优势吗？

当你写完代码后在浏览器调试，如果呈现的结果是你想要的，你是不是就不会再去检查你的代码了呢？访客能看到浏览器解析后的实际页面，但是你想过流量的另一个重要来源：搜索引擎吗？

语义化更有利于SEO

有个很常见的例子是这样的：在初学SEO的时候你是不是经常用h1来突出你的标题，用strong来突出你的关键字，或许你不太在意，但这确实是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页，它只有分析的你源码来体现或猜测网站要表达的内容。比如你想表达某篇文章的标题，你或许会这样写：

<div id="title">文章的标题</div>

访客或许能理解你的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写：

<h1>这是标题</h1>

小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

当然语义化还有其他优势：

正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解你的代码。语义化代码也更能帮助视障的人通过设备来理解你的内容等等。当当然语义化代码也是你能力的体现。

一些资料：semantic code: what? why? how?，

4 Ways CSS Can Improve Your SEO

语义化的更高体现-微格式

什么是微格式呢？维基百科这样给它定义的：

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。

从技术上来说，这些数据是一些语义标记，用标准的(X)HTML中的class名称设置。他是开放、可用、自由的，可以被任何人使用。

维基百科上还有一个实例我就不贴了，你可以到这里看到。

在往后，当搜索引擎越来越重视微格式，在你的网站上应用微格式肯定会为你加分不少。在应用和推广微格式上面，我觉得wordpress做的非常的好，在之前应用了诸如：rel=”tag”，rel=”nofollow”,rel=”license”后，在升级到wordpress2.8后我发现它在header处新增了这几个：

根据字面意就是帮助搜索引擎理解本页的主页，开始页，上一篇和下一篇。不过目前有些微格式还处于草案当中，并不能确保它在最后时还在。要想关注微格式你可以看看它的官方网站

微格式还有个很经典的例子就是名片的应用，它也就是通过一些很有语义的标记来描述个人信息，如果你想折腾微格式还是有得折腾的，为了避免篇幅过长下面给出写有用的了链接方便有兴趣的继续折腾。

微格式全功略Hcard、hCalendar、hReview、XFN 轻松掌握（这几个微格式也就是主要来体现个人信息，这篇来自ued163）。这里也还有一系列的翻译译文http://www.mijia.org/blog/?p=152能够帮助你很好的理解微格式。

end～

稻城亚丁旅行记录

wlsy — Tue, 23 Jun 2009 16:08:54 +0800

前言：没啥说的，看图说话吧。

第一天

从成都出发到康定城，然后晚上泡温泉，泡的人都要萎缩了。。

第二天

早上早早起来就翻山越岭去塔公草原，图中的海子为红海，据说是红色的，下面便是木格措。

满山尽是格桑花，这是一种生长在高原上的普通花朵，在藏语中，“格桑”是幸福的意思。

高原上的天空似乎触手可及。

话说俺还是第一次这么近距离看到马呀。

塔公草原上的木雅经塔，不过前面这块草皮被马啃的差不多了。。

真凸

沿路进去就是塔公镇了。

塔公镇的局部真容，话说生活在高原上的人们也挺不容易的。

也许是经常有游客来这里的缘故，照完像小女孩居然跑过来找我要钱，顿时让我一惊。

半个小时烧完水，让我想起了初中物理课上的烧火柴。

PS:塔公这里的风景还不错，于是决定在塔公呆一晚，找了家饭馆和当地当地平房旅馆，那天胃口还不错，然后就继续瞎逛。

塔公寺，说实话我对宗教不是很感冒。

继续回到草原，有人在休息，锅里煮的酥油茶，他们很热情的请喝了两大碗。

其实草原上不仅仅都是草。。

感觉中的草原就是这个样子～

中间那个没记错的话本当地人叫亚拉神山。

高原上的天气你永远也猜不透。

放晴后依然多云。

早早回去休息，那天状态还不错，第二天结束。

第三天

预料中的高原反应终于来了，早上起来人很不在状态，头痛并伴有轻度的呕吐。因为今天的行程大部分都在坐车，也就不打算多休息了，或许能在车上好好休息。

翻山又翻山，颠簸有颠簸，坐在左后一排的我痛苦的很，不过路上的风景实在不错，很艰难的拍了张。

途中唯一能够下车休息的便是中途给汽车加水的时候。

高山上植被异常的丰富。

高反越来越严重，整天也就都在车上痛苦的度过，到稻城的青年旅舍也很晚了，没胃口，躺下去就努力睡觉了。第三天结束。

第四天

早早的就起来，昏昏沉沉的，本来不想去亚丁的，但是昨天就答应一同包车的几个人，也就整理的东西，稍作休息开始去亚丁。

依旧是沿途的风景，让我目不暇接。

头脑很昏沉，没记错的那个乡好像叫亚丁乡。

亚丁三座神山之一：仙乃日。

差不多3个多小时到达亚丁，我也就没多走，决定还是休息一天，找到旅舍后便躺下去了，一天也就是差不多在床上。第四条结束。

第五天

昨天休息一天果然有效，早上起来精神抖擞，已经不再被高反困扰了，吃了些面包开始向亚丁景区出发了。

我的临时坐骑，哇哈哈，第一次骑马。

一步一步逼近神山，没记错那座叫夏诺多吉

亦或夏诺多吉？不过夏天雪也就比平时少了些。

骑马后还要做电瓶车，至于雪山如果记不清就叫它神山吧。

央迈勇一角

也是它，也就是打算爬上去的这座。

离出发点越来越远，隐约还可以看到栈道。

爬了也有2个多小时。这是上面的牛奶海，不过看不来实在。

在翻过一座山，这是五色海。其实很大，这张是站在山顶上照的。

这是嘛？雪山中海油红彤彤的一块。

还可以往上爬，不过也不想折腾自己了。沿途返回了。下午的时候也从亚丁回到了稻城。

PS:其实这次的行程与我原定的计划有出入，由于总总原因，云南那块的香格里拉也就是没去了，虽然很近。以后有机会在去也不迟。

到稻城的时候已经很晚了，在超市买了些充饥的东西。另外和不幸的是从稻城到成都发车是隔日，这也是之前没有预料到的，也就是说我还可以在稻城休息一天。第五天结束

第六天

就在稻城了，走了走稻城县。第六天结束。

第七天

要回去了，早早的收拾了行李，五点钟就爬起来了。

沿途交通管制，我们也就停下来休息了。这次可以好好看下牦牛了，见我就对我回眸一笑，哇哈哈。

这是什么花？据说可以统称它为野花。

赶路赶路了，晚上在泸定县休息一晚了，就是那个有泸定桥的泸定县。第七天结束。

第八天

也是最后一天，中午的时候终于回到成都了。到成都我才体会到什么叫成都平原。

尾声：其实这次旅行最美丽的还是在旅途中，最辛苦的也是在旅途中。真正到亚丁景区的时候我很少有感觉，另外也感谢途中有缘一起的人，没他们我估计早早就回来了，因为那里的ATM坏了。。。。

毕业了，再见了四川。

离开几天.

wlsy — Sun, 14 Jun 2009 03:47:41 +0800

一个人带着曾经的想法开始旅行，在毕业之前。

这次跨幅比较大，围绕香格里拉，从四川到云南，祝我好运。

如何实现背景图片缩放效果

wlsy — Tue, 09 Jun 2009 22:57:30 +0800

在如今大屏幕日趋流行的今天，相当多的网站都喜欢用大图片来当背景，但是这也有个问题，小屏幕浏览图片显示不全，大屏幕浏览却不够，如何才能对图片进行缩放呢？

其实在CSS3中有个background-size属性，不过现在基本上没啥浏览器能支持，不过了解下也不错，在W3C中有对它有定义到，可以在这里看详细用法。

当然熟悉AS的朋友也可以用整站flash很容易的实现，本文讨论的是基于css来实现。

其实这也不算是什么技术问题，主要是思路问题。既然不能在CSS里面定义，那么只要在XHTML通过img来插入图片实现“伪背景”。

什么没啥兴趣？来来来看演示（请先用非IE6浏览）这里有演示

怎么样拉拉浏览器是不是很神奇？代码很简单：

   1: <style type="text/css">

   2: * {

   3:     margin:0;

   4:     padding:0;

   5: }

   6: body {

   7:     font:14px/1.6 "Microsoft YaHei";

   8:     background:url(loading.gif) #333 repeat;

   9:     color:#fff;

  10: }

  11: #bj {

  12:     width:100%;

  13:     height:100%;

  14:     position:fixed;

  15:     top:0;

  16:     left:0;

  17:     z-index:1;

  18: }

  19: #main {

  20:     width:100%;

  21:     position:absolute;

  22:     z-index:2;

  23: }

  24: #content {

  25:     width:500px;

  26:     margin:30px auto;

  27:     padding:10px;

  28:     background:#000;

  29:     height:1000px;

  30:     border:1px solid #333;

  31:     -moz-opacity:0.8;

  32:     opacity:0.8;

  33:     filter: Alpha(opacity=80);

  34: }

  35: </style>

  36: <body>

  37: <div id="main">

  38:   <div id="content">

  39:     <h1>CSS背景缩放</h1>

  40:     <p>改变浏览器的窗口看看吧。</p>

  41:   </div>

  42: </div>

  43: <img id="bj" src="bj.jpg" alt="background"/>

  44: </body>

这里真正的背景是id=“bj“这个，而body里面定义的loading.gif是为了在加载背景给访客提示的，因为css里面的会先被读取。

那为什么不能用IE6来浏览呢？因为万恶的IE6不支持position:fixed;解决的方法除了用那个IE7.js，当然你也可以自己些js来让他支持，除此之外还有什么办法呢？答案是有的，比较复杂，需要用到table，你可以在这里看到这个演示，代码如下：

   1: <style type="text/css">

   2: * {

   3:     margin:0;

   4:     padding:0;

   5: }

   6: html, body, #bg, #bg table, #bg td, #main {

   7:     width:100%;

   8:     height:100%;

   9:     overflow:hidden

  10: }

  11: body {

  12:     font:14px/1.6 "Microsoft YaHei";

  13:     background:url(loading.gif) #333 repeat;

  14:     color:#fff;

  15: }

  16: #bg div {

  17:     position:absolute;

  18:     width:200%;

  19:     height:200%;

  20:     top:-50%;

  21:     left:-50%

  22: }

  23: #bg td {

  24:     vertical-align:middle;

  25:     text-align:center

  26: }

  27: #bg img {

  28:     min-height:50%;

  29:     min-width:50%;

  30:     margin:0 auto

  31: }

  32: #main {

  33:     position:absolute;

  34:     top:0;

  35:     left:0;

  36:     z-index:70;

  37:     overflow:auto;

  38: }

  39: #content {

  40:     width:500px;

  41:     margin:30px auto;

  42:     padding:10px;

  43:     background:#000;

  44:     height:1000px;

  45:     border:1px solid #333;

  46:     -moz-opacity:0.8;

  47:     opacity:0.8;

  48:     filter: Alpha(opacity=80);

  49: }

  50: </style>

  51: <body>

  52: <div id="main">

  53:   <div id="content">

  54:     <h1>CSS背景缩放</h1>

  55:     <p>改变浏览器的窗口看看吧。</p>

  56:   </div>

  57: </div>

  58: <div id="bg">

  59:   <div>

  60:     <table cellpadding="0" cellspacing="0">

  61:       <tr>

  62:         <td><img alt="background" src="bj.jpg" /></td>

  63:       </tr>

  64:     </table>

  65:   </div>

  66: </div>

  67: </body>

上面的这个代码参考GOTOCHINA的源码这个代码有个弊端，就是必须很严格的控制背景图片的比例否则在现在各大主流的分辨率下会有留空，经过的调试后推荐比例最好为宽：高=1：0.5。虽然这样可以解决留空问题，但是有时候图片会显示不全。所有各位要用什么方法就自己看了。还是推荐用第一种方法配合ie7.js来解决问题，当然你也可以完成不用管IE6～