我做的主题Mflat最新上线

By
WP札记

3天时间,终于完成了第一个主题。目前正在测试,欢迎指出错误~谢谢

该主题灵感完全来自于网络。从经典主题一步一步学习,又查例子,又搞函数分析的,做个主题真TND不容易。废话不多说,我还是挑几个关键点扯扯吧。

1、各种浏览器的代码兼容。考虑到目前css3的应用很多,所以博客许多地方还是有所涉及的,比如text-shadow,box-shadow等等。但是部分css样式支持的浏览器各有差异,具体就是在目前没有统一版本前,尽量加上前缀(Webkit 引擎的浏览器为 “-webkit-“,Firefox 则为 “-moz-“),具体情况请参见 The Basics of CSS3 。这篇文章写得比较详细。

2、列项目颜色交替显示。比如木木同学的侧栏翻页效果中有 #tab-content,那么在content的列项目里可以使用例如 ul li:nth-child(odd) 这样的代码来隔行进行颜色更改,我的代码是这样的:

#tab-content ul li:nth-child(odd)
{
background-color:#F7F7F7;
}

效果见侧栏。

3、样式的设计都有章法,只要自己不迷糊,样式就不会很乱。其中有几个东西经常弄迷糊:margin和padding、float之后元素溢出。这俩问题解决起来都有点意思。我是一个一个试验之后发现的。

margin设定的是元素所占空间到邻元素的距离,就是元素外的空间。

padding设定元素内容到元素边界的距离,就是元素内的空间。

float之后溢出,我都是加上overflow:hidden解决的,没查过也不知道啥原因。

4、标签云的设计。我是使用了原来主题里的标签云函数代替的。 我折腾了半天WP自带的标签云,觉得有点不合适,标签等级很多,如果设计个好看的样式很困难(得从1设计到n大一个数)。自带的这个函数只有六个层次,只要把六个层次设计出来就行了。而且字体、背景、颜色都可以改。具体代码没看(标准CP党做法),哈哈。

5、添加了一些Jquery效果,例如Willin Kan的小墙、AJAX嵌套评论,忘记是谁写的sweetTitles,还有锚点滑动,Jin wen的嵌套回复添加@效果等等……算起来我还真没啥JS的基础。纯粹CP的。

6、好吧,我又改logo了……

0

Comments: 28

  1. 你好,本博客使用Mflat主题之后,搜狗浏览器显示导航条错位,其他浏览器显示正常。 :arrow: :cry:

    2012年08月09日
    • @蛋蛋技术五百金 搜狗浏览器……抱歉帮不了你,你拿个UCweb浏览器说错位我同样帮不上忙~
      就是说,只兼容主流浏览器,如OP、chrome、safari、FF、IE(*现在不再考虑IE6了)。

      @venmax 2012年08月09日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: