CSS中用百分比(数)进行背景图片定位

此文为后来的教程做铺垫,转自这儿。百分数定位很有意思,可以实现非凡的效果。

大部分人应该习惯于使用描述性词语(left、top、center…)或者数值(20px、1em…)对背景图片定位,百分比可能比较少用,常见的有50%、100%等数值。例如希望背景图片水平居中,距离容器顶部20px,可以使用

background-position: 50% 20px;
之所以不使用


background-position: center 20px;

是因为类似这种描述性词语和数值混用的形式不被W3C推荐。(单纯的描述性词语组合使用是没有问题的,例如:background-position: right bottom;)阅读全文...

使用百分比进行定位的好处是可以利用CSS的计算功能,达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中,使用


background-position: 150px 150px;
可以看到背景图片的左上角顶点(坐标0,0)定位到了齐容器的中心点(坐标150px,150px)。




而把150px替换为50%,使用

background-position: 50% 50%;

看到的并不是如下的效果



而是这样



可见,CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用

background-position: 100% 100%;


定位的时候,图片被放置在容器的右下角,而并没有跑出容器。(如果使用 background-position: 300px 300px; 的话,背景图片会被移出容器)

同样,如果使用

background-position: 20% 20%;

会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。

发放Joost邀请

晚上又看了一个,得到了999个邀请,之前留言的朋友会一会发邀请给你,若还有想要的朋友请留言。

已停止

谷歌兴衰

谷歌兴衰 原文 水平有限,见谅。

请注意;这是一个(严格假想的)Google粉丝的梦魇。

1996: Brin and Page 建立了 BackRub, 开始了现代搜索的新纪元。
1998:为了启动Google通过发行长期债券的募集了100万美元。
1999: Google有了39名员工监视每天300万的搜索。
2001: Google现在为几个国家提供了专有的域名。
2002: Google提供了Google Web API, 吸引开发人员。
2003: Google Answers把搜索提升到人工的水平上
2004: Google把Blog从网页搜索中去掉了。
2004: Googlewhacking在2004年雅典奥运会上得到了小范围的关注。
2005: Google 添加了一个昂贵的"快速提交链接" 选项。
2006: Google缓存根据美国法律被裁定不合法,因为它违反了联邦的Digital Millennium Copyright Act.Google不得不移除它。
2007: 一个美国法庭认为Google图像侵犯版权。Google把它移除了。
2008: AllTheWeb is getting better and allows complex searches.整个网络不断进步,并且允许复杂的搜索。
2009: Google蜘蛛(额外的即时蜘蛛)已经可以索引每一分钟内生成的绝大多数网页(包含文件下载),导致了严重的服务器堵塞——人们开始通过robots.txt拒绝Google的索引。
2010: Google开发了弹出式广告。
2011: Google落后于新搜索技术。 new search technologies.
2012: Brin和Page今年正式辞职。
2013: Google现在以在每次搜索顶部提供图片广告为特色
2014: AllTheWeb收购DayPop.
2014: Google通过它的地理定位功能,开始为某些特定的国家过滤内容。在Google中输入“Hiltler”,德国搜索者将得到0个结果。
2015: Google收购了Yahoo目录并且移除了DMOZ Open Directory项目。
2016: 因为Google索引Windows服务器,微软成功对Google提起控诉。同时,IE9只允许用户访问MSN搜索。
2017: Googleplex发生火灾,大火烧毁了绝大多数硬件和研究数据。幸运的,没有人员受得伤害。
2017: 一个斯坦福语言学教授给Google提供结果非常混乱的语义搜索。
2017: Google的主要赞助者变为NSA,NSA把它们的名字变更为"National Search Agency"
2018: Google上市并且进入投机股票市场。
2020: AltaVista 收购 Google Inc.
2020: GoogleVista提出一个 为每一次搜索付费的方案.
2021: GoogleVista.com变成了一个基于Flash的购物入口
2022: GoogleVista向第三方出售这些年收集的用户信息 New York Times 报道。
2023: 人们抗议:由于在线隐私问题GoogleVista被关闭。
2024: Brin和Page用他们的新专利DilbertRank新建立了一个搜索引擎,Dooogle,仅提供给Dilbert卡通在线。尽管它可能很有趣,但是Dooogle失败了。
2038: 垃圾信息迅速滋生,疯狂的投机,伪造的新闻,阴谋见解,PS过的照片,侵权的材料,裸体和网上的恶作剧。地球上的人类放弃了在线搜索,回归到书本,报纸,杂志和古老的面对面沟通。
2051: Google成为Internet历史书籍中的一个脚注。那些年长的人知道它提及 了21世纪早期当时信息真实时Google的黄金时代。而年青一代不理解。
3064: 一个外星种族发现了Googleplex废墟,把它变成它们敬拜着lava lamps的新教堂
3088: 一颗巨大的流星以毁灭性的速度接近地球,最后的一个Blog——AmazingWorldNews.com,记述了这个故事。这个网站仍旧没有被浏览过,导致人类和绝大多数动物的终结。蟑螂幸免。

如何让谷歌超越谷歌

如何让谷歌超越谷歌

Tara Calishain,,Google Hacks一书的合著者,关于Google如何提高自己的评论:
1. 为它所有的工具提供RSS供稿,如Google News。赶上类似的Daypop
2. 添加一个所有内容搜索。有时候它的确花费更多的时间相对于需要单独的一个个标签(Google news,Groups,……)的搜索。
3. 为其它服务扩展Google API,而不是仅为Google网页搜索。
4. 在SEO方面帮助信息提供者。
5. 关注人们正在用Google Web API做什么。
其它正在跟Google竞争的搜索引擎不应该设法模仿正在“超越Google的Google”:
“在时间概念非常快的Internet上,[正在超越Google的Google]是个糟糕的创意。在你觉得你已经超越过去的Google的同时,他们已经超越了自己,同时你仍然落在了后面。”

原文 水平有限,请指正。

优化外部链接

优化外部链接
响应http://google.blogoscoped.cn/?p=730翻译此文章

Jill Whalen, 自1997年始致力于SEO,下面是他对优化一个网站的一些关键词:

一个等式有两端。第一决定于你的网页是否真正的按照已给定的关键词以尽可能的最优的方式优化。(...)如果你已经竭力按范本(within the copy)内已存在的关键点进行了优化,下一步就是看看你是不是可以用这些关键词或短语来优化指向此网页的链接。

等式的另一端就是添加尽量多的高质量的具有相同关键词的外部链接。(...)

得到真正有效有质量的链接的(那些真正对你有用,可以给你带来流量的链接)最好的方法就是建立一个值得别人链接的网站。当然,这不是很容易,不是一朝一夕就可以做到的。(...)

[People]去链接那些提供有影响力的信息和看起来在这一领域比较权威的网站。要变得权威,你需要证明你知道你正在谈论的什么。
-- Jill Whalen, Optimized Copy Still Not Ranking Well (High Rankings' Advisor Newsletter), 2003-06-09
原文 鄙人水平很烂,烦请多多指教。

Joost邀请无限?

早上看到cnBeta上说Joost用户有无限个邀请,可是我检查了一下却没有。想要Joost的可以搜索一下看看别人有没有,也可以留言,只要有了,立即发给你。
:)

试用Joost



踏破铁鞋无觅处,得来全不费工夫。老祖宗真有经验,今天终于从麦小田那里得到一个Joost邀请,如愿以偿。


Joost是个P2P的网络电视,出自出自 KaZaA Skype 作者之手,网络电视在国内一点都不新鲜,我的电脑上就装了三个,国内的基本上都试过,最后只保留了PPlive,PPstream和QQlive,但在老外版本意识那么重的前提下,出这个玩意还是很新奇的。


下载文件有10M多,安装的时候有个硬件检测,竟然说我的内存512M不过关……,不过还是装上了,看起来还没问题。黑色的界面蛮酷的,看惯了国内画面和节目单分开的布局觉得Joost半透明基于画面之上的菜单更新鲜一些。其实比较让我惊讶的还是速度,竟然一点都不卡,加载速度也很快。毕竟服务器在国外,可能是现在凌晨上网的人比较少的原因吧。


Joost比较有特色的地方是有一个Widget模块,一些小工具,在里面发现了IM,不过只能登陆Jabber协议的客户端,比如Google talk。Widget只能在全屏模式下使用,界面是半透明的,因此不太影响看电视。其它还有一个简易的Rss阅读器我比较感兴趣,这对我来说是很重要的。另外还有其它像小时钟,聊天室等一些Widget。估计Joost正式发布后应该会开放Widget的API以方便用户开发自己喜欢的Widget。


暂时没有邀请,如果有邀请会留给想要的读者。

Yahoo群组,Qbar

