WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。
在 WordPress 3.0 的 Appearance（外观）-> Menus（菜单）面板里我们可以看到自定义菜单的设置，首先点击“Creat Menu”，再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。
在文章内插入的广告具有相当高的点击率。在 WordPress 里，我发现很多人利用 JavaScript 把广告插入到 more 截断标签处，作为内文广告。昨晚我也在内文里放了 Google Adsense，但我是用 WordPress 自带的 add_filter 函数实现的。
打开主题的 function.php ，插入下面的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /** * The filter to insert the ads */ function bl_insert_ad_code_filter( $content ) { global $id; // 只在文章页面显示 if ( !is_single() ) { return $content; } // 首先插入广告代码 $html = '<div class="single_ads">你的广告代码</div>'; // more 标签在 WordPress 2.3 前是一个 a 标签，2.3 后是一个 span 标签 // 保证兼容性 return preg_replace("#\《(a|span) id＼=\"more-$id\"\》\《/\\1\》#", $html."$0", $content, 1); //因为 wp-syntax 插件的问题，请把上一句代码中的书名号替换成“< ”和“>”，“＼”换成“\” return $content; } add_filter('the_content', 'bl_insert_ad_code_filter', 50); |
利用这个 filter 我们还可以在文章任意的地方插入广告，或者添加其他的应用，大家可以尽情发挥创意。
有时我们需要令一个宽度固定的容器里的子框架居中（例如一个 Div ，或者其他 block 级元素），如果子框架只有一个的话，我们只需要为子框架加上 CSS 属性 margin: auto 就可以了。
但如果我们要让多个子框架居中，并且等分父框架剩余的空间的话，我们对所有子框架使用 CSS box-align: center 来实现这种效果。
可是目前还有相当一部分主流浏览器不支持 box-align 属性，那么我们应该如何编写 CSS，使这种效果能兼容大部分的浏览器呢？
为了使多个 block 级元素排列在同一行里，我们习惯使用 float 属性使子框架浮动，然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG，这样反而要投入额外的时间去调试 IE6 的 Hack。
虽然我们还可以通过 display: inline 来避开 IE6 的 BUG，但我们仍然需要调整这些子框架间的间距，防止最后一个自框架被挤到下一行。
继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入，说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。
在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值，这种方法比较繁琐，而且在一些情况下无法使子容器的宽度完全相等（例如父容器的宽度为 100px）。当我们迈入 CSS3 时代后，这种问题将迎刃而解。
box-flex 应用在需要分栏的子容器上，它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时，浏览器将会把这些子容器的 box-flex 的值相加，然后根据它们各自的值占总值的比例，再在父容器剩余的空间里分配它们的尺寸（说的啰嗦，其实一看 DEMO 就懂）。也就是说，我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染。
今天下午和同学一起去中华电影城看了《叶问2》。我很少看电影，更少去电影院，难得有我喜欢的片子的续集，我就去看了。《叶问》系列吸引我主要有这几点：作为一部武打片，《叶问》比较强调武者的武德，看这样的片子无论在视觉上还是精神上都是一种享受；《叶问》的摄影风格比较朴实，夸张的比较少，剧情也还不错，像《风云2》那样光有画面没有剧情的片子叫做烂片，我个人是把《风云2》当作游戏CG看的；熊黛林很漂亮，但她和叶问之间的感情很微妙，我一直想从影片里找到她到底喜欢叶问什么优点。
CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。
通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码：
1 2 3 4 5 | <body> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </body> |
在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。
Recent Comments