wordpress主机制作菜鸟教程之基础css布局篇

其实截至到上一篇文章,我要做的这个wordpress基础性主题的所有代码,就已经和大家分享完成了;尽管简陋,但它的确已经是一个具备基本功能的主题了,而且是可以流畅的在wordpress中运行的主题哟。

什么?你想要更高级的功能?你嫌弃目前这个starter theme文件夹中文件忒少,没看到single.php、page.php、archive.php?嗨,请注意,我都已经说了好几遍了,咱这就是个最最基础的主题,而且各个文件中的代码也都是最最干净和整洁的,你还指望它能提供给你什么呢?它只是告诉你一个wordpress主题大概是怎么回事,就这样。

如果你想学习更进一步的主题制作知识,也不是什么难事。但是我强烈建议你,能够将我这个最基础的主题的框架和代码看明白之后,再去着手稍微复杂和高级的主题的学习;学习的方式也较为简单,就是分析别人主题的代码。我没法预计你分析的第一个wordpress主题会是哪一个,但我想,如果你能将我提供的这个主题代码搞明白,其他主题研究起来也不会很难。毕竟,无论多么复杂和高级的主题,它的基本框架是不会改变的。

另外,鉴于没有css渲染的主题看起来很丑,丑的像一坨便便一样;那咱就来点基本的css稍微装饰一下吧。css代码是要放到你的style.css文件中的,这点你不会不知道吧?

先看基本布局代码,如下。

/*页面总体布局css代码*/
#wrapper{margin:5px auto;padding:0;width:978px;text-align:left;}
#header{margin:0 auto;width:100%;}
#main{margin:0 auto;width:100%;overflow:hidden;}
#posts{width:642px;float:left;}
#sidebar{width:306px;float:left;margin-left:30px;}
#footer{width:100%;}

这几句css代码实现的效果是什么样子的呢?请看示意图
basic-framework

这个css代码看不明白的请握爪儿,嘿嘿,我也是从毛都不懂走过来的,现在好歹是懂一点点了。简单解释一下,上面的代码涉及到的属性不多:margin,外边距,前面提到过,可以将html中的各种语法标记看成小拼图,而margin就是不同的小拼图之间的距离,也可以理解成缝隙,说的够明白了吧?margin还可以添加top(上)、bottom(下)、left(左)、right(右)等限制成分,分别规定不同方向的外边距。与margin相对应的还有一个叫做padding的css属性,它的含义是内边距,同样有上下左右四个限制成分。

width代表小拼图的宽度,text-align规定的是小拼图中的文字的对齐方式,float表示浮动。哎,不行这样说还是太苍白了,建议大家在实际操作中学习各种css属性值的含义,另外推荐w3school这个网站,上面讲解的还是比较基础的,我的css就是从上面学来的。

最后唠叨一句css标准语句的写法吧

选择器{属性1:属性值;属性2:属性值;…………;}

css的选择器就是告诉浏览器,你要把相应的css属性施加到谁的身上,前面也说过,css的选择器其实就是各个小拼图的名字;拼图这个概念是我一直在强调的,希望大家牢记。另外,css的选择器有两种,一种叫做id选择器,我们上面代码中都是用的id选择器。id选择器具有唯一性,即在同一个网页中只允许出现一次,id选择器的前面要加一个小#号。

另一种选择器叫class选择器,它可以在一个网页中出现多次,class选择器的前面要加一个小点,即 . 这么个符号。

over,就讲这么多吧,再讲多就复杂了。

回复

  1. wordpress主题 的头像

    以前学了一段时间css+div现在都搞忘了

    1. 啄木游弋 的头像
      啄木游弋

      三天不练,就是门外汉。

发表回复

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

You may also enjoy…