EMLOG网站添加简单分类模块的代码

分类模块是多功能型网站必备的功能之一，但在一些简单的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="127.0.0.1/">立即导航</a>
 </li>
 <li class="indexebox-i indexebox-02">
 <h4>在线代码</h4>
 <p>
 本站提供的在线代码演示预览
 </p>
 <a class="btn btn-default btn-sm" href="127.0.0.1/" target="_black">立即使用</a>
 </li>
 <li class="indexebox-i indexebox-03">
 <h4>留言反馈</h4>
 <p>
 新模板还有很多漏洞，如果你发现了那就留言帮帮忙吧！
 </p>
 <a class="btn btn-default btn-sm" href="127.0.0.1">前往留言</a>
 </li>
 <li class="indexebox-i indexebox-04">
 <h4>友情链接</h4>
 <p>
 好网站离不开好的友链，本站合作伙伴
 </p>
 <a class="btn btn-default btn-sm" href="127.0.0.1">友情链接</a>
 </li>
 <li class="indexebox-i indexebox-100">
 <h4>在线工具</h4>
 <p>
 网站缩略图
 </p>
 <a class="btn btn-sm btn-danger" href="127.0.0.1" target="_black">立即使用</a>
 </li>
 </ul>
</div></div>

2、打开模板样式文件style.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:10px 0}
.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}}

3、打开网站首页，点击查看效果

二、原理解析

在模板的某个位置引入一个DIV，然后自定义这个DIV的样式即可

三、注意事项

1、本教程第1步的代码，可以放在任何需要的位置，一般情况下可以放置在模板文件header.php里

2、本教程使用的样式如何不符合自己的审美风格，可以根据需要自行修正