emlog博客文章标题颜色美化代码教程 - 技术分享 - 五行资源分享网

emlog博客文章标题颜色美化代码教程

作者头像图片

作者: 五行

网络资源搬砖的爱好者

文章二维码手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,如有侵权请联系!

前言

EMLOG很多模板的文章页h1至h6标题是默认没有美化效果的。例如fee主题模板只做了单单一个h2标题颜色,以这次分享的代码是h1到h6标题的美化效果。

css代码部署

简单部署CSS即可实现,找到你模板的公用CSS文件,一般是static/css/main.css,模板不同文件名称也不同。大家自行查找。

把以下代码放到粘贴到公用CSS文件中

 /*标题样式*/
section.context {padding: 15px;word-wrap: break-word;min-height: 100px;}
section.context.context-album{padding:15px 0}
.context h1,.context h2,.context h3{font-weight:700;border-width: 1px 0 1px 3px;border-style: solid}
.context h4,.context h5,.context h6{border-width:1px 0 1px 3px;border-style:solid}
.context h1:nth-child(6n+0),.context h2:nth-child(6n+0),.context h3:nth-child(6n+0),.context h4:nth-child(6n+0),.context h5:nth-child(6n+0){border-color:#EEE #EEE #EEE #DE4387}
.context h1:nth-child(6n+1),.context h2:nth-child(6n+1),.context h3:nth-child(6n+1),.context h4:nth-child(6n+1),.context h5:nth-child(6n+1){border-color:#EEE #EEE #EEE #AE74EC}
.context h1:nth-child(6n+2),.context h2:nth-child(6n+2),.context h3:nth-child(6n+2),.context h4:nth-child(6n+2),.context h5:nth-child(6n+2){border-color:#EEE #EEE #EEE #4527A0}
.context h1:nth-child(6n+3),.context h2:nth-child(6n+3),.context h3:nth-child(6n+3),.context h4:nth-child(6n+3),.context h5:nth-child(6n+3){border-color:#EEE #EEE #EEE #4AD868}
.context h1:nth-child(6n+4),.context h2:nth-child(6n+4),.context h3:nth-child(6n+4),.context h4:nth-child(6n+4),.context h5:nth-child(6n+4){border-color:#EEE #EEE #EEE #63CEEF}
.context h1:nth-child(6n+5),.context h2:nth-child(6n+5),.context h3:nth-child(6n+5),.context h4:nth-child(6n+5),.context h5:nth-child(6n+5){border-color:#EEE #EEE #EEE #EC8E4A}
.context h1{font-size:22px;line-height:32px;margin:0 -15px 10px;padding:0 15px;background:#fafafa}
.context h2{font-size:20px;line-height:30px;margin:0 -15px 10px;padding:0 15px;background:#fafafa}
.context h3{font-size:18px;line-height:28px;margin:0 -15px 10px;padding:0 15px;background:#fafafa}
.context h4{font-size:16px;line-height:26px;margin:0 -15px 10px;padding:0 15px;background:#fafafa}
.context h5{font-size:14px;line-height:24px;margin:0 -15px 10px;padding:0 15px;background:#fafafa}
.context h6{font-size:12px;line-height:22px;margin:0 -15px 10px;padding:0 15px;background:#fafafa}

调用教程

不懂css的朋友应该还不会调用css出来,这里简单说下吧。本文介绍的是在文章页调用,我们就找到模板目录下的“echo_log.php”文件,也就是文章文件。我们先查找正文输出代码,查找如下类似的代码。

<?php echo $log_content; ?>

在前一行加入如下代码即可调用成功。

<section class="context">

使用教程

我们写文章的时候都是可视化写的,这次说下写文章的时候如何加入h1或者h2等等标题样式,6.0.1版本写文章的编辑器都有一个标题1、标题2等等的按钮。这里就不多说了。5.3.1的要切换为代码格式。解释有点麻烦。看图中h3标题。 格式是<h3>标题文字</h3>。数字随意切换。小编写到h6的。数字1是最大标题。跟着6最小。

 

演示效果

emlog博客文章标题颜色美化代码教程-五行资源分享网-第1张图片

 

本文最后更新于2022-5-23,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 五行, 转载或复制请以 超链接形式 并注明出处 五行资源分享网
原文地址: 《emlog博客文章标题颜色美化代码教程》 发布于2022-5-23 15:40
帖子声明: 本站对文章进行整理、排版、编辑,是出于传递信息之目的, 并不意味着赞同其观点或证实其内容的真实性,不拥有所有权,不承担相关法律责任。

评论

在线链接输入图片 打卡按钮图片 私密评论按钮图片 97 + 38 =
乱评论、多次评论者一律禁言帐号或封禁IP
本站已经全面开启缓存,评论查看隐藏内容需等待1分钟后再刷新本页!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

打赏图片