标签/Tag为[CSS]的文章

bigfa 的 Typecho Puma 主题调整记录 ,

在免费空间的 Typecho 上启用了 bigfaPuma主题 ,感觉超赞。

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

  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>
    

--EOF--

[模板]MT下最简单的实现CSS压缩的办法 ,

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" $>

[随笔]MT4 模板的变化和3.x系列风格移植的注意事项

不知道 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 按照上面的进行替换,然后再修改细部就可以了。

--EOF--

网页设计,别片面追求tableless

今天无意中看了一篇文章,作者显然是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>

加上针对 table 的 CSS

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

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

PS: 一家之谈。。。

--EOF--

[SiteLog]界面调整为适宜1024x768分辨率观看

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