Qbar公开注册好长好长时间了,以前说是晚上十二点第一个报道的人可以注册一个,结果我抢了几个晚上都没有抢到,后来就灰心丧气了,当初Qbar的功能还很简单,最重要的是界面很清新,所以才那么有兴致去抢Qbar,现在功能好像多了,但界面却没有吸引力了。

Yahoo群组发布的时候第一时间注册了几个组(每个帐号最多五个),然后就不管了,结果前几天推出自定义地址不知道。没有注册到最想要的地址,现在还郁闷。

不知道你是不是跟我一样喜欢第一时间注册各种帐号,然后放着浪费。嘿嘿。数也数不清自己注册过多少种网络服务。如果你也喜欢,不准跟我抢哦。
现在我很想要个Joost邀请,前几个星期发了二十多封邮件也没得到。哪位朋友有给我一个哈。

图形化Myspace修改器

不得不承认Myspace没有改变我的观点,的确很烂。白让我等到那么晚。
相信好多人都用过校内网联系同学,校内网可以通过编辑代码来修改页面样式。
像Myspace这样火的网站,有更方便的工具
RealEditor可以以所见即所得的形式编辑Myspace页面样式,并自动生成相应的代码,把代码填在About me 里就行了。实现的功能还是非常强大的。
讨厌Myspace垃圾的界面。

Google 也可以监测病毒?

嘿嘿,不要被标题骗了。今天把Google group上的一些杂乱的论坛删掉,因操作太频繁,结果Google出现了以下提示:

很抱歉..
... 此刻我们无法回应您的要求。该请求通过电脑病毒或间谍软件向我们自动发送,而且看来您的电脑或网络已受感染。
我们会尽快恢复您的使用,请稍后再试。同时,您可以运行病毒检测器间谍软件清除器确保您的电脑没有携带病毒及其它欺诈软件。
我们对此深感抱歉,希望很快在Google 与您再会。

呵呵。

PR更新

Live Pagerank 这里查询,本站的PR已经逐渐更新为4。
其实以前从来没有关注过PR值,因为感觉上PR是非常神圣的东西,从来没有想过自己的Blog也可以得到PR值,以前连1都是不敢想的。直到有一次,偶然看到一篇介绍PR查询工具的文章,随意查了一下,竟然发现我的Blog的PR是3,当时真的大吃一惊,更让人吃惊的是我的一个域名,基本上没有用过,只是用域名转向到此博客,PR竟然也更新到4了。

以前只觉得只有那些人气很高的网站,才有PR这一说的。嘿嘿。

Google真是有点让人找不着方向。不过现在已经不在意PR了。

myspace果然发布了

等到十二点多,不过不太准时,刚开始还有点失望,快睡了又看了一下,果真发布了

Tamas Wells两张专辑A Mark On The Pane和A Plea En Vendredi

我没设密码不知道为什么需要密码。
我的Box的Public URL,可以到这儿下载:http://public.box.net/fly
另外,也可以单独打开这两个文件夹下载,地址分别是:
http://www.box.net/shared/qnd2gicoyp

http://www.box.net/shared/d3dpet7lgs

第一张专辑A Mark On The Pane(下载):


第二张专辑A Plea En Vendredi(下载):


纤静,优美,耳目一新。鱼最喜欢的一个乐队。特别把这两张专辑上传到了BOX上,第一张专辑因04年出版,网上下载也比较困难,记得用了几个小时才把第一张专辑找全,下载到。绝对值得听一听。04年第一张专辑"A Mark On The Pane"曾被评为当年最美的唱片之一。

还要特别感谢Foxmail,Box.net在我这儿普通方式几乎不能上传,只好通过邮件附件方式上传,Gmail大附件特别慢,Foxmail速度很快,一会就上传上去了。

一些介绍:
Tamas Wells既是团名也是其中主唱的名字,这支来自澳洲墨尔本的indie-pop乐团最早成立于00年初,当时只有Owen Gray (bass, harmonica)及Ben Castle(violin)两名成员,发行的第一张EP"Hello Jealousy"是张带点政治意味的民谣唱片,创作灵感来自当年的“第三世界国家债务解除运动”,第二年鼓手Nathan Collins的加入带入了新的创作元素,而接下来紧密的巡回演出,也为Tamas Wells在当地乐界积累了不少人气。02年3月和8月分别发行了两张广受好评的EP("Cigarettes, a Tie and a Free Magazine"及"Stitch In Time"),Ben中途退出接着加入了Tamas和Anthony。知名制作人Tim Whitten(曾制作过Gersey, Art of Fighting, Gaslight Radio)在听过"Stitch in Time" 之后颇为欣赏,邀请他们来悉尼的Megaphon studios共同录制新唱片,04年第一张专辑"A Mark On The Pane"曾被评为当年最美的唱片之一。 尽管Tamas Wells十岁那年没能通过AMEB一级钢琴考试,却是从那时起真正喜爱上音乐,当被人提及他那“毫不做作的天使般的嗓音”时,他说那是一天喝八升水的成果。

第一张专辑 Tamas Wells - A Mark On The Pane

01 - when do we fail abigail
02 - broken by the rise
03 - chandeliers
04 - reduced to clear
05 - petit mal at a grand occasion
06 - even in the crowds
07 - annalee argyle
08 - segue in gm
09 - if you bring me aubergines
10 - a dark horse will either run first or last

第二张专辑 Tamas Wells - A Plea En Vendredi

