看一下时间，上一篇关于 wordpress模板函数 到现在已经一个月过去了，时间过的真是快啊。其实关于 div 和 css 并没有什么东西可写，因为本身我自己是一个菜鸟，左思右想不知道能写什么，但是想想自己以前从对 div 和 css 一无所知到看的懂，并能加以修改所花的漫长时间上，所以还是决定写一些，可能会零碎、不专业和肤浅，但希望对像我这样业余的初学者有一些帮助吧。

我一直觉得利用 wordpress 来学习 div 和 css 是非常好的，原因有2，一是 wordpress 是纯 div 和 css 构架，二是 wordpress 作为个人博客来研究，div 不会很复杂（当然，你也可以把它搞的非常复杂，不过这些是牛人做的），但是涉及的 css 又非常完整，因为它本身就是一个独立的涉及各方面的但是不复杂的网站。

在开始说 wp 主题模板前，先简单说一下 div 和 css，div 也就是俗称容器，顾名思义，装网页内容的，完整格式是：<div class id>网页内容</div>，因为一个页面通常会涉及很多的容器，所以要给容器贴上标签以便容易区别和确认，有的标签可能在一个页面里是独立的，只能被用一次，或只用到一次，而有的标签在页面里会反复的被使用到。

对于这两种情况又加以区分：

第一种：独立的，只能用一次或只使用一次的标签，我们用ID来表示，格式是<div id="标签名">网页内容</div>

第二种：通用的，经常被用到的标签，用class来表示，格式是<div class="标签名">网页内容</div>

有一点需要说明的是，能用id的地方一定可以用class，用class的地方不一定就能用id，但是对于id的唯一性，最好是用id的地方还是用id的好。

以我目前的水平，所有涉及div的知识，我知道的就上面这两个了，div装着网页内容被放在一个页面上是至上而下排列的，如果你想按你的意思让各个div容器放在你想要的位置，就得用css来格式定义它，定义div的样式和位置是通过定义上面说的给div确定的标签来实现的。

在css（style.css文件）里对于ID和CLASS标签是通过#、.两个符号来认识的，ID对应的是“#”，CLASS对应的是“.”（英文输入状态下的句号）。具体格式如下：

网页页面上内容：<div id="id">id标签下div容器里的内容</div><div class="class">class标签下div容器里的内容</div>

css文件里的内容：#id {给id标签容器定义的样式1; 给id标签容器定义的样式2;}  .class{给class标签容器定义的样式1; 给class标签容器定义的样式2;}

总体上就是这样，现在结合wordpress模板来简单说一下，从第一篇我介绍的 wp主题模板的文件结构 中已经了解各文件是怎么组合的了，我们以组合后的首页为例来看看大多数wordpress是怎么设置div的：

<div id="wrapper">——这个是最大的容器，包含所有页面内容的，因为它是唯一的无论哪个页面都只用到一次，所以用id来定义它，当然你也可以用class。

<div id="header">这里是头部的内容，也是唯一的</div>

<div id="content">页面主要内容部分，也是唯一的</div>

<div id="comment">评论部分内容（不在首页），也是唯一的</div>

<div id="sidebar">侧边栏的容器，也是唯一的</div>

<div id="footer">底部的内容，也是唯一的</div>

</div>这里是收起最大的容器wrapper的，不能丢了。

我们再来看一下index.php里的div设置：(谷歌浏览器奔溃，吓我一跳，还好，这以上的内容都在。。。)

引用header文件

<div id="content">——这个容器含侧边栏，一般放在header.php最下面

<div id="main">——这个是内容容器

<div class="title">日志的题目，不唯一</div>

<div class="postmeta">题目下的日期等等之类的，不唯一</div>

<div class="entry">日志内容或日志摘要</div>

</div>收起main容器

引用侧边栏

</div>收起conten容器，一般在footer.php文件最上面

关于 CSS的属性 说多不多，说少也不少，不过足够让我们这样的初学者头晕脑涨的了，而且，各种各样的浏览器对一些属性的兼容性又有所不同，所以，如果你要自己弄wp的主题模板，除了要在本机上搭个php环境外，你还得装至少两个的浏览器，IE和firefox，当然，你也可以不鸟ie浏览器的用户。

下面是我自己捣鼓的几个wp皮，还有两个没弄完整。

1. 仿boblog主题mixice

2. WordPress仿boblog“谷子骚”

3. WordPress仿QQ校友风格

4. 本站目前在用的这个。。。