WordPress主题开发教程二十一:日志样式化和其他杂项

文章快捷目录 第1步:Reset CSS第2步:样式化 H1 标题第3步:样式化日志第4步:设置日志段落填充第5步:样式化日志杂项第6步:样式化导航栏这篇主要讲解如何样式日志,这篇不需要index.php,打开Xampp Control,theme 文件夹,Firefox,Internet Explorer和style...

文章快捷目录

这篇主要讲解如何样式日志,这篇不需要index.php

打开Xampp Control,theme 文件夹,Firefox,Internet Explorer和style.css文件。

第1步: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。接下来我们可以增加空白和填充到需要的地方。第2步:样式化 H1 标题

在body{}之后输入以下代码:

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

font-family: Georgia, Sans-seriff;把 H1 标题的字体从 Arial 改成 Georgia。如果没有 Georgia,网页就会寻找 Sans-serif;font-size: 24px;我们在body{}中把字体设置为12px,H1和H2标签是不会遵守的。这就是因为标题标签遵循他们自己的规则。为了控制他们,我们需要特别的去样式化它们。padding: 0 0 10px 0;意思是 10 像素的底部填充。这是为了在博客的标题和描述之间增加空间。

保存,刷新,结果如下:

WordPress主题开发教程二十一:日志样式化和其他杂项 - 我爱模板网WordPress主题开发教程二十一:日志样式化和其他杂项 - 我爱模板网

第3步:样式化日志

在#container{}下面输入以下代码:(可以在输入每块代码之后,保存并刷新去查看其中的变化。)

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

(给每个 class 名字为post的 DIV 增加 10 像素的顶部和底部空白。)

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

(.post h2 不是一般的 CSS 规则。他是特别样式化在 class 名为 post 的 DIV 中的 H2 子标题。在侧边栏中的 H2 子标题就不受影响。)

.entry{line-height: 18px;}

(设置 entry DIV 中行距。)

第4步:设置日志段落填充

在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像素的灰色的边框。

第6步:样式化导航栏

在p.postmetadata{}下输入:

.navigation{padding: 10px 0 0 0;font-size: 14px;font-weight: bold;line-height: 18px;}

对于Next page和Previous page链接外面的的navigationDIV 标签,我们

增加了一个10像素的顶部填充。把字体大小改成14像素。把字体改成粗体。把行高增加到18像素。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程

没有自定义html的WordPress主题如何添加JS代码?

2023-1-2 5:33:14

wordpress教程

WordPress发布文章自动添加TAG标签

2023-1-2 5:33:16

!
你也想出现在这里?立即 联系我们吧!
信息
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索