1 from prying plans into the fire
2 valder fields (推荐)
3 vendredi (waiting where you can't see)
4 lichen and bees (the fever of small tiwn ventures)
5 Yes, Virginia, There Is a Ruling Class
6 Opportunity Fair
7 Valour
8 Telemarketer Resignation
9 I'm Sorry That the Kitchen Is on Fire
10 Melon Street Book Club
11 Open the Blinds

给Foxmail.com的建议

1.首先从视觉上,Gmail的细节很到位,比如信件的阴影,色彩的过渡,看上去非常舒服。现在的Foxmail也很不错,不过比如我正在写邮件,感觉上界面很杂乱,有好多框。可以把右侧的通讯录折叠一下,做成收缩的。越简单越好。

2.在功能上,还是比较简单的,我非常喜欢Gmail的标签,因为标签可以完全替代文件夹,标签跟过滤器相结合可以实现非常复杂强大的功能。

3.希望不要把所有邮件放在收件箱里,因为邮件太多了的时候,加载速度,及视觉上都不怎么样。像Gmail那样有一个“所有邮件”文件夹,可以把邮件存档起来。存档之后看起来清爽一些。

4.邮箱也有很大的粘性,因为之前的邮箱里可能有好多比较重要的邮件,即使不想用了也不是很容易离开。最好可以把其它邮箱里的邮件可以转过来。我的Gmail里有3200封邮件,如果不能转到其它邮箱里,没有特殊情况,我不会换邮箱的。

5.Google将会推出Gdrive,所以Foxmail应该也有一个方便的网络硬盘。相信大多数人都蛮不喜欢腾迅动不动就这Q币,那Q币的,钻钱眼里去了,1G以下不用考虑收费,收费也没人用。

6.现在存放在文件中转站里的不能作为附件转发,建议添加此功能。

7.以后最好不要在邮箱首页放广告,不招人喜欢。可以考虑Gmail的广告模式。

8.希望多为用户想想。

客服回复邮件:

您的意见非常专业,我们会仔细研究。
关于第4点,在文件夹管理那里,可以建立POP文件夹,收取其他邮箱邮件(但暂不支持GMAIL,呵呵。
即将实现“将大文件传给朋友”的特性。
另外Foxmail是不会收费的。

更多的建议:

1.之前我说的导入邮件,指的是把邮箱里所有的邮件,包括以前收到的,现在的工具只能收取从设置开始后的邮件吧。

2.从邮件中删除附件。

3.可以把邮件导出到硬盘存储。这点类似第一条。尽管可以用POP,但是不方便。放在网络上,不如放在自己的硬盘里有安全感,怕被别人盗得密码,隐私一点都没啦。如果Foxmail支持,我一定不会再用别的邮箱了。

4.给邮件加注释。有些邮件可能是需要存档的,里面的内容可能不完整,需要补充,希望可以后来加上一些注释。

5.手机短信提示。

6.快捷键支持。处理大量邮件时需要的。

7.会话视图。Gmail创新性最大的功能之一。

8.这一条或许最不可能被采用,但是我希望有个更简单的界面。

Foxmail邮箱试用

好像是前天晚上提交了申请,今天下午收到foxmail的邀请。


您好!这是一封Foxmail.com开发团队发出的通知邮件。我们很高兴的告诉您,您可以参加Foxmail.com邮箱的小范围测试。打开提交申请测试时所用的Foxmail软件,点击“Foxmail在线服务”按钮,即可进行帐户注册。您的支持有助于使我们的系统更完善,让更多用户将来能够直接享受到更佳的服务品质。谢谢!


感觉跟QQ邮箱差不多,容量5G,界面,功能等没什么比较特别的。


最特别的一点可能就是“文件中转站”了吧,1G空间,可以存放一周,要安装一个ActiveX控件,我测试了一下,上传速度可以达到50K左右,开封电信。我这儿已经基本达到上传速度的上限,速度很快。


写信的时候有个截图功能,类似QQ,截完图后自动上传。下面这就是用它截的图。


飞信

记得去年夏天当时飞信还叫Femoo的时候就注册了它的帐号,可是直到去年年底才开始使用它。现在它成了开机之后必打开的软件,最主要的原因当然是现在免费发短信啦,:)
它的优点:
  1. 免费发短信
  2. 跟手机结合的比较完美,即使客户端不在线的时候,会自动发到手机上
  3. 朋友回复短信的时候按正常标准收费,不会定制什么服务。

飞信资费说明:


飞信业务现在处于公开测试期,可以免功能费进行试用。当确定正式资费标准时,将在移动公司的网站进行公布,并提前发短信与您确认,如果没有得到您的确认,公测期结束系统将自动关闭您的帐号。

速配交友现在是飞信业务的增值收费服务,月功能费5元/月。如果开通速配交友功能,您可以享受到随机速配、条件速配等交友服务,认识更多的好友。

公测期间:
从PC、手机客户端、WAP发出的消息或短信免费;
手机发送或回复的短信按照所属品牌的点对点短信资费收取(没有信息费);
好友手机语聊:主、被叫收费相同,8:00到18:00:0.25元/分钟;18:00到次日8:00:0.15元/分钟,漫游费率0.5元/分钟。上述费用已包含本地通话费和长途费,所产生的费用不计入本地优惠套餐。
使用手机客户端、WAP方式所产生的GPRS流量,按照当地资费标准,计入本地优惠套餐,具体资费请咨询所在地区移动公司。

官方网站

可以点击右侧链接注册,就会成为我的好友

用PQmagic将NTFS转换为FAT32文件夹名出现乱码解决方法

只要存在发生的概率,悲剧一定会发生的。
损失惨重。
失去了十几G的数据,其中包括音乐,照片,各种文件。终于决定要装上Linux,于是下载了Ubuntu,刻到光盘上。之前已经做了好多准备,知道分区的时候存在蛮大的风险,可能会迫不得已格式化硬盘。不过我还好,尽管遇到了一些问题,但还算顺利的装上了。困难也在预期之内。
折腾了一晚上,下载语言包,配置输入法,就要安装字体的时候问题出现了,因为我是XP和Ubuntu双系统,XP下用的是NTFS文件系统,Ubuntu7.04没有权限读取XP上的字体文件,尽管看到好多地方介绍可以通过软件兼容NTFS,不过决定偷一下懒,把NTFS转换成FAT32。55555…………悲剧还是发生了…………。

转换之后基本上所有的中文名称的主文件夹都成了乱码,打不开,也删不掉。不过查看磁盘的容量后发现,尽管打不开,但是数据肯定还在。所以搜索,大海捞针,终于找到了对症的药。重复N次,我疯了,我的硬盘也疯了,把数据恢复过来了,不过文件名却不可以修复。555555……,后愦症好厉害,估计要无聊一段时间了。
下面的方法转载过来,以备后来之兄弟用,如果提前看了此文,请谨记:由Fat32转换到NTFS一般没问题(用PQmagic),但请勿逆转!!后果很严重!!

用魔术分区将NTFS转换成FAT32文件夹名出现乱码解决方法!
PowerQuest公司出版的PQmagic(又称分区魔术师,目前常见的版本为7。0和8。0)是一款常见的分区维护软件,它能够在不损害数据的情况下对硬盘进行分区、分区合并和调整等操作。
一 故障现象:
有很多新手尝试pqmagic将ntfs格式的分区转化为fat32格式的分区,导致大量文件出现乱码错误,甚至丢失。很多中文名的文件或者文件夹会在转化后变成??!!!类似的乱码,无法重命名,亦无法删除。
二 故障原因:
Pqmagic的分区格式转换功能经常被人用到,但PQ转换格式(从NTFS到FAT32)时不支持中文的文件名,所以分区转换完了之后文件名全部是乱码,且不能进入,也无法删除和进行其它操作,但文件内容都在。用W2k下扫描,报告文件系统正常,给人带来很大麻烦。
三 完全避免方法:
第一就是等PowerQuest公司推出真正的简体中文版,而不是现在流行的汉化版。
第二在进行操作前把分区中的内容全部移走或改为英文名字,这样就可以保证万无一失了,当然硬盘损坏与我无关啊。
但是现在的问题是,已经出现乱码文件了,那要怎么解决?请看第四部分:
四出现乱码文件的救急方法:
建议:
这时候,为了救回数据,请不要格式化硬盘,目前我了解到三种解决方法。
方法一:
下载软件finaldata,扫描硬盘分区,选择恢复想要恢复的文件。由于毁坏的分区中文文件夹名字已经成乱码!?!!!,有些文件寻找起来可能是分困难。也不一定所有的文件都能找回,或者保证找到的文件没有被破坏,看人品和运气了(hoho,与此同时,你也会意外地发现很多陈芝麻烂豆子的惊喜或者是见不得人的咚咚)。
注意事项:
1. 用finaldata恢复前请勿再往毁坏的分区里面大量写入,因为这样会加大你的损失;
2. 有些文件可能恢复后不只一个,注意耐心寻找。
方法二:
用norton ghost(任何版本,目前常用8.0汉化版)制作毁坏的分区镜像到另一个分区,然后用ghost explorer打开,导出那些???文件夹,注意要改名字就行了。
说明:
使用它没有不能向硬盘写数据这个限制,但是你需要保证有足够大的空间保存毁坏分区的镜像。要是没有的话,黑一个同学的硬盘做辅助硬盘或者去村里买一个移动硬盘吧!
方法三(推荐用这种方法):
用 linux 启动,mount 那个 fat32 分区,指定 codepage = cp437
就可以看到完整的中文文件名和目录了,cp -r 到 linux 分区上面;
umount fat32 分区,再次 mount 上,指定 codepage = cp936
cp -r 回去,搞定。
这个方法可以完全无损恢复
附带说一声:linux可以用Knoppix Live CD。Knoppix是一种直接可以在光盘上运行的Linux系统,这样的系统很多,统称Linux Live CD,和Windows PE + ERD Commander组合非常的相似。而Knoppix是其中一个非常流行的系统。出现乱码以后,用Knoppix Live CD引导系统,它会自动挂载转换后乱码的硬盘分区,进入系统后,会看到一些以"?"号为名字的文件和文件夹。直接重命名吧!然后刷新,如果发现还有另外的"?"号文件夹和文件,再次进行重命名,直到不再出现这类文件为止。嘿嘿,然后看看这些重命名后的文件、文件夹内容,是不是以前Windows下无法访问和显示乱码的东东了。
这个Knoppix Live CD就不提供下载地址了,因为这个是一整套在光盘上直接操作的系统,足足有700MB,本意是为了想玩linux却有不想装linux的人准备的,现在无意中派上这个用途了,有兴趣的可以去买张现成的光盘试试。

链接

Sun 890

最近学院17W买了一台Sun v890系列服务器。说实话,还是第一次鼓捣服务器,对于一个学生来说,应该算比较少见吧。终于用过365天不用关的电脑啦,就是自检的时候声音大点,像鼓风机。

这种服务器多用于电信、银行,我还蛮幸运滴,好像学院用来芯片辅助设计的。

上面用的是solaris系统,正在学习使用。也是第一次使用Unix类的系统。

Google.blogspot.com??

记得以前访问这个Blog会自动转向至Googleblog.blogspot.com。可是今天却是另一番模样。作者是Joe?难道是我弄错了??



搜狗、谷歌输入法,谁将胜出?

搜狗、谷歌输入法,谁将胜出?

中国有为数不少的五笔输入法用户,如果用某些观点来划分,属“高端”用户。而五笔输入法这个领域尽管已经存在不少产品,但显然没有拼音输入法那样完善,据我所知,现在最完美的五笔输入法竟是一款未完成的作品——五笔加加,在众多网友的修修补补之下版本也不断更新,但却缺乏强有力的技术支持和不断更新,功能也有待提高。

搜狗和谷歌现在都只推出了拼音输入法,五笔输入法显然是一个空白,昨晚上就知道google今天会推出输入法,中午下课之后便迫不及待的回寝室试了一下,些许失望,因为只有拼音输入,在它未推出之前,总觉得Google的产品总是令人耳目一新,功能贴心又技术超群,昨晚上几乎肯定的认为谷歌的输入法会拼音及五笔结合的。

谷歌输入法也有几个亮点,但这显然不能制胜。Cnbeta和搜狗输入法论坛上关于输入法的对比以及各种评测如雨后春笋般。关于谷歌词库Copy搜狗的这事,我觉得无可厚非,因为词库并不属于哪一家,搜狗的词库也是在众多网友的热心帮助下日趋完善,成功是因为站在了巨人的肩膀上。输入法比的不是词库,而是词序的排列上,以及其它技术,相信谷歌在技术上没有Copy搜狗的吧。

某个产品的成功必然是借鉴了其它同类产品的经验的基础上不断改进。

在此替我们五笔输入用户说出我们的心声。

导出Blogger文章和评论

Blogger一再不正常,相信好多人都希望迁走,一般用过Blogger的人相信也就不愿意再粘Live spacesbaidu空间之类的怪物了吧(就不提某某新浪,垃圾Qzone了)。其实个人博客最好的就是有自己的域名和独立的稳定的空间,Blog程序Wordpress是首选。

无论你是不是打算迁出去,做一下备份总比被封之后,啃鸡肋的时候强。

可以去Yo2.cn注册一个帐号,在插件里启用Blogger import插件,然后把文章导进去,另外也提供导出插件。导入的时候不要一次性导入,文章太多可能中断,前功尽弃。

愚人节过后

如果昨天可以访问Blogger,我可以把它当作一场恶搞,但今天又可以访问了。我觉得是个值得思考的问题。

真搞笑。TMD。

不仅Blogger,现在Live spaces也经常出问题,这样心里还平衡一点。

整理了一下链接

此鱼比较懒,几个月都没有关注过那个Links,今天发现好多停止更新,或极少更新,甚至打不开的Blog,所以整理了一下,如果我弄错了,可以留言提醒我。

以后基本上不想添加链接了,也没什么意义。交换链接就像交易,之前不认识,之后更是没有关系。

发现那些链接里经常光顾的一个也没有。

Google reader快捷捷列表

在Google reader中按下"?"号试试。会列出Google reader中所有的快捷键。这样忘记快捷键的时候不用再到Help里查找了吧。



Gmail中新发现的一个快捷键,在Gmail中"#"号或者"Shift+3"可以删除一封邮件。另附官方Gmail快捷键列表


via googlesystem

本站域名coloor.net

任何时候都可以用此域名访问本站。

http://www.coloor.net

色彩斑斓。

咖啡鱼。

点名游戏

从去年就开始在Blog中流行的游戏没想到今天才被点到,期待了好久,郑重感谢一下一楠,你有空了请你吃饭。^-^

点名链接

一楠 http://yinanyaxia.blogspot.com/2007/03/blog-post_18.html

点名规则:

1.被点到名字的人要在自己的博客里写下自己的答案,然后再在后面加上一个问题,组成更多的问题,传给其他8个人,列出其他8个需要回答问题的人的名字,还要到这8个人的博客里留言通知对方——你被点名了,被点名者不得拒绝回答问题,完成游戏的人将会永远得到大家的祝福。

2.这8个人要在自己的博客里注明是从哪里接到的,并且再想一个问题传给其他8个人,让游戏继续下去,不得回传。被点到名字的人将会得到大家的祝福,并且所有美好的愿望都会在不久的将来实现。

一楠的问题

1,讲出你对google的认识?一楠亚夏http://yinanyaxia.blogspot.com

Google就是那种懂得爱别人,又不向别人索取爱的美女。有时候还带点可爱,长不大。

2你最邪恶的念头是什么? PSYCHO

应该是某一个学期,天天翘课,老师不点名,考试全Pass。

3.你最害怕失去的是什么? 不会游泳的鱼

最害怕失去我爱的丫头,以及奶奶。

4.你最感动的一首歌是哪首?keledec

仔细想……,嗯,应该没有。没有感动,只有更感动。我最喜欢的歌手是Tamas Wells,极力向大家推荐哦,绝对不同的感觉,他的两张专辑如果下不到,可以向我索取。A mark on the pane和A plea en vendredi。先推荐一首Valder Fields。

5,你的薪水是多少?嘻嘻。小然(不得拒绝回答哦:))

