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

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

CTRL+D快速收藏,欢迎常来喔

未经允许不得转载:作者: 小新, 转载或复制请以 超链接形式 并注明出处 小新博客
原文地址: 《EMLOG文章标题颜色美化代码教程》 发布于2020年5月27日

本文链接:EMLOG文章标题颜色美化代码教程 - http://ais521.com/?post=186

本文标签:

相关推荐
发表评论
0 评论
还没有评论,快来抢沙发吧!