EMLOG文章标题颜色美化代码教程 - 小浣熊博客

EMLOG文章标题颜色美化代码教程

发布者: 小浣熊

全网最全的网络资源分享网站

手机扫码查看

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

这篇文章总字数为:2411 字,有 1 张图存于本站服务器

前言

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最小。

演示效果

查看本站文章即可

8ba71590508159.png

分享到:
打赏
-版权声明-

阅读时间:  发布于:2020-5-26
文章标题:《EMLOG文章标题颜色美化代码教程》
本文链接:https://www.mua222.cn/177.html
本文编辑: 小浣熊,转载请注明超链接和出处小浣熊博客
收录状态:[百度已收录][360已收录][搜狗已收录]

评论

     快速回复: 支持 感谢 学习 不错 高兴 给力 加油 惊喜
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

EMLOG文章标题颜色美化代码教程

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