Archive for September, 2009

CSS中何时使用id何时使用class

CSS中的选择符除了可以选择HTML预定义的标签,比如<a>,<p>,<div>。但是可以选择用户自己定义的id或者class。id与class的最主要不同就在于id不能重复,只能使用一次,一个id只能用于一个标签。而class可以重复使用,同一个class可以定义在多个标签上。实际上从名称就能看出来id与class的区别,id是识别符,而class是类。

那么什么时候使用id,什么时候使用class?根据我的经验来看id用于特殊的标签上,因为这个部分就这么一个,没有与其他的地方重复的。而class主要用于一类有同样特征的元素上。因为id只能用一次,class可以无限次使用。

打个比方,就以一个Blog来说。一个Blog只会有一个头部,用于放置Blog的名称和Logo之类的信息。因为就只有这么一个,所以定义id是最适合的,没有其他的地方与头部类似。而在Blog首页可以显示多篇文章,一般都是10篇,那么每篇文章的内容区域都有一个类似的样式,所以定义class是最合适的,因为有10个同样样式的部分,为同一个class定义样式可以应用于10个拥有同样的class值得元素上。

也就是说,只有一个独立样式的元素适合用id,而有多个元素拥有同样的样式的话适合使用class。

用Illustrator做的新图

昨天用Illustrator做了一幅图,这也是开始学习Illustrator以来第一张完全由Illustrator制作的图。之前有不少图都是Illustrator中制作元素,然后再导入到Photoshop中处理。

Illustrator Monster

用Jumplist Launcher替代Windows 7中消失的快速启动栏

装上Windows 7之后第一反应就是没有快速启动栏了,虽然说可以把程序直接拖到任务栏上锁定,但是多了就乱了,而且还放不下。但是Windows 7有一个很好的特性就是Jumplist,利用Jumplist可以实现快速启动栏的效果。Jumplist Launcher就是用来创建类似于快速启动栏,放置一些常用的程序的。这样只需要把Jumplist Launcher拖动并锁定到任务栏上就可以了。然后只需要右键点击Jumplist Launcher选择程序就能运行了。相当方便,而且还很节省空间。

软件最多支持保存60项,我现在只用到了10项,应该说60个足够了。而且软件也非常小,压缩包只有500K不到。

下载Jumplist Launcher 纳米盘 SkyDrive 大米盘

Jumplist Launcher

用Java和Flex编写的彩票随机号码生成器

最近宿舍的人爱好买彩票。基本每次都是买随机,但是有些号买的看上去没有中奖的样。所以我用Java和Flex分别编写了彩票随机号码生成器,可以自己先算好看中的,一次看不中可以多点几次。这个生成的是体彩的7位数,娱乐性质大于实际意义。彩票这东西其实每个号码的中奖概率都是一样的,只有在人看来有不同的中奖可能性,只是心理安慰而已。

用Flex做出来的swf文件有253K,而用Java做的jar文件只有2K多一点,这个差距也太大了。估计是Flex中组件的主题也保存进swf中,导致文件体积庞大。为了节省流量,进入文章后才能看到swf版的生成器,如果你有兴趣可以试试,但是如果认为这个生成的号码一定能中,那你就是在做梦。至于Java版的,点击这里下载jar文件,前提是你的电脑中要安装了JRE运行环境。没有的话去这里下载安装

Read more »

很遗憾IE6仍然是占有率最高的浏览器

雅虎统计终于在一个多星期之前支持Windows 7和IE8的检测了。根据上一个星期的我的BLOG的统计结果,以UV独立访问者来比较,IE6仍然是占有率最高的浏览器。实在是令人失望。

browsers-market-share

表中看到IE6仍然有三成的市场占有率,之后就是IE7和IE8,Firefox3.5。IE6占有率居高不下在于很多人不懂或者懒得升级。另外有不少人知道有Firefox,Opera,Google Chrome这些浏览器,但是都从来不去尝试,死抱着IE不放。实在是可悲。

新的MP3 SONY B142F

今天买了个新的MP3,SONY B142F,从现在开始我的那台04年买的SONY D-NE10的CD机就可以退役了。以前买CD是冲着音质好,但是现在越来越感到刻碟的麻烦,而且由于我比较喜欢拆东西,CD有些地方已经不灵了,几乎很少用。买个MP3主要是上学路上听的,坐车上学大概要一个半小时的路程,路上实在太无聊了。SH-01A的信号不太好,而且又不能上网,所以买个MP3打发时间。

