VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

主题开发教程XXI:杂志样式和其他杂项(主题开发文档)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

文章快速目录

第一步:重置CSS第二步:样式化H1表头第三步:样式化日志第四步:设置日志段落填充第五步:样式化日志杂项第六步:样式化导航栏本文主要讲解如何样式化日志,本文不需要index.php。

打开Xampp控件、主题文件夹、Firefox、Internet Explorer和style.css文件。

步骤1:重置CSS

在style.css文件的正文{}上方输入以下代码,以处理大多数页边距和填充:

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

这里我们用margin:0;而不是边距:0 0 0 0;。因为所有值都一样,所以只有一个数字就够了,填充的设置也一样。保存并刷新Firefox和IE。接下来,我们可以添加空白,并在需要的地方填充它。步骤2:设计H1页眉

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

h1 { font -家族:乔治亚,sans -serif;font -size:24px;填充:0 0 10px 0}

font -家族:乔治亚,sans -seriff;将H1标题的字体从Arial改为Georgia。没有格鲁吉亚,网页将寻找sans -衬线;font -size:24px;我们在正文{}中将字体设置为12px,H1和H2标签将不会被看到。这是因为标题标签遵循自己的规则。为了控制它们,我们需要特别设计它们的样式。填充:0 0 10px 0这意味着10个像素的底部填充。这是为了在博客的标题和描述之间增加空间。

保存,刷新,结果如下:

主题开发教程XXI:杂志样式和其他杂项(主题开发文档)-主机参考步骤3:设计日志样式

在#container{}下输入以下代码:(输入每个代码后,您可以保存并刷新它以查看更改。)

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

(为每个类名为post的DIV添加10个像素的顶部和底部空白。)

。post h2{font-family: Georgia,sans -serif;font -大小:18px}

(.post h2不是一个通用的CSS规则。他是post类的DIV中特别设计的H2副标题。侧边栏中的H2字幕不受影响。)

。entry { line -height:18px;}

(在条目格中设置行距。)

步骤4:设置日志段落填充。

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

p { padding:10px 0 0;}

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

第5步:对日记账杂项进行样式化。

在下面。输入{},输入:

p . post metadata { border -top:1px solid # CCC;边距:10px 0 0}

对于postmetadata段落注释,添加灰色边框和10像素的上边距。

Border-top表示仅上边框border-left表示仅左边框,以此类推。如果只是单个边框,没有-上、-右、-下、-左就代表所有边框。如边框:1px solid # ccc这意味着所有四个边都有一个1像素的灰色边框。

步骤6:设计导航条的样式

在p.postmetadata{}下,输入:

。导航{ padding:10px 0 0;font -size:14px;font-weight:粗体;line -高度:18px}

对于下一页和上一页链接之外的navigationDIV标记,我们

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

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:主题开发教程XXI:杂志样式和其他杂项(主题开发文档) https://zhujicankao.com/86925.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 主题开发教程XXI:杂志样式和其他杂项(主题开发文档)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!