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