正在努力想像之中…………,期待不要跟"小胡"一伍。一定要多赚点,嘿嘿。把丫头养得胖胖的。


下面轮到我的问题了,除了上面的问题外,我添加一个。

6.你有多爱自己的女朋友(或男朋友),试举一例。咖啡鱼


下面的朋友请回答我的问题:

  1. 丫头
  2. 任平生
  3. 小虾
  4. Crystal
  5. 晓月
  6. 南半球的怪羊

通过CSS应用背景图像

因为喜欢新的Office2007的界面,所以很想使用一下,想来想去,觉得写篇Blog过过瘾比较合适,嘿嘿。比较遗憾的是无论是Word2007还是Windows live writer都不支持Blogger的标签,害得我每次发布了还要到Blogger去添加标签。背景图像是CSS中最重要的应用之一。

可以这样说,如果没有背景图像,就不会产生网页设计师这种职业。我们可能遇到过好多非常漂亮的Blog,它们漂亮的原因皆因运用了大量的背景图片。用CSS应用背景图像是非常简单的。

CSS2中暂时不支持对同一标签应用多个背景图像,但在下一代CSS3中将支持多个背景图像。鉴于此,有时候我们不得不添加一些无语义的标签(大多时候添加空DIV),来为同一模块添加多个背景图像。
语法:background : background-color background-image background-repeat background-attachment background-position
现在并不需要记住语法,我们可以在例子中理解。例如我们要给网页的主体应用一个背景图片,我们可能会写下这样的代码:

