本文作者是:Trenton Moss。
发表网站是:http://www.webcredible.co.uk/。
1.CSS字体属性简写规则
一般用CSS设定字体属性是这样做的:
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去:
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:
…
同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
补充:对于一个ID,不能这样写
…
也不能这样写
3. CSS border的缺省值
通常可以设定边界的颜色,宽度和风格,如:
border: 3px solid #000
这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。
如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
第1行就是显示,第2行是打印,注意其中的media属性。
但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。
比如你想整个卖东西的图标,你就用了这个图片:

这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
Buy widgets
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
#box { width: 100px; border: 5px; padding: 20px }
这样调用它:
…
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的,让它们显示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
这样调用:
这样,不管什么浏览器,宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
#content { width: 700px; margin: 0 auto }
你会使用
来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
这会把网页内容都居中,所以在Content中又加入了
text-align: left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:
#container { position: relative }
这样容器内所有的元素都会相对定位,可以这样用:
如果想定位到距左30点,距上5点,可以这样:
#navigation { position: absolute; left: 30px; top: 5px }
当然,你还可以这样:
margin: 5px 0 0 30px
注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:
#navigation { background: blue; width: 150px }
较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?
不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。
body { background: url(blue-image.gif) 0 0 repeat-y }
此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。
2006-02-19 23:16:16 by 番茄红了鸡零狗碎
在Blueidea看到的一段完全使用CSS制作的下拉菜单,绝对的强~因此收藏了一下。
这个样式最大的收获就是CSS也可以像JS一样,使用例如:div.open,a.outer:hover之类实现类似于MoveOut的效果,看完这段CSS样式代码,受益非浅啊~~
[code][font=Arial][size=9]
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ ]>
2006-02-18 21:47:16 by 番茄红了鸡零狗碎
转换程序适用于2S-SPACE Cx15,主要转换内容:
[color=#E00000][b]1、站点基本信息
2、日志评论信息
3、日志内容
4、BLOG分类信息
5、引用通告信息
6、会员信息
7、友情链接信息
8、UBB表情
9、留言本信息
10、过滤了日志首页显示内容在PJBLOG 2.5中的无效字符
11、过滤了日志内容在PJBLOG 2.5中的无效字符[/b]
经测试后,数据库完美转换,由于本人的2S-SPACE中的数据并不是很多,或许有的地方还没有测试出来,如果存在错误请与本人联系:MSN:aultoale@gmail.com
使用方法:
使用该转换程序成功转换数据库后,请登录后台,站点基本设置–初始化数据–勾选上所有选项,并执行。
点击下载此文件
注:无法转换的朋友请重新下载,已更新部分无法转换的错误,如果仍存在错误请联系本人。
2006-02-18 17:08:05 by 番茄红了鸡零狗碎
由于L-Blog V1.08 (SE)默认是没有Tags功能的,因此该转换程序中并没有写入Tags的转换功能。
看了一下网络各种L-Blog程序的变种版本,其中Tags数据表各有不同,需要的朋友就请自己手动转换了。(或者可以参考LBS和ABlog的TAGS转换程序自行添加!)
主要转换了以下数据库信息:
[b][color=#EE0000]1、站点基本信息
2、日志评论信息
3、日志内容
4、日志分类信息
5、Trackback引用通告信息
6、会员信息
7、友情链接信息
8、UBB表情
9、关键字(KeyWords)
10、留言本信息
另附上本人的L-Blog&PJBLOG数据库结构对照表,以用作大家的参考。[/b]
使用方法:
使用该转换程序成功转换数据库后,请登录后台,站点基本设置–初始化数据–勾选上所有选项,并执行。
点击下载此文件
注:如果数据库比较大,转换时间过长,请下载数据库在本地进行转换。
2006-02-17 22:32:28 by 番茄红了鸡零狗碎

晚上朋友给我发来个游戏,,闲来无事就进去玩了几把~~
游戏客户端做得不咋滴~~不过在里面倒是找到个还不错的游戏,名曰“蜀魏枭雄”。在线人数并不多,简单注册一个用户名就进去了。
刚开始以为很简单,嘿,电脑可不差~玩了几把就下定了决心,不玩赢电脑决不罢休。这个游戏别和网友玩,得跟电脑对战,可怜的我啊,,居然玩了N把才赢了一把。
游戏规则有点类似台球,当你把对方所有的棋子全部打到界外就赢了,棋子越大威力越大。
有兴趣的朋友可到这里下载试试:点击下载
2006-02-16 22:48:40 by 番茄红了鸡零狗碎
a-Blog V1.29[SP2],即原何昕博客,修改自L-Blog。
转换程序由Anson的a-Blog V1.29 To PJBlog2.5转换程序修改,
适用于a-Blog V1.29[SP2],现提供下载。
相对于原转换程序作了部分修改,
增加了TAGS、关键字(KeyWords)、UBB表情、站点基本信息的转换。
经何昕博客提供的数据库测试后,所有数据全部转换成功。
使用方法:
使用该转换程序成功转换数据库后,
请登录后台,站点基本设置–初始化数据–勾选上所有选项,并执行。
点击下载此文件
注:[color=Red]如果数据库比较大,转换时间过长,请下载数据库在本地进行转换。
2006-02-15 18:55:47 by 番茄红了鸡零狗碎

无意之间发现一个很不错的取色工具,Color Schemer ColorPix.
这是一个免费软件,相对于之前个人使用的TakeColor8.0感觉更方便。个人比较喜欢的是对于屏幕像素的精确定位,操作也相当简便,并且可以放大2800倍,可谓非常精确。
1、打开后使用快捷键Ctrl+C取色,在这里给出了四种色彩值:RGB、HEX、HSB、CMYK。
2、当需要将工具放置在最前端时,可点击窗口上的“+”号。
3、当需要锁定某一颜色时,可以按小键盘上的“+”号使色彩固定。
4、快捷键Ctrl+M打开取色控制面板。
下载地址:http://www.tblog.com.cn/down/ColorPix.rar
官方网站:http://www.colorschemer.com/
PS:里面还有许多不错的软件哦,可惜是收费的。例如:Color Schemer Studio,提供了非常优秀的网页配色方案,不过有15天的试用期,各位可以尝试使用一下。