margin和padding的意义相信大家都很清楚，可是在具体应用中， 到底应该使用哪一个，就比较难于判断了。 这篇文章 说得挺清楚的，在这里翻译一下，供参考。
何时应当使用margin
- 需要在border外侧添加空白时。
- 空白处不需要背景（色）时。
- 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding
- 需要在border内测添加空白时。
- 空白处需要背景（色）时。
- 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
浏览器兼容性问题
在IE 5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。 通过改用padding或指定盒子为display:inline可以解决。
这两天一直在忙着做一个新的主题，暂且命名为Crystal吧。希望能带来一些新的体验。
做这个主题并没有花多大工夫，由于没有使用透明png图片，因此IE6的透明png问题就不用考虑，减少了很多工作量。而且也没有在Photoshop里打稿子而是直接写的CSS，因此页面设计上感觉有些粗糙，也是一个缺点吧。页面风格参考了awflasher的blog，在此向他表示感谢。
这两天一直在策划着做一个新的主题，一个看起来更干净些的主题。 风格么，自然还是选择Web 2.0的那些特性了。 首先要做的第一件事儿就是做个logo。
以前做logo都是用photoshop，不过做好的大图缩小之后总是达不到想要的效果，于是斗胆尝试了一下Illustrator。 在网上找了好半天Illustrator，除了一个视频教程之外就没有入门级教程了，而那个视频教程看起来会急死人。 没办法只好自己摸索了，好在Adobe的东西基本操作都差不多，弄了一个晚上也弄了个八九不离十。 在这里诚心请教各位Illustrator高人指点。
先秀一下新做的图标吧。这是大图：
将图标应用到页面上的效果。背景加了些黑色条纹。
Update：被fcicq说那个图标和网址放在一起不太协调。的确，自己也觉得图标上的衬线字体与网址的无衬线字体不般配。 但图标中若使用无衬线字体，那么一个简单的“i”字母又显得过于单薄。干脆重新设计图标吧。
阅读全文 »许多网站都使用了下拉菜单效果，但大部分都是用Javascript实现的。 自己写过下拉菜单的人应该知道，处理onmouseover和onmouseout事件极其繁琐。 而实际上，仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。
不过遗憾的是只有完全支持:hover伪类的浏览器如Firefox才能实现这种效果。 像IE这种仅能部分支持:hover的浏览器就只能老老实实地用Javascript来做了。
请看下面的代码。
<html>
<head>
<style>
</style>
</head>
<body>
<div id="menu">
<h3>Select from menu</h3>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
</ul>
</div>
</html>
我们尚未定义样式表，这个页面显示结果就是一个简单的列表。
为了实现下拉菜单，我们先将<ul>元素隐藏起来：
#menu ul { display: none; }
然后应当让菜单在鼠标经过时显示，所以应当为<div>的:hover伪类添加如下定义：
#menu:hover ul { display: block; }
阅读全文 »今天来讲一下CSS中的绝对定位和相对定位，即position属性的使用方法。
position属性常见的值有三种：
- static: 不使用定位（默认值）。
- absolute: 使用绝对定位。
- relative: 使用相对定位。
在解释定位方式之前，首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序， 从上到下依次排列。例如下面的代码将产生如下的效果：
又懒了一下，好几天没更新了。其实上周买的书到了，这几天在忙着看书， 没顾得上研究技术。昨天一口气看完了《CSS禅意花园》， 觉得这本书不愧CSS设计的王者称号，无论从欣赏还是学习的角度，这本书都值得一读。
当然，原书网站CSS Zen Garden也一定要去看看。
今天先来介绍一个从这本书上学到的小技巧：如何用图片替换文字。
所谓图片替换文字就是用图片代替HTML中的某个文字元素，如标题。网站设计中很常用， 比如我想用图片而不是文字来显示blog标题，我可以在本应当显示<h1>的地方显示一个<img>， 但这样页面中失去<h1>会影响搜索引擎评分。当然我也可以通过css给<h1>设置一个背景图片， 但<h1>内的文字必须显示，否则也会影响搜索引擎评分。 可以使用下面的方法之一来通过CSS完美解决。
阅读全文 »今天看到一篇光照效果教程， 不禁大为赞叹，原来滤镜还可以这样使用。它不仅仅是一篇光照效果滤镜的教程， 也提供了高斯模糊滤镜的一种用法。翻译过来放在这里作为参考吧。 其实并不是原文翻译，只是用我自己的语言将步骤记录下来而已。 所用的Photoshop为CS3。
最终效果如下：
下面来看教程。
阅读全文 »最近关于photoshop很流行的一篇文章 《80款最好的PhotoShop文字效果制作教程》， 其中介绍了放射字的制作方法。 做法很简单，就是极坐标+风，以做出各种各样的放射线效果。我们先来看看教程。
放射字的做法
先来看看最终效果。
通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。 表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。
这个方法出自creamu.com。 先来看看代码和效果吧。
<style>
#warp {
position: absolute;
width:500px;
height:200px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
border: solid 3px red;
}
</style>
<body>
<div id=warp>Test</div>
</body>
原理很简单：将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半， 使div居中显示。
原文链接。 这是一篇关于网站易用性的文章，作者以亲身体会讲述了43条 网站设计中常犯的错误，而无疑这些错误会大大影响网站的可用性。 如今网站易用性已成为一种趋势，但纵观国内的各大网站， 似乎易用性并未成为设计者们广泛理解的概念， 因此希望这篇文章对大家能有作用。
1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。
2. 让网站易于速读。因特网不是书，因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。 项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。
3. 不要使用难于阅读的花哨字体。当然，某些字体可以让网站精彩纷呈。 不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读， 你应该让阅读过程舒服些。
4. 不要用小字体。如上一条所述，你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话， 我就再也不会去访问它了。
5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。 错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站，在必要的时候他们会回来的。
6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小，你会在他们面前失去信用。
7. 不必要时不要让用户注册。直白地讲，我上网是为了获取信息，不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你 能提供的消息非常有价值）。
8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。
9. 不要过多使用Flash。Flash不仅会增加网站的读取时间， 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。
10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。 记住，永远不要使用音乐。
阅读全文 »