Body {background:#FFFFFF url(图片地址) repeat-y fixed left top;}

这条语句的意思是页面的背景颜色为#FFFFFF,背景为"图片地址",在Y方向上平铺,背景图像固定,对准左上角。可能我们不会应用到背景所有的属性,不需要的可以省略,但要遵从一定的顺序。

以前写过修改页首图片的教程,现在我们看一下Blogger头部的CSS,以及如何修改页首图片。不同的模板CSS可能不一样,请酌情修改,下面是我的模板的CSS:

#header {
width: 96%;
height: 200px;
background-color:
$bodyBgColor;
background: url(http://vvvfly.googlepages.com/f.jpg)
center;
margin: 0 auto;
color: $headerTextColor;
padding: 0;
border-left: 3px solid $borderColor;
border-right: 3px solid
$borderColor;
border-top: 3px solid $borderColor;
}

根据以前我们学过的知识,我们可以知道,这是一个ID为Header的类,应用背景图像的一句为background:
url(http://vvvfly.googlepages.com/f.jpg) center; 这一句很简单,就是引用了http://vvvfly.googlepages.com/f.jpg这张图片,center让它居中显示,没有设定Repeat,浏览器默认水平和垂直的重复显示这个图像,如果你的显示器超过19寸,就可以看到平铺的图片。

对链接应用背景图像

背景图像在网页设计中的应用是非常广泛的,下面再举一个我们司空见惯的例子。我随意找了一个Blog(http://iyubao.blogspot.com/),截取了下面这张图片,这是一组链接,我们可以看到每个链接的左边有一张小小的图片(http://online.sccnn.com/icon/450/arrow_065.gif)。




它是怎么实现的呢?我们通过CSS把内容向右偏移一下为图片留出空间,然后应用背景图像,并让图像对准左边就可以了。在上面的图片中,它可能是这样写的:

.footer-box li {padding-left:20px;
background: url(http://online.sccnn.com/icon/450/arrow_065.gif)
no-repeat left center; }

当然,作者可能对链接还应用了其它样式,或许所写的代码与此有一些出入,但在此我们只介绍与我们所讲的内容有关的样式内容。看了上面的例子,你是不是可以让你的Blog的链接更漂亮一些呢?

CSS背景图像另外比较常用的就是建立圆角框等。

Word 2007发布到Blogger测试

今天把Office2007下载下来了,以前测试版的时候装过,界面焕然一新,看起来很舒服。也算革命性的一个版本了吧。

Word包含了发布到Blog功能,不过好像不能像Windows live writer那样下载博客的样式表。

添加句代码看看会不会被解释

<img src=" http://1.bp.blogspot.com/_gS9mTRN3414/RfKlD67lJ4I/AAAAAAAAANU/NR2_bv6FTRY/s320/20070310202843296.jpg" border="0">

结果:代码不会被解释。发布速度倒是比Windows live writer反应快。

绿色在线视频下载软件

介绍一下一款非常小巧,但功能却十分强大的的绿色软件,压缩包里包含一个FLV视频播放器和一个FLV视频探测器,还有使用介绍,总共才四百多K,解压即可使用。

现在的播客网站数不胜数,在线播放可能太慢,或者非常喜欢想保存下来,那么你一定要试试它。

几乎没有不能下载的视频。佩服。

下载地址

官方网站

请见谅

有些朋友可能觉得我不近人情,对读者太冷淡。实是时间所迫。
我是学电子专业的,这个学期有七门专业课,其中的四科是非常难的,努力学也像天书一样难懂。另外还有五科其它的科目,除去这些时间之后,几乎没什么空闲时间了。这个学期还要准备六级考试。考研或就业的压力也已隐隐的起作用。平时的作业都几乎没时间来做,对比起来我花在Blog上的时间已经很多了。

每天回到寝室最想的就是立即躺下睡觉,每天都很累。如果有怠慢之处请见谅。

Blog可以给我精神享受,但却不能填饱我的肚子,这是现实。

咖啡鱼版CSS教程电子书(更新)

晓月也为此教程制作了电子书,在此表示感谢,但是竟有2.35M,而且Box下载速度极慢,要以B来计算,我下载到中途就不能下载了。所以自己制作了一本电子书,只有23K,把它放在了Google pages上。

下载地址

晓月那有CSS中文手册的下载地址,可以去下载哦。再次感谢!!

晓月重新做了电子书,现在比较小了,而且包含了图片,我做的直接引用了Blogger里的图片,所以推荐下载晓月做的,感谢。

下载地址

3月19日更新:前几天发现下载后没有内容,所以今天又重新上传到BOX上。下载地址。

咖啡鱼版CSS教程 十步学会CSS

本教程并没有像普通的教程一样着重介绍各种属性,相反基本上一点都没提及,因为用到属性的时候我们可以查询CSS 2 中文手册(可很容易的从网上下载)。本教程着重介绍了CSS中的各种模型和概念,它们是CSS的灵魂。适合入门者,大虾可略过,欢迎批评指正。

  1. CSS的产生
  2. 简单的Html语法
  3. CSS语法和应用
  4. ID和类
  5. 常用的选择器
  6. 继承、层叠和特殊性
  7. 标准框模型和IE非标准框模型
  8. 空白边的叠加
  9. 相对定位和绝对定位
  10. 浮动和清理

欢迎复制传播或制成电子书。

CSS教程系列十——浮动和清理

这是基本概念的最后一篇,终于写完了。:) 没办法,我这人急性子。
1.浮动
浮动模型是在布局中用到的最重要的概念之一,以前介绍的把Blogger变成三栏的布局中就用到了浮动。我们通过定义float属性来让元素浮动,浮动的元素脱离了文档流,就像上一节讲的绝对定位的元素一样,普通流中的框表现的就像浮动框不存在一样,我们可以形象的把它想像作它在空间中“飘浮”,周围环绕着一些内容。因此,一个向左浮动的元素有文本在它的右侧运动,并环绕着它的底边;一个向右浮动的元素将有内容在它的左侧移动。

浮动的框可以左右移动,直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。

对一个元素应用float属性会自动将它转变成一个块级元素,其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围,形成Word中文字环绕的效果。例如在Blogger中我们添加图片的时候可以选择向左,向右或者居中,这就是用了Float属性,添加完图片后,你可以查看源代码,其中必有一条float属性。

float属性可以取三个可能的值:left,使元素向左浮动;right,使元素向右浮动;none,消除浮动。

2.浮动的一些规则

  • 多个浮动元素不会相互覆盖,一个浮动元素的框碰到另一个浮动元素的框后便停止运动。
  • 浮动元素的顶端不能高于父元素的内顶端,也不能高于先于它出现的浮动元素或段落的顶端。另外,浮动元素的顶端不能高于行框的顶端,如果行框中有先于浮动元素的内容。这些规则限制了元素向上浮动,使浮动低于其父元素。
  • 一个浮动元素不能伸出其容纳元素的边线,除非它的宽度太大而不能被容纳。如果多个浮动元素,当一行不能全部容纳它们的时候,则另起一行,剩余的被“挤”到下一行。
  • 在遵从其它限制下,浮动元素尽可能高。向左浮动的元素尽可能向左,向右浮动的元素尽可能向右,较高的位置优先给更偏左或偏右的元素。

3.清理

清理(clear)属性是浮动(float)属性的一个同伴。它控制跟随一个浮动元素的元素的位置。这个属性中用来防止内容跟随一个浮动的元素,迫使它移动到浮动的下一行。

clear属性可以取四个值:left,它把元素推到前面生成的向左浮动的元素下面;right,它把元素推到前面生成的向右浮动的元素下面;both,它把元素推到前面生成的所有元素下面;和none,它取消前面的定位。clear属性不仅限于非浮动元素;相反,它还可以用来控制浮动元素的行为,把一个浮动元素推到其它浮动元素下面。

我们可以通过两张图片来明白清理的作用:

第一张图片没有对行框进行清理,它环绕在浮动的图片的周围,第二张图片对段落进行了清理,它便不再环绕图片,到了浮动框的下面,相当于增加了这个段落的顶空白边,为浮动框留出了空间。
对元素进行清理实际上就是为前面的浮动元素留出了垂直空间。

CSS教程系列九——相对定位、绝对定位

定位是网页布局中非常重要的概念,决定了网页的表现形式,是CSS中我们最常用到的功能之一。
学完框模型之后我们知道网页是由一个个的框组成的,那么在最简单的不包含CSS的页面里,浏览器怎样定位各种框呢?在这种情况下,浏览器会根据各个框在Html中出现的顺序,由上而下一个接一个的排列,形象一点我们把这样方式称作“流”,区别于浮动和绝对定位这两种较特殊的定位方式,这种流我们称之为“普通流”。
其实,刚才我们已经提到了CSS中三种基本的定位机制:普通流、浮动和绝对定位。其中相对定位可看作普通流定位的一部分。
1.定位的语法
语法:

position : static absolute fixed relative

取值:

  • static :  默认值。无特殊定位,对象遵循HTML定位规则 。
  • absolute :  绝对定位。将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 。
  • relative :  相对定位。对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置 。
  • fixed : 固定定位。IE6等版本不支持。它其实是绝对定位的一个子类别,它能使元素出现在页面的相同位置处,而不随页面上下的拖动。一般使用JavaScript实现。

2.相对定位

“相对”定位,“相对”什么地方呢?相对定位是相对于文档流中的初始位置,通过设置垂直或水平距离,让这个元素移动。元素本身即使移动到了别处也要占据原来没有变化时的初始位置。相对定位的元素并没有脱离原Html流。例如:

#box {position:relative;

left:20px;

top:20px;}

3.绝对定位

绝对的意思我们都很清楚,它的功能就是让我们可以把某个元素精确的定位在某个地方。既然我们要自由的把某个元素定位在页面的某个地方,所以绝对定位的元素已经脱离了普通流。这里就像Photoshop里层的概念一样,绝对定位的元素会被放到一个新层上,它可以覆盖普通流的元素。绝对定位的元素不受普通流的影响,仿佛它们不存在一样。我们可以通过设置z-index(z就是指的z轴,各个层相互叠加垂直的方向上)属性来更改它们层叠的顺序。

绝对定位的元素的位置相对于“最近”的“已定位”的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于body。图示:

CSS教程系列八——空白边的叠加

上节我们刚学了CSS中的框模型,我们知道了在浏览器中我们所看到的内容的存在形式——它们是由一个个的框组成的。每个框都有一个空白边,两个空白边相遇的时候会遇到什么问题呢?

举一个例子,在一个网页中有几个段落,第一个段落上面的空间等于段落的顶空白边。如果没有空白边叠加,后面的段落之间的空白边将是相邻顶空白边和底空白边的和,这就意味着段落之间的空间是页面顶部的两倍。如果空白边叠加在一起,那么各处的距离就变得一致了。如图



空白边叠加的定义:当两个空白边相遇时,它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。


以后我们学到定位和浮动的时候会知道,浮动的元素和绝对定位的元素是脱离了普通文档流的,它们不会发生空白边叠加。行内框也不会发生空白边叠加。


叠加图示(点击放大图片):

注意:空白边的叠加是相当广泛的,当一个元素包围另一个元素时,如果没有填充或边框将空白边隔开,它们的空白边相遇时也会叠加。空元素的空白边也会自身发生叠加。

CSS教程系列七——标准框模型和IE非标准框模型

CSS中最重要的三个概念是:浮动(float)、定位(position)和框模型(box model,或称作盒模型)。这三种概念控制元素在页面上的排列和显示方式,它们是布局的基础,理解了这三种概念后,CSS在你的手中就如鱼得水,但真正的掌握往往在我们在日常进行了大量实践之后,所以一时不理解没有关系,学习本身就是一个反复的过程,多多实践,自然就会理解。

框模型是CSS的基石之一,网页上的每个元素都是一个矩形框,可能我们没有看到框本身,但是实际上我们所看到的内容都是包含在一个个的框中的,因为我们把框的边框隐藏了,如果需要我们就可以让它显示出来。例如:

<p>一些文字</p>

如果把这个段落放在网页中,我们肉眼上并不能看到框,但内在它就是一个框。我们可以定义样式:p {border:1px;}来把它的边框显示出来。

1.框的组成。

我们先抛开CSS,想像一下我们日常所见的矩形的框。既然是框就要有一个边框,框里面放着东西,里面的东西和框之间往往有一些空间,因为我们不可能把它塞得太满,还有什么呢?如果把这个框放在空间中,这个框与其它的物体往往也有一些距离,放得太挤了不好看。

也可以这样想像,我们在一张白纸上画一个矩形框,在框里面写字的时候,我们不可能紧靠着框的边,那样不美观,这样内容与边框之间就会空出一些距离,另外我们画框的时候也不会紧靠着纸的边,一般会留出一定的页边距。

边框、内容、内容和边框的距离和与其它物体的距离,这就是一般框的四项内容。

同样在CSS中的框也是由这四部分组成的。它们分别是:边框(border)、内容(content)、填充(padding)和边距(margin,也称作空白边)。我们可以形象的通过一张图片来看一下CSS中框的组成。


注意:填充是边框和内容之间的距离,空白边是边框和其它框之间的距离。如果给一个框添加背景,那么背景会应用于内容和填充组成的区域。

2.标准框模型的计算。

在布局的时候我们一般把页面分成几栏,这样就要计算各栏的宽度,框的宽度是怎么计算的呢?在CSS中我们是用width和height来定义框的宽度和高度的,一般意义上,我们会认为这个宽度(或高度)就是包含所有的四项的宽度(或高度),但实际上不是这样的,标准框模型中,width和height的值仅指的是内容区域的宽度和高度,不包含其它三项,这有些不太合常规,但既然是这样规定的,我们就要接受这样的概念。

那么一个标准框的四项的总的宽度应该怎样计算呢?例如我们定义一个框:


#box {width:70px;

padding:5px;

margin:10px;}

这个框的总宽度是:70+5×2+10×2=100px。如图:


注意:width和height仅指内容区域的宽度和高度。空白边可以是负值。

3.IE的非标准框模型

IE是使用最多的浏览器,正因如此,微软才这样令人可恶,IE中有许多不合标准的地方,框模型就是其中之一。IE中的width和height的值是指除空白边之外的宽度和高度,它包含了内容区域和填充区域。这正是现实世界中我们比较熟悉的框。尽管这样,不同的标准会让网页在不同的浏览器里的显示方式大相径庭,会造成比较严重的后果。如果我们还像上面例子一样定义一个框,那么在IE中框的宽度是多少呢?

此时框的宽度为:70+10×2=90px

比上面的框小了10px,这10px是原来的填充的宽度,它现在去哪儿了呢?因为框的宽度为70px,这个宽度包含了内容和填充的宽度,所以内容区域的宽度为70-5×2=60px。如图:





注意事项:正因为IE的非标准模型,所以在使用的时候,我们尽量不要给具有指定宽度的元素添加填充,而是把填充或空白边添加到元素的父元素或子元素中。

CSS教程系列六——继承、层叠和特殊性

CSS中有一些概念是需要深刻理解的,此节开始将介绍CSS中的一些非常重要的概念。

1.继承。

继承是一个非常容易理解的概念,我们可以形象的把它比作遗传,父元素的特性会继承给它的子元素。

body {color:red;}

<body>

<p>一些文字</p>

</body>

上面的代码我们没有定义P的颜色,但它包围的文字的颜色为红色,因为它继承了父元素body的颜色。

2.层叠和特殊性。

body {color:red;}

p {color:green;}

<body>

段落一

<p>段落二</p>

</body>

我们把第一个例子稍稍修改一下,现在的结果是段落一为红色,段落二为绿色。

有些人或许会有疑问,根据刚才介绍的继承,段落二是不是应该继承红色呢?

实际中,在CSS里,某个元素的某个属性,我们可能在不同的地方定义了多次,这样它的样式就会发生“层叠”,这时候浏览器会不会不知所措呢?究竟应该应用哪种样式呢?

CSS中以不同规则的“特殊性”来决定应该应用何种样式,特殊性高的规则优先,若两个规则特殊性相同,则后定义的规则优先。

另外,对于我们正在浏览的同一网页,可能会有多个样式表对其产生作用,一般有原网页作者的样式表,浏览的用户的样式表以及浏览器或用户代理使用的默认样式表。将样式标记上!important会提高它的重要度,可以优先于任何规则。

层叠的重要度次序:

  • 标有!important的用户样式
  • 标有!important的作者样式
  • 作者样式
  • 用户样式
  • 浏览器/用户代理应用的样式
  • 最后根据选择器的特殊性决定规则的次序。

特殊性的一般规律:行内样式,即用Style属性编写的规则特殊性最高,其次,具有ID选择器的规则比没有ID选择器的规则特殊,再次具有类选择器的规则比只有类型选择器的规则特殊。最后,如果两个规则特殊性相同,那么后定义的规则优先。

注意:继承的样式的特殊性为空,即直接应用于元素的任何样式一定会覆盖继承的样式,这就是为什么第二个例子中P的颜色没有继承Body颜色的原因。

3.特殊性的计算

除了上述的一般规律外,我们也可以计算出某个规则的特殊性。

  • 行内样式是最高的,如果是行内样式则无需计算。
  • 计算ID选择器的数量 a
  • 计算类和伪类的数量 b
  • 计算类型选择器的数量 c

上面我们一共算了三个数,假设ID选择器的数量为a,类和伪类的数量为b,类型选择器的数量为c。最后得到它的特殊性为:abc (并非三个值相加,而是按顺序排列)

例如,有这样一条规则:#wrapper #content .post p {color:red;}

这条规则中共有两个ID,一个类和一个类型选择器,则计算出的三个值为:2,1,1。将它们按顺序排列起来得到的数值是211。如果还有一条规则也定义了P的样式,但计算出的值小于211,那么第一条规则的特殊性就高。

CSS教程系列五——常用的选择器

上一篇教程中,我们了解到类非常灵活且功能强大,但我们在使用中却极容易过份依赖它。我们应该如何去避免类的滥用呢?我们可以通过使用“后代选择器”来减少类的使用。

最常用的选择器是类型选择器(或称作元素选择器、简单选择器)和后代选择器。

1.类型选择器。

这种类型的选择器已被我们熟知,它用来筛选特定类型的元素。如段落、锚或标题元素等。

p {color:black;}

a {text-decoration:underline;}

h1 {font-weight:blod;}

2.后代选择器。

后代选择器用来筛选特定元素或元素组的后代。后代选择器的表示方法很简单,在父选择器和子选择器之间加一个空格。举个例子。

p span {color:red;}

<p>这是第一段文字<span>这是被Span标记包围的文字,颜色为红色</span></p>

<span>这是第二段文字,颜色不变</span>

在上面的例子中被第一段文字中被Span包含的部分的颜色将是红色,其余文字颜色不变。

理解后代选择器的作用了吗?在第一段文字中Span是P的子代(或叫做后代),因为Span包含于P中。所以这段文字的颜色将是CSS中定义的红色。而第二段文字并非P的子代,所以不会应用样式,颜色不变。

现在你可以理解为什么我们不需要很多类了吗?不妨思考一下。

3.伪类

如果你之前没有接触过编程,伪类这个名字乍听起来有点怪。为什么会称作“伪”类呢?(日伪军是不是很熟悉,^-^)

伪类也是类,但它是固定的,CSS中事先定义好的,用来根据文档结构之外的其它条件对元素应用样式。比如链接的状态。它是类,但又不是我们通常意义上的类,所以称作伪类。

我们常用的伪类有四个,其它的一些伪类因在IE中不支持,所以一般不用。

这四个伪类是(伪类前有一个冒号):

:link (链接) :visited (已访问的链接) :hover (鼠标停留状态) :active (激活状态)

其中前面两种称为链接伪类,只能应用于锚(a)元素。后两种称为动态伪类,理论上可以应用于任何元素。

例如,假设默认的标题颜色为黑,访问后是白色,鼠标停留时字体为红色,激活状态为黄色,那么CSS应该怎么写呢?

a:link {color:black;}

a:visited {color:white;}

a:hover {color:red;}

a:active {color:yellow;}

注意事项:这几个伪类组合的时候根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。可以记为“LoVe HAte”。

4.通用选择器

我觉得它就是个通配符,通用选择器用*表示,它一般用来对页面上所有元素应用样式。例如:让所有元素的填充和空白边置0。

* {padding:0;

margin:0;}

另外,通用选择器和其他选择器结合使用时,通用选择器可以用来对特定元素的所有后代应用样式,或者跳过一级后代。

5.高级选择器

IE对高级选择器基本上不支持,平时用到的很少,但功能却极为强大。此处略去。

CSS教程系列四——ID和类

尽管所有的Html标记都可以用作选择符,但是现实中我们仍需要实现更加精细,更加复杂的目的。例如:有三个段落,我们希望每个段落有不同的颜色。以前我们用类型选择符定义段落颜色,代码会这样写:p {color:red;} 但是这条规则只能让所有的段落字体变成红色。这时我们就用到了ID和类。

1.ID和类的规则及使用方法

(1)定义ID

#名称 {属性:值;}

(2)定义类

.名称 {属性:值;}

它们跟以前的选择符格式上差不多,ID前面加一个#号,类名前面加一个点(半角)。

2.ID和类的命名

在命名上,ID和类是随意的,你几乎可以将它们命名为任何的名字。比如上面的三个段落,我们把第一段的类名命名为:first,代码就要这样写,

.first {color:red;}

但为了规范我们最好使用有意义容易理解的名字,让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写,即多个单词的情况下,首单词无大写字母,其后单词首字母大写,如topNav,leftSidebar。

3.ID和类的使用

我们在CSS中定义了类或ID,那么我们怎么把它应用到Html中呢?

<P class="first">第一个段落</P>

若当初我们定义的是ID,#first {color:red;}。那么现在我们应该这样写:

<P id="first">第一个段落</P>

这样应用了之后,只有第一个段落的颜色为红色,其它段落便不受First类影响。

4.ID和类的区别

看了上面的几个例子之后,你可能会觉得ID和类除了书写上的区别之外,功能上好像没有区别。的确,它们在功能上也没有区别,它们的区别就是ID在页面上必须是唯一的。而类可以被任意使用。例如我们定义一个ID,一个类。

#first {color:red;}

.second {color:green;}

first因为前面有个#号所以属于ID,Second则属于类。则:

<P id="first">段落一</P>
<P class="second">段落二</P>
<P class="second">段落三</P>

上面的代码中“Second”这个类被使用了两次,说明类可以被多次使用,但ID在页面中只能被使用一次。

我们一般用ID来标识持久的结构性元素。使用更多的是类。

5.防止类的滥用

类是非常灵活和强大的,正因如此,它也极易被过度的使用。在实际中我们应尽可能少的使用类。大多数时候我们所创建的文档中只需要添加几个类。

买了两个域名

coloor.net和给丫头注册的ifay.cn
好像现在没什么用处,嘿嘿。总会有用的。
cn无法注册Google Apps,注册过net后立即试了一下Google Apps,好可惜,最重要的一个功能因Ghs.google.com在中国被封而无法使用。遗憾,好遗憾。

CSS教程系列三——CSS语法和应用

大虾请略过,本人菜鸟。

这一节我们终于真正的开始接触CSS本身了,会不会等得有点久呢?呵呵,开始吧。

一、基本语法

掌握一件事物最快的方法就是直接去使用,看看下面一段代码,这段代码来自Blogger模板。它是介于<b:skin><![CDATA[ 和 ]]></b:skin>之间的部分。这部分包含了XML的变量定义(Variable definitions)和CSS。类似下面的代码就是CSS。

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
text-align: center;
}

