Emlog博客简单的分类模块

Emlog博客简单的分类模块

作者 : 资源客 发布时间: 2019-09-13

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="http://www.qq301.com/">立即导航</a>

 </li>

 <li class="indexebox-i indexebox-02">

 <h4>在线代码</h4>

 <p>

 本站提供的在线代码演示预览

 </p>

 <a class="btn btn-default btn-sm" href="http://www.qq301.com/" target="_black">立即使用</a>

 </li>

 <li class="indexebox-i indexebox-03">

 <h4>留言反馈</h4>

 <p>

 新模板还有很多漏洞,如果你发现了那就留言帮帮忙吧!

 </p>

 <a class="btn btn-default btn-sm" href="http://www.qq301.com/liuyan">前往留言</a>

 </li>

 <li class="indexebox-i indexebox-04">

 <h4>友情链接</h4>

 <p>

 好网站离不开好的友链,本站合作伙伴

 </p>

 <a class="btn btn-default btn-sm" href="http://www.qq301.com/links">友情链接</a>

 </li>

 <li class="indexebox-i indexebox-100">

 <h4>在线工具</h4>

 <p>

 网站缩略图

 </p>

 <a class="btn btn-sm btn-danger" href="http://www.qq301.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: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}}

教程到这里就结束了,保存之后即可查看效果

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除

资源客 » Emlog博客简单的分类模块