改背景最怕改错图,然后手忙脚乱,搞得更糟糕。所以了解这一个背景篇之前,请先看过我的第一篇,那篇教大家分析整个template的图画layout构造。知道自己blog的构造后就可以开始改了。
大多数比较简单的template是没有背景的,都是以一个颜色作为背景。如下图就以#ccddbb为背景色。
首先,第一尝试,我们先尝试加入下面的背景图。
本来code里面是没有插入背景图的code的,我们就加入下面红色这个,
body {
background-color: #ccddbb;
background-image:url('背景图路径');
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果出来如下,还不错吧~
再来我们试试repeat-x的背景图,把下面这个图做背景,然后repeat-x让整个背景看起来好像一个黄昏那样。
就在多加那个repeat的code下去就可以了,如下。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:repeat-x;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果出来如下图这样,你也可以想想自己的idea repeat-x试试看。
做完repeat-x,我们来试试repeat-y,加入下图。
code也差不多的,就把x变成y而已。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:repeat-y;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果如下,左手边出现了落叶。
如果你是比较自恋的,想要把自己的大头照放在blog做背景,repeat-x或者repeat-y都会一直重复,不好看。如果这样的话,我们就把它load出来,不要repeat就可以了。如下面背景图。
code也不难,在repeat那边改成no-repeat就可以了。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:no-repeat;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果如下
背景那边还有一个特别功能,就是背景綁死功能。只要加入background-attachment:fixed;这个code,无论你的IE/Firefox scroll到哪里,他的背景都会綁死在后面不移动。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:no-repeat;
background-attachment:fixed;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果如下图,我的blog已经scroll到最下面,但是背景还是在左上角。
这个綁死功能,在repeat-x,repeat-y的时候都可以用到。但是,现在趋势不流行,而且会影响到读者阅读,不鼓励使用,除非你自恋到要人家看你的blog的时候要时常看着你的脸啦。
总结这一篇,背景有4个呈现方式,
普通背景,他自己会repeat-x和repeat-y
repeat-x,水平重复
repeat-y,垂直重复
单一背景,不重复
下一次,应该会解释什么是margin还有padding吧。
目录
http://gfishdiary.blogspot.com/2009/06/blogger-template.html
Tuesday, July 21, 2009
修改 Blogger Template 教程 - 背景篇
系统优化工具
早前因为tuneup,把我的系统搞得一塌糊涂,很多东西都不能正常呈现。
很幸运的,今天给我找到了这个很不错的工具,他自己标版说自己是microsoft承认的工具。下来试试后,果然奇迹出现,他把我以前被搞砸的东西修复回来,还做了一些优化。大家真的需要试一试这个很不错的工具。
Uniblue Registry Booster
http://www.liutilities.com/products/registrybooster/
还有她的姐妹SpeedUpMyPC
http://www.liutilities.com/products/speedupmypc/
这两个我都试过了,出来效果非常好,可以放心试用。
Sunday, July 19, 2009
脑袋大翻浪 - The History
这次的脑袋大翻浪,是一个故事,它可以是小说,也可以是电影。
整个大纲大约如下
- 开始的时候,讲述一些专家研究的人类进化论,还有地球历史
- 故事背景,地球因为乱浪费资源而使得垃圾过多,空间全面污染,接近生存末期。
- 男主角为了生存,和其他人一样在拼命的挖取地上剩余的资源。
- 男主角挖到了一个莫名仪器,然后把它启动了
- 仪器把男主角带入历史时空,让他亲眼看看人类以前的历史
- 主角以第三人称出现在一个灰色的星球上空,看着一个很大的太空船从那个星球飞出来
- 太空船里面是很多类似人类的外星人,感觉他们都很伤心
- 从一些对话中知道,原来他们的星球失去了转动能力,开始脱离本来的位子,让他们无法继续生存,被逼离开。
- 那些外星人开始长期在外太空寻找适合他们定居的星球
- 来到了地球,恐龙时期,经过分析,星球很适合他们居住,决定占有这个星球
- 他们知道他们无法驾御那些比自己大很多倍的恐龙,所以他们放了恐怖风暴弹下去地球
- 恐怖风暴让地球气候起了很大变化,大水灾,大地震,有些地区变得很冷,有些地区变得很热。
- 全部地上的恐龙,还有接近海平线的水底动物都因为这个恐怖风暴灭亡了
- 那些外星人就这样占有了地球,也就是现在的人类
- 因为他们不知道氧气对他们身体有副作用,他们的脑袋慢慢的退化
- 人类开始分群的生活,各各群体移到地球的不同角落生存
- 人类慢慢进化,身体吸收环境的基因变成不同肤色,不同体格
- 退化得比较慢的人类,用仅剩的智慧制作了一些世界奇观,退化得快的就忘记了自己的智慧过着野人生活
- 到了人类可以完全适应氧气的时候,他们已经忘记他们自己的从前了,大部分脑袋力量也被封闭了起来,他们开始用自己仅剩的脑袋力量去完成自己接下去的生活,慢慢发明一些对自己有用的东西
- 记录整个过程的仪器因为一个意外事故被埋在土里面,直到被主角发现
- 体验了整个过程后,主角决定为自己身为人类做最后的努力说服地球人改变生活方式
End
整个故事结构都是忽然出现的,就是想用比较反传统的观点去呈现地球的历史以提醒人类要爱护地球。把太多不同的观点挤进去,希望不会反效果啦。哈哈
时代不同了
很多老人家都会说,以前逢年过节才能吃到鸡肉,不像我们现在什么时候想吃就可以吃到,烟花呢也只是在电视机上面看得到,现在就不管什么鬼日子都在放烟花。时代真的不同了。
时常,游览一些中学生的blog的时候,一直会发现到他们都在炫耀他们的电子产品;DSLR啦,PSP啦手机啦还有一些有的没的全部都有,而且都是不便宜的东西哦。也会时常看到那些中学生时常去大酒店吃自助餐,还在那里拍照留念。那些我们一直需要收很久的钱才能做得到的东西,在他们的眼里就那么的轻易能获得了。
我们这一代比起上一代人来讲真的幸福了很多,下一代比我们这一代当然更幸福了。一代比起一代更不能够吃苦。时代在改变,以前的良好传统,刻苦耐劳,先苦后甜什么的都开始失去他的原本意义了。
时代不同了,看淡点吧。
Tuesday, July 14, 2009
目标: Server Admin
一直以来我都想要从IT Support中跳出来,但是就是不懂要做什么。
前几个星期看了一贴论坛帖子,感觉到server admin的工作很挑战性,而且不是全部人都懂。
忽然,我就有一种很强烈的感觉,“我要成为Server Admin”。
上个月我已经报读MCITP : Server Admin,下个月开始读,4个月出来我就可以拿到那个证件,然后在多读2张paper就可以升级变成MCITP: Enterprise Admin了。
读完这个后,我打算明年就报读Degree,不管借钱还是什么的,死都要得到degree了。
有文凭不一定能做到Server Admin,但是没有的话就真的没有机会了,就试一试了。
最终目标:30岁前成为Server Admin!
Wednesday, July 08, 2009
We Feed The World
刚看完we feed the world纪录片,做个总结,
*地球的一端有食物过剩问题,而另一端却有人没得吃而饿死。但是因为利益问题,那些食物过剩的企业不会想要把那些剩下的食物送给那些被饿死的人们,这就叫做间接谋杀。
*在生产线上最前端的渔夫农夫和劳工都是得到很少薪金在过活,而赚最多都是那些大企业老板。
*为了提高利润,大公司都用了非自然方式提升产量。
在影片中出现几个keyword如下,
hybrid vegetable ,GM Food(Genetically modified food),Pollination。看下面
http://www.freshplaza.com/news_detail.asp?id=2058
http://en.wikipedia.org/wiki/Genetically_modified_food
http://www.csa.com/discoveryguides/gmfood/overview.php
http://en.wikipedia.org/wiki/Pollination
http://www.i-sis.org.uk/GMFreeOrganicAgriculture.php
http://www.youtube.com/view_play_list?p=C8B6B7B59EF6F3D1
http://www.we-feed-the-world.at/en/film.htm
Tuesday, July 07, 2009
OXY Blackhead Clearing Wash
之前用的Neutrogena Deep Clean scrub用起来没有什么效果,里面的粒子太多会感觉到一点点痛。今天去watson买了这瓶OXY Blackhead Clearing Wash 50ml,才RM6.50。刚刚试过了,感觉很舒服,粒子不多,味道不错。
其实我在找除黑头和粉刺的mask的,都找不到,就只在网购区看到,在等着他们的PM。
用后效果以后再update吧。
Monday, July 06, 2009
修改 Blogger Template 教程 - CSS Layout
layout篇
上一集我讲到blog背景图片的几种模式,这次我就写背景前面的CSS layout。
css layout有很多种,常见的有2 column,3 column等等。
基本上重要的几个部分就是container,header,content(body),Sidebar,可能还有footer等等。当然一个完整的layout就不只这些,body里面它可能可以在分成2个coloum或者更多。sidebar也可以分成几个部分等等。
上图我就用比较简单的layout来讲解layout之间的连贯性,上面这个是最简单的2 column layout,很多人都会想改变他的宽度,但是因为参数太多,所以就随便改一个参数,改到layout跑到完。
从上图我们可以看到container是一个大容器,这个容器包含全部的部件,如果你把容器加大而里面的实物没有加大的话,你的所有部件就会移去左边,而右边就会留出一些空位,这样看起来就会怪怪的。
在如果,你把里面的部件加大了,容器却没有加大的话,他就会挤掉其他部件,然后那些部件就会跑去下面了。有时候可能你部件大过容器还可以呈现出来,但是可能你的screen resolution看来是完美,但是别人的screen resolution看的时候就会跑型了。
我们来看看coding部分,例子<div id="'container'">
这个code就是模拟上面图片的layout写出来的,
<div id="'header'">
</div>
<div id="'content'">
</div>
<div id="'sidebar'">
</div>
</div><div>
是开头,</div>
是结尾,有开始就要有结束。这个就好象我们学数学的braket一样(container(header)(content)(sidebar)),这个 “(” 就是开,而 “)” 这个就是关,道理是一样的。container包含了header,content还有sidebar。
那么我们要怎样改宽度呢?从上面的code我们了解到最大的容器叫container(可能你的template叫其他名字),那么我们就去找类似下面的code~
#container {
width:900px;
}
只要改那个width的数字就可以了,但是要注意的是,请把数字改在1020以下,因为目前还是很多人用1024*768的screen resolution,扣除 scroll bar就差不多这个数字了。除了数字,你也可以放%,比如90%,80%,那么这个container就会依照screen resolution来自动调整宽度,如果是改container里面部件宽度的话,100%代表跟container一样大小。
例子
container : 100%
header : 100 % <<-header放100%,其他东西就会跑到下面去了。 那么header就高高在上了。 content : 70 % sidebar : 30% 这样改法是有坏处的,如果游览者的screen resolution太大,那么你的content就会拉到很大,banner也可能跑位,他们resolution太小的话,你的部件会全部一个一个跑到下面去,很难控制。但是那些大网站如yahoo之类的都用%的,但是他们会自己detect你的screen resolution然后呈现不同的东西给你,那个就复杂很多。不推荐用%,尽量用px。 所以要改template宽度,首先要研究他的layout是怎样排,然后就跟着排法把相关的参数一起改到完。例子如果把container改1000px,那么就要改header 1000px,content+sidebar 1000px,还有其他相关的也要改。当然不会那么简单的,所以先在其他blog testing,然后看效果,把IE/Firefox拉大拉小看它会不会跑位,confirm好了过后才apply进去主要部落格。 下一篇可能会讲关于换背景的 目录
http://gfishdiary.blogspot.com/2009/06/blogger-template.html
Sunday, July 05, 2009
麻辣天后宫 090701 ~ 烂男人
刚看了麻辣天后宫09年7月1日这集,里面讲那些男人怎样当女人为提款机,一直讨钱。
看了这集,发现,男人不是自己开公司就很了不起的,不懂得运作和管理的话,比那些打工的男人还烂,没钱还跟女生拿钱周转,而且还叫女生做担保人什么的!!!
没有这个能力就不要戴那么高的帽子啦害人害己~
pps://hwhnaywqeb2hefoq2aqa.pps/090701-ÂéÀ±Ììºó¹¬.rm
http://v.zhuwo.cc/synthesis/20090703_19223.html
Friday, July 03, 2009
Thursday, July 02, 2009
Ubuntu + Lazyscript
昨天收到Ubuntu的邮件,立刻的我就开Virtual Box来setup。
第一次安装后,我尝试改他的display resolution,但是改了过后就不能进了,整个display card是detect不到的。哈哈
被逼的,我就重新安装过,这次就比较聪明了,改display之前,用snapshot试试先。原来virtual box是要用他自己的guest additional driver的,install过后真的好用很多,mouse也顺了很多。
之前看到有人讲install ubuntu一定要用lazyscript;果然放入lazyscript过后真的很好用,里面有很多很不错的软件。
看看上面这个图,华语字显示正常,msn也有替代software来开,也可以打华语字,看戏听歌都OK,听网络电台用IP也是可以开,file sharing也试过了;真的可以完全取代windows了,而且是完全免费的。
整个virtual hdd我设定10gb,全部install过后只用了6gb,而且3gb是swap partition 来的。我过后会在install apache等等server类的软件试试,可能我10gb会不够用,不能resize virtual hdd的,可怜到时可要用软件在virtual box里面ghost了。
http://www.virtualbox.org/
http://www.ubuntu.com/
http://code.google.com/p/lazyscripts/