我的CSS Template

决定从最简单的 Template 武装起来。
显式代码，强调片段

.snippet {padding-left:20px;padding-right:20px;padding-bottom:20px;padding-top:5px;background:#FFEEA8;}

显式 Latex 公式

<script type="text/javascript"src="http://tex.yourequations.com/"></script>

大小调整，发现按比例调整很不好，还是根据 margin, border, width 各自绝对宽度，用笔算一算，就很清楚了。这些参数的关系如下图：

注意 width 指的是 element 的宽度，padding 之内最小的box 的宽度。另外需要注意的是，background 包含 padding 和 element，（border 有自己的颜色？）而 margin 是透明的，所以显示的是 parent element 的颜色。
发现用渐变色的图案做背景，还挺好看的。用 photoshop 可以很简单的创造各种简单的渐变背景。
目前的设计以浅色调为背景，仅靠颜色来划分区块。看看下面的样子吧。


v 0.9: 右键另存为获取 Template。

v 0.91
除了 w3g 的 XHTML 名字空间，blgger 用到了其他名字空间，这些在标准的 XHTML 文档里应该找不到吧。

xmlns  = 'http://www.w3.org/1999/xhtml'xmlns:b  = 'http://www.google.com/2005/gml/b'xmlns:data = 'http://www.google.com/2005/gml/data'xmlns:expr = 'http://www.google.com/2005/gml/expr'

譬如 b 空间中的 section, widget, includable, if, else 等等。这儿有很友好的介绍。
本版本去掉了 header 中许多 b 空间的控制语句，仅仅简单的设置图像为背景。另外为 sidebar border-left 加了一条实线。

v0.92


改动了颜色，这方面实在没什么经验，主要参考了 stopdesign，header 分为上下两层，上层两张图片，下层为链接。
Trick:

1. 左右并排的 content 要设置 float，否则都是上下排列了
2. 最精确的方法还是用 table，以后再学了
3. 设置 content 在垂直方向上处于中心，如果是单行的话，最简单的方法是设置 line-height 为父元素的高度。其他方法参见这儿
4. photoshop 做出来的图片可以是空背景（把背景层删掉），好神奇。我用 Matlab 读了像素，背景的地方是 o，但是 AcdSee 打开看，背景是白色的，看来各个软件处理还不一致。注意 AcsSee 再保存时，空背景会被设为实背景。
5. Header 下方链接设置成 hover 时亮度增加，看起来就像闪光一样。挺好玩的。
   

v0.93

1. 添加了 search blog。注意这个和 google 搜索那个不同

<p align='center'><form action='/search' id='searchthis' method='get' style='display:block'><input id='search-box' name='q' size='15'/><input id='search-btn' type='submit' value='Search Blog'/> </form></p>

2. 隐藏了 navbar
   

v0.94 in preparation
每一段加 <p></p> 也太过麻烦。考虑加入如下代码，这样每一个回车就有0.5元素的增加。但是这样就不能用连续的两个回车了。

br {
  margin-bottom:0.5em;
}

还搞不懂的：

1. height 如果不做设置的话，好像是内容有多少就有多高。双栏的情况下，左右两边高度不一致，再设置颜色的时候挺讨厌的。用什么方法可以让一个 box 的高度越大越好，直到包含它的 box 的最小高度。
2. 按钮如何制作？
   

v0.94
多种浏览器下 pre 可以自动换行，去掉 .snippet 的滚动条

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
} 

附：设置行高

.post-body {
  margin:0 0 .75em;
  line-height:1.7em;
}

.post-body blockquote {
  line-height:1.7em;  
} 
 
letter-spacing 可以调整字间距 

Trick：
如何让一些贴子置顶：可以自己修改 template, 在 sidebar, 添加 元素即可。