WP主题制作-第12课:帖子格式设置和其他操作

您今天不需要index.php。打开  Xampp Control,  主题文件夹,  Firefox,  Internet Explorer和  style.css

在开始之前,请忘记我显示给您的昨天的屏幕截图。截屏时我打开了小部件插件,这解释了为什么我的侧边栏看上去与您的侧边栏有所不同。另外,在style.css文件中,将所有Sans-serif更改为  Sans-serif。我又犯了一个错误,我倾向于在S​​ans-serif中添加一个额外的“ F”。

第1步

通过在  style.cssbody {}上方键入以下代码来消除大部分边距和填充  :

正文,h1,h2,h3,h4,h5,h6,blockquote,p { 
margin:0; 
填充:0; 
}

  • 注意它的  边距:0;  而不是  余量:0 0 0 0; 。当所有值都相同时,请使用一个数字。填充也一样。
  • 保存文件。刷新Firefox和Internet Explorer。不用担心,现在您将在页边距和填充中添加您实际希望它们出现的位置,而不是默认情况下浏览器所需的位置。

顺便说一句,我是要告诉您将此内容放在该内容的下方或上方,但要知道它是可选的。您可以在任何地方键入/放置代码。我做事的方式就是组织方式。

第2步

设置H1标题的样式,在正文下键入以下内容  {}

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

  • 字体家族:佐治亚州,Sans-seriff; 将H1头衔从Arial更改为Georgia。如果没有格鲁吉亚,则该网页将查找Sans-serif。
  • font-size:24px;  是不言自明的。但是,请注意,当您 在  body {}中将字体大小设置为  12px时,  H1  和  H2  标签不遵循该规则。这是因为标题标签遵循其自己的规则。要控制它们,您需要专门为它们设置样式。
  • 填充:0 0 10px 0;  表示10像素底部填充。用于在博客标题和描述之间添加空格。

保存,刷新,结果如下:

H1风格

第三步

#container {}下键入以下代码  :(在每个代码块之后保存并刷新,以查看所做的更改。)

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

(您为每个DIV添加了10像素的顶部和底部填充,并带有一个名为post的类  。)

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

(.post h2不是一般规则。它专门针对post DIV中的H2子标题。补充工具栏中的H2子标题不受影响。)

.entry { 
行高:18px; 
}

(增加了条目DIV中每行之间的间距。)

第四步

a:hover {}下输入以下代码  :

p { 
padding:10px 0 0 0; 
}

(每个段落标签的10像素顶部填充。)

第5步

在  .entry {}下输入

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

还记得您给名为postmetadata的类提供的pargraph标记  吗?特定段落标签的样式和DIV的样式几乎相同。您可以将边框,边距,填充和背景都应用到这两者。

对于  postmetadata  段落标记,您为其添加了灰色边框和10像素的上边距。

border-top  表示仅顶部边界。 border-left  表示仅左边界。单独的等  border,不带  -top,  -right,  -bottom或  -left  表示所有边界。例如,  border:1px solid #ccc;  表示所有四个边都有1px的灰色边框。

第6步

p.postmetadata {}下  输入

.navigation { 
padding:10px 0 0 0; 
font-size:14px; 
font-weight:粗体; 
行高:18px; 
}

对于 包装下一页  和  上一页  链接的  导航 DIV  ,您只需:

  • 添加了10像素的顶部填充
  • 将其字体大小更改为14px
  • 将其字体粗细更改为粗体。
  • 将其线高增加到18px。

今天的课程到此结束。

未经允许不得转载:创之梦博客 » WP主题制作-第12课:帖子格式设置和其他操作

赞 (0)
分享到:更多 ()

欢迎各位吐槽评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址