Kiefer’s Blog

WordPress 2.5 Now!

之前和CNFinance一样是2.2的，前几天CNFinance被78.109.21.80插入大量垃圾代码只好升级到2.3.3，没想到没过两天2.5就出来了，看样还要再来一遍，不过这次貌似不动数据库了。

PS: CNFinance WordPress 2.5 Now!

使用以下方法就可以在中国的局域网内访问Internet了。

http://homepage.mac.com/v2ex.livid/software/happy.zip
启动这个软件之后将浏览器的代理地址设置为 127.0.0.1 端口 8567。
From Livid

详情见 http://naked.dustindiaz.com/ :p

29号，同学说网站访问不了了，我就没在意，这鸟空间经常访问不了。
30号，一大早，我打开邮箱看到了Hstear XML News Aggregator的信，说系统己经29次无法处理你的RSS，这我才注意起来，一般访问不了，不会这么长时间啊，我就咨询空间商的客服，我把IP地址告诉他们，他们一看就发给我一个通知，说他们的服务器受到攻击了，他们被迫换了IP。我CAO,换IP都没有通知我们，我就问他们，他们说发过短信给我们，屁，29，30我都没有收到。这种更换IP的事情，都没有通知到客户，至少也要给我们发个邮件吧。由于我在yahoo买的域名，更改IP很是麻烦，yahoo的网页根本打不开，打开了很长很长时间，在残缺的网页里才把IP改了。
然后我就和他们理论，他们还强词夺理，唉，啥也不说了，以后不在贪图便宜了，这个空间100M，138块，空间用的很不爽，经常打不开，再便宜也不能这样啊，这家空间商近段时间经常在Blueidea做google广告。
PS：我还和他们说由于他们失误，造成我们损失怎么办？他们看我态度比较强硬，就说赔偿，把我帐号要过去了，到现在也没反应。
再PS：兄弟们不要再买便宜的空间了，用了就后悔了。贵的还不知道怎么样？！

经过一段时间努力，网站测试版已经好了，大家可以访问http://www.angere.net查看。

“在他（她）心中，除了亲密的爱人、年少时的同学、思念的家人，又多了一个早晚昼夜时常倾谈的对象——自己的博客，貌似博主很好的实现了工作与生活的平衡。一句话，博主很能写！现在就把博主的博客文章全部集结起来，联系出版社准备发行《祥林嫂后传》吧。人称每周一歌的就是博主了，其实适当的距离反而更有新鲜感。”

上面这句话是对我的评语！

有道关于评语的说明：

博客档案中的博客评语是根据作者的发文习惯等信息由系统自动生成的。您可以快捷地把这段评语复制到剪贴板，然后粘贴到泡泡、msn等聊天对话框中与您的朋友分享。

有道的博客搜索还可以统计出：习惯发文时刻、习惯发文星期、发表文章长度等等，确实挺好玩的。

有道 www.youdao.com

实现圆角的各种方法

一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成

#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
八.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
<div class=one two></div>
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>
样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url(images/***.gif) #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

十三.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

#content:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } /*closing floats*/

十四.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

<!– 你的布局这里开始 –>
你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
/* */
* html p {
declarations
}
/* */
2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

<!–[if IE]>
<link rel=stylesheet type=text/css href=ie.css />
<![endif]–>
十七.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。

十九。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 ，他们会使用缺省值，这点要记上。

二十。CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

二十一。CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container { position: relative }

这样容器内所有的元素都会相对定位，可以这样用：
<div id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30点，距上5点，可以这样：

#navigation { position: absolute; left: 30px; top: 5px }

当然，你还可以这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

二十二。IE6 vs firefox
width: 100px !important; //兼容firefox（firefox不论前后，认!important。）
width: 120px; //兼容IE6（多个相同的属性，IE系列认最后一个，无视!important的存在。）
注意此方法不兼容IE7

二十三。IE7 vs firefox
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

二十四。把一些常用的，先在前面统统定义好
body,ul,form,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,img{
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
body {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
font-size: 75%;
margin: 6px 0;
text-align: center;
}
a {
text-decoration:none;
color:#666;
}

二十五。DIV+CSS排版中制作细线条的二种方法–FOR IE
1。.line11{
background: #CCCCCC;
height: 6px;
overflow: hidden;
}
<div class=”line11″></div>

2。.line13{
background: #CC0000;
height: 6px;
font-size: 1px;
}
<div class=”line13″></div>