标签/Tag为[CSS]的文章

在免费空间的 Typecho 上启用了 bigfa 的 Puma主题 ，感觉超赞。

根据自己需要，调整了一些东西。 特意记下，以免忘记。

1. 首页 more 标签 CSS 定义 和 text-shadow。

   codep.more {
   text-align: center;
   padding-top: 25px;
   }
   p.more a {
   border: 1px solid rgb(204, 204, 204);
   border-radius: 5px;
   padding: 5px 10px;
   }
   p.more a:hover {
   background-color: #3B5998;
   color: #FFF;
   }
   .textShadow {
   text-shadow: 1px 1px 2px #666;
   }
   

2. 顶部距离调整：

   code.surface-content {
   margin: 10px auto 100px;
   max-width: 900px;
   background-color: #FFF;
   }
   

3. 博文页面的上一页，下一页， 合适的位置增加：

   code<ul class="post-near">
   <li>上一篇: <?php $this->thePrev('%s','没有了'); ?></li>
   <li>下一篇: <?php $this->theNext('%s','没有了'); ?></li>
   </ul>
   

MT下最简单的实现CSS压缩(优化)的办法

大家都知道。 CSS压缩可以给网站访问提速， 这个也是 Google Yahoo 等大网站对于网站优化提出的标注之一。
但是，CSS压缩对于网站开发者来说，也意味着可读性降低，也意味着需要保留两份代码，一份正常的可读性高的，一份压缩的的供网站使用。
对于业余站长，压缩CSS是个可爱又可恨的东西，需要第3方工具来完成。
其实，对于 MT 程序来说，利用一点点模板变通可以实现 CSS的自动压缩。
简单的来说就是利用 MT 模板 Tag 自身的几个全局过滤函数的过滤/替换功能：

1. strip_linefeeds ：
   strip_linefeeds 很好理解，就是把Tag内所有的换行去掉，让他变成一行。 使用办法 <$MT:tag strip_linefeeds="1" $>。

2. strip ：
   strip 过滤则是用特定字符替换掉 Tag 内的就空白（1个或者多个连续空格），比如我要把这些空白替换成一个空格则是用 <$MT:tag strip=" " $>。

3. 正则方式regex_replace=["正则表达式匹配部分","要替换成的内容"] ：
   这是最强大的功能，我们用它来替换掉原始CSS 的注释部分。 当然为了表达式简单，我只替换/*[注释内容]*/ 方式，而不处理 //[注释内容] 样式，这个就需要你的原始CSS 的注释必须是 /*[注释内容]*/ 方式，而不是 //[注释内容]，但是修改所有的 //[注释内容] 为 /*[注释内容]*/ 并不是太繁琐的事情。如果要处理 //[注释内容]方式，必须在 strip_linefeeds 之前使用。我的使用办法 <$MT:tag regex_replace="/\/\*.+?\*\//g","" $>。
   注意，正则表达式兼容 Perl 正则，但是只识别 /../模式。

4. trim ：
   trim 很好理解，就是把Tag内开头和结尾的空白去掉。 使用办法 <$MT:tag trim="1" $>。

不知道 6A 出于什么考虑。从 MT3.3x到 MT4，MT 模板的一些定义变化了。导致旧的CSS没有办法直接移植到新的系统（如果你使用新系统带的模板的话）。

主要变化在 页面布局 的变化，基本上对应关系如下：

layout-two-column-right -> layout-wt
layout-two-column-left -> layout-tw
layout-three-column -> layout-wtt（宽-窄-窄） 或者 layout-twt （窄-宽-窄）

另外， 模块Class 名字原来 叫 module 现在改成了 widget ， 原来所有以 module 的元素名字也改成了 以 widget 开头。

大概变化就这样，如果要使用旧风格,直接把 CSS 按照上面的进行替换，然后再修改细部就可以了。

今天无意中看了一篇文章，作者显然是CSS+Div的崇拜者，对 含有 table 的网页特别不屑一顾，甚至说了 tableless 是 Web2.0的重要标志，含table 的网页就是上个世纪的老古董之类的话：）

恩，tableless 是 Web2.0的重要标志这个我倒不反对，我理想中的网页在脱掉CSS外衣后应该有很好的可读性，这一点 tableless 的确值得推广，网页设计我不专业，但是我也尽量让自己的页面在逻辑上可读性高一点，CSS+ DIV 的确是个好主意。

但是是不是要把 table 一秆子打死呢？ 我觉得到也未必。table还是必要的。只要不影响可读性，table 依然可以用，并不是什么上个世纪的老古董之类。
如果单纯为了追求 TableLess 所谓的Web2.0而不使用table而用 DIV +大量的CSS来嵌套模拟的话，似乎就有点钻牛角的感觉了：）
只要网页中不使用 table 来定义宽度，颜色等应该用CSS定义的东西，而table只用来做单纯的"Table"就可以了：）
就象这样：
原来的代码是这样的

<table align="center" border="1" bordercolor="color1" cellpadding="x" cellspacing="y" height="xxx" width="xxx"> <tr> <td align="center" background="xxxx" bgcolor="xxx" width="xxx"><b>状态</b></td> <td align="center" background="xxxx" bgcolor="xxxx" width="*"><b>主　题</b></td> <td align="center" background="xxx" bgcolor="xxx" width="xx"><b>作 者</b></td> <td align="center" background="xxx" bgcolor="xx" width="xx"><b>回复</b></td> <td align="center" background="xxxx" bgcolor="xx" width="xx"><b> 最后更新</b></td> </tr> </table>

改后的代码是这样的

<table id="posttable">
<tr>
<td id="state">状态</td>
<td id="topic">主题</td>
<td id="author">作 者</td>
<td id="reply">回复</td>
<td id="last_reply_time">最后更新</td>
</tr>
</table>

#posttable { .... } #state ,#topic,#author,#reply,#last_reply_time {.....}

这样就足够了：） 也满足了可读性 :P 而不必要去为了追求Tableless 而去花大量的时间重写 :)

PS: 一家之谈。。。

This is a SiteLog of Easun's WebBlog。
通过 Google Analytics 显示（见下图），来访者的 屏幕分辨率 大于等于 1024x768 的已经达到了 93% ，联系实际，现在的电脑显示器似乎最基本的就是支持 1024x768 吧？
我的WebBlog一直是按照 800X600 设计的，现在看来有的过期了，新的 MT4.0b 模板默认就是 1024x768的，看来我也要小修改一下了：）

仅仅是记录，暂存。。。方便随时编辑而已
还不完善，准备替换 Perl China Wiki Site 的CSS，容我慢慢优化。