[Emlog教程] Emlog给博客加入简单的分类模块

想实现这样的模块只能修改文件实现,在后台是实现不了的,那么下面请看教程!

1.先在模板合适的位置加入以下代码

<div class="asb asb-index asb-index-01"><div class="asb asb-index asb-index-01">
<ul class="indexebox">
<li class="indexebox-i indexebox-01">
<h4>网址导航</h4>
<p>
最活跃的网址导航,最广泛的圈子...
</p>
<a class="btn btn-default btn-sm" href="https://www.6axi.com/">立即导航</a>
</li>
<li class="indexebox-i indexebox-02">
<h4>在线代码</h4>
<p>
本站提供的在线代码演示预览
</p>
<a class="btn btn-default btn-sm" href="https://www.6axi.com/" target="_black">立即使用</a>
</li>
<li class="indexebox-i indexebox-03">
<h4>留言反馈</h4>
<p>
新模板还有很多漏洞,如果你发现了那就留言帮帮忙吧!
</p>
<a class="btn btn-default btn-sm" href="https://www.6axi.com/liuyan">前往留言</a>
</li>
<li class="indexebox-i indexebox-04">
<h4>友情链接</h4>
<p>
好网站离不开好的友链,本站合作伙伴
</p>
<a class="btn btn-default btn-sm" href="https://www.6axi.com/you">友情链接</a>
</li>
<li class="indexebox-i indexebox-100">
<h4>在线工具</h4>
<p>
网站缩略图
</p>
<a class="btn btn-sm btn-danger" href="http://s.6axi.com" target="_black">立即使用</a>
</li>
</ul>
</div></div>

2.然后在CSS中加上一下代码:

.indexebox{overflow:hidden;font-size:12px;text-align:center;background-color:#fff;border:1px solid #eee;border-radius:4px;margin-bottom:20px}
.indexebox h4{font-size:14px;color:#444;margin:10px0}
.indexebox-i{position:relative;float:left;width:20%;padding:20px;background-color:#fff;color:#777}
.indexebox-01,.indexebox-02,.indexebox-03,.indexebox-04{border-right:1px dashed #ddd}
.indexebox-i:hover{background-color:#F9F9F9}
.indexebox-i p{height:36px;overflow:hidden;color:#bbb}
@media(max-width:991px){.indexebox{display:none}}