WordPress基础教程

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

发布时间:2022-04-22 10:17:17

本文作者:

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

打开Xampp Controltheme 文件夹FirefoxInternet 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{} 中把字体设置为 12pxH1 和 H2 标签是不会遵守的。这就是因为标题标签遵循他们自己的规则。为了控制他们,我们需要特别的去样式化它们。
  • padding: 0 0 10px 0; 意思是 10 像素的底部填充。这是为了在博客的标题和描述之间增加空间。

保存,刷新,结果如下:

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 链接外面的的 navigation DIV 标签,我们

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

本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有互联网营销朋友的一封信

写给所有互联网营销朋友的一封信

2020年,我希望和更多的朋友,更多的营销从业者一起探讨企业的互联网营销。我想要所有的人都可以以最低的成本进去互联网,并且以最快的效率去做互联网营销。如果你也有兴趣和激情做互联网营销,请让我们并肩同行。

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
坚持以“为企业而生的wordpress主题”为宗旨,并提供价格合理的wordpress建站套餐