这次主要就是买一个简单的MP3就行了,所以买了一个SONY的最低端的。虽然只买一个低端的,但是我只考虑SONY的,音质不错,起码要比iPod好。其实很喜欢微软的Zune HD,但是那个东西肯定很贵,而且目前没有在国外上市的计划,所以买个低端的,高端的留着以后买。另外,买MP3还有一个理由就是方便学习日语,这样听听力就很方便了,虽然我知道我不会经常听的。

Windows 7就是不错,直接把MP3插上去就能识别了,而且还有图片,相当智能。另外B142F支持充电3分钟听90分钟的功能,这样就算没电早上充3分钟也就够了。

sony-b142

Read more »

免费加密软件TrueCrypt

TrueCrypt是个免费开源的加密软件。它可以把加密的文件保存为一个独立的文件,并且虚拟成一个分区。而且TrueCrypt还能够加密整个存储设备,包括可移动磁盘,比如U盘或者移动硬盘。TrueCrypt加密是自动的而且实时的,另外在读写加密的文件的时候能够做到和没有加密的文件一样快速。

如果你找不到一款合适的加密软件的话TrueCrypt就很不错,尤其是你的电脑中有很多重要的商业资料,一旦泄露损失就大了。

下载TrueCrypt

TrueCrypt Screenshot

在HTML中给文字添加title属性

熟悉HTML的人中大部分都知道title属性存在于链接和图片中。title属性能够显示一个标题,也可能告诉人点击了链接或者图片之后会发生什么。但是有不少人都不知道文字也能添加title属性。其实这需要借助于abbr标签,abbr在英语中就是指缩略语的意思。而abbr标签中可以添加title属性,这样一个最大的用处就是在写一个缩略语的时候可以通过title属性来显示全称。

例如下面的这个例子:

<abbr title=”Cascading Style Sheets”>CSS</abbr>

接着再通过CSS修改abbr的样式让人知道这里是与众不同的:

abbr {
    border-bottom: 1px dotted #000000;
}

最终显示的就是下面的这个效果

CSS

利用JavaScript显示随机图像

显示随机图像有其一定的意义,比如网站的上的随机标题,或者你很懒不经常更新网站,那么显示随机图像就能让你的访问者认为你经常更新的假象,当然时间长了就不起效果了。我主要从理论上讲解用JavaScript显示随机图像的技术,至于具体应用自己决定。

利用JavaScript显示随机图像的原理。将文件名存储在一个数组中,然后用JavaScript生成数组长度范围内的随机数,最后在网页加载时加载与随机数对应的图像。原理很简单,实现起来也不复杂。

首先创建一个(X)HTML文件,在<body></body>标签中加入img元素:

<img src=”image/road.jpg” id=”randomImage” name=”randomImage” height=”300” width=”300” />

这段代码假设图片在image文件夹中。预先设置src属性是防止用户的浏览器没有开启JavaScript而显示的默认图片。id是关键,是JavaScript函数加载图像的桥梁。

Read more »

用HTML描述内容 用CSS描述样式

Web刚开始发展的时候网页是相当丑陋的,那个时候几乎都是文字,没有色彩没有样式。Web页面使用HTML语言编写,随着Web的不断发展,人们开始注重网页的美观了,因此可以为文字设定字体及颜色,因此有了font属性,慢慢的有了各种描述外观的属性。

随着Web的继续发展,HTML变得越发的臃肿,一个HTML不仅要包含内容,还要包含他所能展示的外观。如果只有一个HTML文件倒还好,可是不多数情况都是一个网站有大量的HTML,而且样式保持一致。因此,如果当修改一个HTML的外观样式那么其他的都是跟着改,这样就出现了一个相当庞大的工作量。

于是CSS诞生了。CSS相当具有革命性,它将外观样式与内容分开,形成两个独立的部分。让HTML处理数据和结构,将外观样式交给CSS。当开发一个网站的时候,所有的网页都应该保持一致的样式,因此只需要将样式独立出来放入一个CSS文档中,然后再将所有HTML连接到CSS上。这样大大的减少工作量,而且便于维护,因为只需要更改一次CSS就可以使所有的HTML的样式发生改变。这就像是程序开发中的类。

可是CSS诞生了很久,但是依然存在将样式放在HTML中的现象,还有些情况是HTML中保存部分样式,CSS中保存部分样式,这些虽然都能显示正常不过都是不被W3C所推荐的。

还有另外一种情况,目前的各种浏览器对于网页标准的支持参差不齐,包括HTML,XHTML以及CSS。其中以微软的IE系列问题最严重,IE系列中又以IE6问题最多。所以选择一个对标准的支持良好的浏览器能够使你能够更好的欣赏到网站作者的设计用心。