WordPress 主题教程 #12:日志样式化和其他杂项
2023-06-13 09:18:33 时间
日志样式化和其他杂项是从零开始创建 WordPress 主题系列教程
的第十二篇,这篇主要讲解如何样式日志,这篇不需要 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 像素的底部填充。这是为了在博客的标题和描述之间增加空间。
保存,刷新,结果如下:
第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 链接外面的的 navigation DIV 标签,我们
- 增加了一个10像素的顶部填充。
- 把字体大小改成14像素。
- 把字体改成粗体。
- 把行高增加到18像素。
相关文章
- 日志采集系统flume和kafka有什么区别及联系,它们分别在什么时候使用,什么时候又可以结合?
- binlog日志记录什么内容_mysqlbinlog日志在哪
- 雪花模板QSIT-pro主题更新日志
- WordPress 主题教程 #5b:日志内容
- WordPress 主题教程 #5e:日志导航链接
- SqlServer创建自动收缩事务日志任务的图文教程
- Oracle日志清理:恢复数据库性能(oracle日志清理)
- MySQL错误日志分析:解决故障的重要步骤(mysql错误日志分析)
- 简单易懂:如何使用Oracle导出日志包含关键字:Oracle、日志、导出提高工作效率:Oracle日志导出操作指南详细讲解:细节揭秘——Oracle日志的导出方法实用技巧:Oracle必备技能之日志导出教程专业指导:Oracle日志导出查询详解与应用实践(oracle日志导出)
- 手机Redis为你的日志保驾护航(手机Redis日志)
- Oracle极速减尐日志占用,实现最佳效果(oracle减少日志)
- TP5日志实现写入Redis的新方法(tp5日志写入redis)
- 如何查看数据库alert日志文件
- log4net教程日志分类和自动维护示例
- c#实现把异常写入日志示例(异常日志)