前几天看到kejun‘s blog里面的一篇文章：“近期面试感受”，里面提到面试时的一道题的不同的解决方案，比较它们之间的优缺点，其中出现了一个概念：Block Formatting Contexts(块级格式化上下文)，而我一点印象都没有，所以就找了一些相关的文章学习一下，看到一篇很好的文章，所以就翻译出来和大家共享一下。原文是：Block Formatting Contexts
一个块级格式化上下文是满足以下条件中至少一条的盒模型：
- float的值不为空
- overflow的值不为visible
- display的值是table-cell、table-caption或者inline-block之一
- position的值不为static或者relative
当谈到视觉格式模型(visual formatting model，针对可视化媒体，用户代理如何处理DOM树),块级格式化上下文发挥着巨大的作用。所以对于CSS编程人员来说，深刻的理解块级格式化上下文和flow、float、clear、margin的关系至关重要。 Read the rest of this entry »
Aug
29th
CSS, wordpress, 分享, 学习
|
你基本上已经完成这一系列的教程啦，这是最后一个教程了。今天，你要学习的内容对于所有博客来说都非常重要：评论模板。在我看来如果一个博客不允许读者留言的话，那么它就不能称为是博客，也许对于一些人来说评论不是很重要，但是对于我来说如果博客不能评论那就太奇怪了。
你应该知道：
- 没有合适的方法在comments.php文件中放置评论模板
- 大部分的WordPress设计者都会使用WordPress默认主题Kubrick中的默认评论模板
- 有些设计者修改了默认的评论模板以适应自己的需求
- 你将会使用我对默认评论模板进行修改后的版本
第一步
- 新建文件：comments.php
- 将我的comments.txt中的内容复制黏贴到你的comments.php文件中
- 保存comments.php文件
Read the rest of this entry »
Aug
28th
CSS, wordpress, 分享, 学习
|
继续昨天没有完成的内容，今天你将会新建更多的子模板文件，就像昨天的header.php、sidebar.php和footer.php文件一样。
既然昨天就已经将index.php文件拆分了，那今天的内容就变得更加简单了。
第一步
在进行这一步之前，先看一下的侧边栏，点击一下存档链接，跳转的页面应该跟你的首页没有任何不同吧？
- 新建一个新文件：archive.php
- 将index.php文件中的所有内容都复制黏贴到archive.php文件中
- 保存archive.php文件
- 在archive.php文件中，将the_content改为the_excerpt
- 再次保存archive.php文件
你通过新建archive.php文件并且改变它的内容使其与index.php文件不同来自定义存档页面的外观。 Read the rest of this entry »
Aug
27th
CSS, wordpress, 分享, 学习
|
今天，我们将完成样式化的内容并且开始将index.php文件拆分为多个小的文件。在本节的开始部分你需要style.css文件，稍后你将会一直和index.php文件打交道，并且要新建一些文件。最后呢？嗯，你差不多就完成今天的内容了。
打开Xampp、主题文件夹、Firefox、IE、index.php和style.css文件。
第一步
给footer DIV添加一个10像素的顶部内边距，还记得怎样添加内边距吧？这次我不会给你代码了哦。
第二步
给页脚(footer)中的P标签添加一个18像素的行高，就是#footer p{}。(今天有关style.css文件的内容就结束了。) Read the rest of this entry »
Aug
25th
CSS, wordpress, 分享, 学习
|
样式化侧边栏之后，这个教程序列就差不多要结束了，但是不用担心，我会拿一些案例来一起研究（分解我制作主题的过程）。
今天你也不需要index.php文件，打开Xampp、主题文件夹、Firefox、IE和style.css文件。
第一步
在.sidebar{}下面输入下面的代码：
.sidebar ul{
list-style-type:none;
margin:0;
padding:0 10px 0 10px;
}
现在你已经样式化Sidebar的父无序列表(UL)了，所有的子UL都会继承这样的样式。在本例中，样式是列表类型为无，外边距为0，左右两边各有10像素的内边距。 Read the rest of this entry »
Aug
25th
CSS, wordpress, 分享, 学习
|
今天不需要index.php文件，打开Xampp控制台、主题文件夹、Firefox浏览器、IE浏览器和style.css文件。
第一步
在style.css文件中的body{}上面输入下面的代码来去掉大部分的外边距(margins)和内边距(paddings)：
body,h1,h2,h3,h4,h5,h6,blockquote,p{
margin:0;
padding:0;
}
- 注意到上面代码中的margin:0;而不是margin:0 0 0 0;了吧，如果你的四个值都相同，就可以只写一个上去就行了，同样对padding也适用。
- 保存文件，然后刷新Firefox和IE。别担心，你将会在需要的地方加上外边距(margins)和内边距(paddings)而不是浏览器默认要加的地方。
顺便说一下，一会我会让你把代码放在这里或者那里，但是你要知道那些都是可选的，你可以把你的代码放在style.css文件里的任何地方，我告诉你的只是我组织代码的方式。 Read the rest of this entry »
Aug
24th
CSS, wordpress, 分享, 学习
|
本节的内容将覆盖如何设置DIV的宽度以及如何给它们布局。本节也会给你展示一些让你的主题正确的显示或者让你的主题在Firefox和IE中都能正常显示的方法。
在开始前，还是要先打开Xampp控制台、主题文件夹、Firefox浏览器、IE浏览器、index.php文件以及style.css文件。
第一步
你应该考虑的第一件事是你主题的总宽度应该是多少。我们将使用750px(750像素)，100像素是1英寸。你主题的宽度应该由你大部分的访问者的视图规格来决定，你应该尽量避免下面的情况出现：你主题的宽度900px而呢的访问者却使用800px×600px分辨率的屏幕，这就意味着呢的900px宽度的主题将会有100像素超出他们的屏幕了，这是一个禁忌。
那么你怎么将你的总宽度设置为750px呢？
你需要将所有的内容都放在一个750px宽度的DIV中，这里提到的所有内容包括：header、container、sidebar和footer。
在<body>后面加上：<div id=”wrapper”>，然后在</body>前面加上：</div>。 Read the rest of this entry »
Aug
23rd
CSS, wordpress, 分享, 学习
|
继续昨天的介绍CSS的内容，我们要进行更多的有关着色的练习以及学更多的有关十六进制代码的内容。颜色属性是用来给文本着色的，它后面一般都跟着一个十六进制代码。例如body{color:#000000;}的意思就是你网页的body部分所有的文本都会是黑色的。
背景属性是用来给所有的非文本内容着色的，它后面也是跟着一个十六进制代码。例如body{background:#ffffff;}的意思就是body的背景是白色的。
十六进制代码
- 以一个英镑符号(#)开始，每个十六进制代码都有六位，它们的范围从#ffffff(白色)到#000000(黑色)。
- #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
- 前两位代表红色，第三和第四位代表绿色，后两位代表蓝色。#ff0000是红色，#550000是深红色，#220000是更深的红色（好纠结啊），#00ff00是绿色，#0000ff是蓝色。等等，黄色不是主要的颜色吗？黄色的十六进制代码是什么呢？#ffff00是黄色，#ff00ff是紫色。
Read the rest of this entry »