WordPress 主题风格实例教程:系统日志款式化和别

捌零建网站 p>

开启Xampp Control,theme 文档夹, Explorer 和 style.css 文档。

第一步:Reset CSS

在 style.css 文档中的 body{} 上边键入下列编码来解决大部分分页查询边空白页和添充:

body, h1, h2, h3, h4, h5, h6, blockquote, p{margin: 0;padding: 0;}

这儿大家应用的是 margin: 0; 而并不是 margin: 0 0 0 0;。由于全部的值全是一样得话,仅用一数量字就可以了,针对添充的设定也是一样的。

储存,更新 Firefox 和 IE。接下去大家能够提升空白页和添充到必须的地区。

第二步:款式化 H1 题目

在 body{} 以后键入下列编码:

h1{font-family:&ia, Sans-serif;font-size: 24px;padding: 0 0 10px 0;}

font-family: Georgia, Sans-seriff; 把 H1 题目的字体样式从 Arial ia。ia,网页页面便会找寻 Sans-serif;

font-size: 24px; 大家在 body{} 中把字体样式设定为 12px,H1 和 H2 标识不是会遵循的。这便是由于题目标识遵照她们自身的标准。以便操纵她们,大家必须非常的去款式化他们。

padding: 0 0 10px 0; 含意是 10 清晰度的底端添充。它是以便在blog的题目和叙述中间提升室内空间。

储存,更新,結果以下:

WordPress 主题教程:日志样式化和其他杂项

第三步:款式化系统日志

在 #container{}下边键入下列编码:(能够在键入每块编码以后,储存并更新去查询在其中的转变。)

.post{padding: 10px 0 10px 0;}

(给每一个 class 姓名为 post 的 DIV 提升 10 清晰度的顶端和底端空白页。)

.post h2{font-family:&ia, Sans-serif;font-size: 18px;}

(.post h2 并不是一一样的 CSS 标准。他是非常款式化在 class 名叫 post 的 DIV 中的 H2 子题目。在侧面栏中的 H2 子题目也不受危害。)

.entry{line-height: 18px;}

(设定 entry DIV 中国银行距。)

第四步:设定系统日志文章段落添充

在 a:hover{} 下键入下列编码:

p{padding: 10px 0 0 0;}

(给每一个文章段落标识提升 10 清晰度的顶端添充。)

第5步:款式化系统日志杂类

在 .entry{} 下边键入:

p.postmetadata{border-top: 1px solid #ccc;margin: 10px 0 0 0;}

针对 postmetadata 这一文章段落便签,给它提升一个深灰色的外框和10清晰度顶端空白页。

border-top 含意是只是顶端外框 border-left 含意是只是左侧外框,这些。 假如仅仅独立的 border,沒有 -top,-right,-bottom 或是 -left 则寓意着全部的外框。如 border: 1px solid #ccc; 含意为全部的四边都是有1清晰度的深灰色的外框。

第六步:款式化导航栏栏

在 p.postmetadata{} 下键入:


.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}Next page 和 Previous page 连接外边的的 navigation DIV 标识,大家

提升了一个10清晰度的顶端添充。

把字体样式尺寸改为14清晰度。

把字体样式改为粗字体。

把行高提升到18清晰度。


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://mfjwzr.com/jingyan/2329.html