仔细观察上面的代码,我们可以分析出CSS的规则,实际上CSS只包含了三部分,大括号外的,冒号前面的,最后就是冒号后面的。这三部分是什么?起什么作用呢?

我们用一条更简单的规则来说明:

H1 { color: green;}

这里有三个概念,分别是大括号外的“选择符(Selector)”、冒号前的“属性(Property)”以及冒号后面的“属性的值”或者说是“属性的参数”。

上面一条代码具有什么作用呢?它告诉浏览器将所有<H1></H1>包围的文字以绿色显示。

1.选择符(有的地方称作选择器)。上面代码中的H1。顾名思义,它的作用就是起筛选的作用。就像上一条代码,它只对所有<H1></H1>包围的文字起作用。所有的Html标记都可以充当选择符,所以你可以将CSS的任何信息应用到任何元素。如果有不同的选择符,但他们的属性及值是完全一样的,为了方便,我们可以将它们合并起来写,例如:

H1, P, Span
{ font-family: arial;}

上面的代码就会把所有的H1,P,Span包围起来的文字的字体设置为Arial。

2.属性。上面代码中的color。每件东西都有属性。比如人类,性别,肤色,体重等等都是人类的属性。一段文字,一个段落也有自己的属性,比如字体类型,大小,颜色之类。不同的对象属性也有所不同。在CSS中要掌握很多属性,可以搜索“CSS 2 中文手册”,下载一份。在以后的使用中也会介绍一些常用的属性。

3.属性的值。上面代码中的green。这更容易理解了吧,比如性别男,肤色是黄色。字体类型为黑体……

4.最后不要漏了那个小分号,每一句后面都要加上分号。

5./*注释性文字*/ 夹在/*和*/之间的是注释,不执行.

二、CSS的应用

应用CSS一般有三种

1.内嵌样式. 它写在标记里面,只对此标记起作用。格式:

<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体,字体颜色是红色。</p>

2.内部样式表。写在所在网页的<head></head>之间,只对所在网页起作用。格式:

<STYLE type="text/css">

......
</STYLE>

3.外部样式表。用Link链接到网页,可重复应用到许多网页。格式:


<link href="css文件地址" rel="stylesheet" type="text/css">

下一节我们将接触类和ID。越来越觉得自己脑子里的东西太凌乱,在短时间内将它们写出来有好多地方前言不搭后语,不条理,请见谅。

CSS教程系列——简单的Html语法

大虾请略过,本人菜鸟。欢迎批评指正。

看到有人留言及在抓虾推荐上一篇文章,深受鼓励,我想自己一定可以把它写完的。欢迎订阅本Blog,以关注最新教程:http://feeds.feedburner.com/eool(推荐)以及http://feed.feedsky.com/ifly

在此系列教程中,我主要是根据自己的学习经历和经验,以最通俗的语言及例子说明一些抽象的概念,相信即使你从来没有接触过Html或CSS都可以学会。另外本教程所介绍的也是最基本的概念及最常用到的知识。

我接触Html也是从Blogger开始的,以前的Blogger模板是纯Html格式的。相信好多朋友连最基本的Html标记都不清楚,在学CSS之前,我将介绍我们最常用到的一些Html标记。算是CSS的基础。

1.Html简介

HTML的英文全称是Hyper Text MarkUp Language,中文叫做“超文本标记语言”。

HTML文件看上去和一般文本类似,但是它比一般文本多了Tag(标记),比如<html>,<b>等,通过这些Tag,可以告诉浏览器如何显示这个文件。我们用记事本就可以编辑Html。

我们平常浏览网页是通过IE,Firefox此类的浏览器,为什么需要浏览器呢?浏览器是一种翻译工具,它会解释看起来复杂、凌乱的Html,让人们得到最直观的表现方式。先介绍一下Html的几个基本概念:(1)标记(Tag),有的地方也称作标签。标记在Html中是用于描述功能的符号。标记是用来实现某种功能的,标记必须用<>括起来.举个例子吧.

<B>一些文字</B>

在上面的一行代码中,<B>和</B>就是标记,那么它们可以实现什么功能呢?这两个标记只有一个差别,就是后面的标记多了一个'/',这个标记的功能就是让两个标记中间的文字加粗显示.我们会注意到在浏览器中标记是不会显示的,显示出来的是它们之间的内容.所以我们可以看出,标记在这儿就起了某种功能的作用,标记指出了处于它们之间的内容在浏览器中的表现方式.

标记一般都有一个“始标记”和一个“尾标记”,像上面例子中<B>就是始标记,带上一个斜线就变成了尾标记。那么为什么需要两个标记呢?只用一个不行吗?其中始标记告诉浏览器从此处开始标记所表示的功能,而尾标记则告诉浏览器到这里该功能结束。相信这是很容易理解的。当然也有一些单标记,比如最常用的单标记<BR>,它用来表示换行。

新版的Blogger用的是XML,它对标记的检查非常严格,一般标记必须含有结束标记,有时候我们修改了代码却无法保存,或许就是漏了结束标记。

(2)属性。HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性,使得页面的背景色成为红色,就像这样:

<body bgcolor="red">

(3)注释语句。注释语句的格式为:<!--注释文-->


2.Html的基本结构



<html>

  <head>
    <title>Title of page</title>
  </head>
  <body>
    This is my first homepage. <b>This   text    is bold</b>
  </body>
</html> 

浏览器在解释Html的时候会由上而下执行,像流水一样,这就是以后我们会接触Html的一个“流”的概念,尽管简单,却是基础。


上面的Html基本结构的第一个Tag是<html>,这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>,表示HTML文件到此结束。


在<head>和</head>之间的内容,是Head信息。Head信息是不显示出来的,你在浏览器里看不到。但是这并不表示这些信息没有用处。Head信息是预加载的一些信息,比如CSS以及JS就可以放在Head里。

在<title>和</title>之间的内容,是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在<body>和</body>之间的信息,是正文。

在<b>和</b>之间的文字,用粗体表示。<b>顾名思义,就是bold的意思。

3.本节最重要的内容,介绍常用的标记。大多数将会在使用的时候简单介绍。Html标记是CSS的样式附着的地方,是“钩子”。


h1,h2等

ul li等

div span p等

CSS简易教程系列——CSS的产生

大虾请略过,欢迎批评指正。本人菜鸟。

话说盘古开天那会,嗯,还没有网络,再后来出现了网络,一种简单的容易理解的语言——HTML出现了。或许现在的网页都很漂亮,但用最原始的有语义的HTML形成的网页只能用简陋来形容。
再后来,网页变得越来越复杂,直到很少有人能再看懂自己写的代码。那个时代,Html的最重要的作用变成表现页面的一种方式,那么当时是怎么来修饰页面的呢?

人们用块引用(Blockquote)来添加空白而不是表示引用;表格完全成了布局工具,而不是来显示数据;用字体和粗体标签的组合来创建所需的视觉效果,而不只是用标题元素突出显示页面标题。总之,Html这种原本为非表现性语言变成了多能的,后果就是谁也理不清那一堆乱乱的代码。

这时人们急需一种独立的,细化的,简单的,易实现的表现性语言,来独立于Html之外表现页面。CSS出现了。

CSS全称为Cascading Style Sheets,翻译过来为层叠样式表,一般称样式表。它是Html的一种扩展语言。

那么我们可以用CSS来做什么呢?
有了CSS,我们就可以控制网页外观并且将文档的表现部分与内容分离开来。例如我们可以用CSS直接控制布局,而不是没有语义的表格。总之,CSS让以前复杂难懂的Html变得简单,有意义。

CSS的语法是非常简单的,但CSS在大多数人眼里是难掌握的。这并不是CSS本身的错,而是浏览器Bug和不一致的显示方式导致的。像我们最常用的IE就是最令设计人员头痛的一个非常糟的浏览器。我们日常使用一般都要尽量避免这些因浏览器而导致的BUG。比如最常见的一种就是网页在Firefox下显示正常,而在IE下,侧边栏却被“挤”到了下面,这就是由于IE错误的不符合标准的框模型造成的。当然,也存在一些修复Bug的方法(一般称Hack),但并不推荐。当你在不同浏览器上测试代码时,你的设计可能在一种浏览器上显示的很好,但在另一浏览器上布局可能会支离破碎。不要惊讶,这是一个现实的世界,并不完美。可以尽量找一些修复的方法。

现在用的CSS标准一般为2.1。

第一次写系列教程,肯定有好多好多疏漏和错误,以后发现了会逐步完善,欢迎指正哦。以后尽量先写到纸上,这样思考的会细一些。这也是本人的一个深入学习的机会。记住:我也是菜鸟哦,比你知道的多不了多少。

回到开封 元宵节快乐

去武汉丫头那玩了几天,在开封的烟花下,元宵节的晚上回来了。

新的学期,新的开始。新学期本Blog的目标是普及一下CSS,让大多数本Blog的读者至少可以看懂CSS。求人不如求已嘛。

上学期还蛮顺利的,没有挂科,四级也过了。但是应该考虑考研的问题了。这个学期将会是充实前进的一个学期。

如果你也有新的目标,我们一起努力哦

CSS练习——Tuscany Luxury Resorts

假期里将之前买的Css Mastery仔细读了一遍,里面有个例子,觉得设计得蛮不错,所以用了一下午的时间把它搬到了Blogger上。只完成了框架,细节部分如颜色,字体等等有待针对Blogger完善。快过年了,所以最近没时间了,放着吧。 有兴趣可以下载源代码自己修改一下。

原作品地址
Blogger版本地址
所有与此模板相关的源代码及图片下载地址

今天是情人节,祝愿天下所有有情人终成眷属!!

预祝新年快乐,在新的一年里写下自己的目标哦!

放假啦

又一年。

预祝你,新年欢欢喜喜。

明晚上九点半的火车。

百度


百度截图,首页变化。注意右上角的变化

Blogger Buzz中文版

http://buzz-zh-cn.blogspot.com/

Blogger Buzz是Blogger官方Blog,提供最权威的Blogger升级状况及Blogger服务介绍。

另外个人觉得比较有用的就是可以在Blogs of note上面找到许多有特色的Blog。

其它相关Blogger官方网址:

Blogger status:http://status.blogger.com/
Blogger Help: http://help.blogger.com/
Blogger Group:http://groups.google.com/group/blogger-help


刚才注册了两个Blogger地址,http://buzzcn.blogspot.comhttp://blogsofnotecn.blogspot.com不知道为什么Google要用那么长而难记的地址。

域名绑定昨在中国被封

没什么好说的了。也不会心痛了,习以为常。

Google说,Don't be evil。这,比登天还难。

Blog何时回归本质?

声明:本人极讨厌QQ
我的QQ(初中时候申请的,一直用到现在)已经几年没加过陌生人了?你呢?

中国有几千万的Blogger,从木子美到如今,Blog在中国已经像QQ初始至今一样兴盛起来。QQ只是IM(即时通讯)一个代表,它的迅速发展代表了人与人之间沟通的需要,Blog的实质是什么呢?Blog代表了人向外界展示自己的需要,Blog的前身是个人网页,个人网页的台阶比较高,所以并未形成气候。Blog则是完完全全的平民的需要,它的出现及发展是必然的。就像IM软件的出现和发展一样,当年,用QQ认识陌生人,网络交友是一种时尚,QQ让我们感觉到了如此大的世界也可以如此的近。但是如果你现在用QQ还只是为了认识陌生人,相信大多数人都会觉得你很“土”了,当然,刚接触网络的除外。QQ现在更成了我们与朋友、与我们所熟悉的人联系的一部分,为什么我们都“懒”得去认识陌生人了?这就是网络的回归,回归它的真正的实质,认识陌生人对我们来说不再是兴奋与好奇,不安全感与感情的付出得不到正比例的回报,让IM回归它的实质。

只有现实生活才是一个人最真实的需要,活在网络之上,终归是要回到现实世界的。电脑与网络仅仅是我们生活中的一小部分。大自然的奇妙之处就在这里,无论什么事物都是相生相克的,总要回到平衡点上来。

为什么提到QQ呢?因为Blog跟QQ是同一样的事物,它们的发展规律也将基本相同。

Blog的本质是什么呢?

Blog=Web log=网络日志,让别人了解你,了解现实生活中的你。现在的Blog热已经像QQ当年一样偏离了它的实质。它让我们每天花无数时间于网络之上,想方设法的展示自己的美。带来的后果就是我们忘掉了自己应该有更丰富的现实生活才会有更多彩的Blog。

我们现在大多数的Blog真正面对的对象是像QQ当年一样的陌生人,那些与你的现实生活无关,游离在另一个空间的陌生人,你甚至不知道坐在电脑另一端的倒底是不是人类。想想我们在做什么吧,为了一些与自己没有关系的人,每天浪费了多少时间与精力。如果你把这些时间与精力投入在身边的人际关系上,其收获绝对不是那个没有多少内容的Blog可以带来的。

Blog最终将是写给你身边的人,那些人才是真正的给你温暖、让你在这个世界上活下去的动力。如果我们一出生就活在一个网络时代,活在IM与Blog极度泛滥的时代,那么还有谁还会写给陌生人看呢?我不能确切的说出Blog回归其实质的时间,中国的网络现在并不发达,因此它还会继续壮大,但这一天总会到来的,如果你理解我所说的,就好好热爱自己的生活吧。

从05年暑假MSN spaces进入中国到现在,鱼接触Blog也有一年多的时间了。从刚开始的为了满足自己的虚荣心,让更多的人认识自己,到现在的纯粹为了自己的心情写Blog,我觉得自己看待网络事物发展的心更加成熟,更加清醒。任何事物终会与你的现实生活联系起来,也只有这样它才有发展下去的空间。

最完美的BSP:支持域名绑定

Blogger已经支持域名绑定,非FTP方式,原来的XXX.blogspot.com域名将指向你自己的域名。所有的Blog数据仍保存在Blogger服务器上。太完美了。

步骤:1.Blogger的设置步骤
设置——发布——选择“切换到自定义域”,再在“您的域”填上自己的域名即可。
2.自己域名的DNS设置。
在域名申请商的后台管理那里添加一条类型为“CNAME”值为“ghs.google.com”的DNS解析。
域名支持二级域名和目录的方式。

我的域名:www.coloor.net(域名解析一般几个小时后生效)

更新:域名绑定在中国被封