ripro主题 专用首页分类导航-风格2教程

最近看到网上美化的教程,算下来,比买一套正版还会,各大资源站长没有免费的开放教程的,当然我也不能免费,毕竟怕损害了其他站长的利益,不过你签到是可以看到这篇文章的,这篇文章是讲专用首页分类导航的,本教程只写方法,博主不提供技术,有问题自己解决。

好了,先来了看看效果

添加到后台可自行决定位置

 教程开始:

一、在ripro/parts/home-mode目录下新建一个名为mobile2.php,并复制以下内容并粘贴。

(根据自己站点的内容修改以下内容)如:<li><a href=”/” target=”_blank”><svg class=”icon” aria-hidden=”true”> <use xlink:href=”#iconjilu”></use> </svg><span>专题汇总</span></a></li>其中<a href=”/”>为链接地址,</svg><span>专题汇总</span></a></li>为显示名称!

<?php
// TUAOSHE 模块赞助
$mobile = _cao('mobile2');
?>
<div class="home-first-screen"><div class="container">
<div class="parts row">
 
<div class="col-sm-6 col-md-3 part-first">
<div class="home-first-part home-menus">
<ul>
<li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconjilu"></use> </svg><span>专题汇总</span></a></li>
<li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconyinpin"></use> </svg><span>网站教程</span></a></li>
<li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconkafei"></use> </svg><span>有求必应</span></a></li>
<li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconfensi"></use> </svg><span>本站公告</span></a></li>
<li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconqianbao"></use> </svg><span>资源代下</span></a></li>
<li><a href="/user?action=vip" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconliwu"></use> </svg><span>赞助会员</span></a></li>
</ul>
</div>
</div>
 
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-topics">
<h2 class="hf-title"><strong><a href="/" target="_blank">每日更新</a></strong><a href="/" target="_blank" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="/" target="_blank"><span class="thumb" style="background-image:url(https://www.cnmmm.com/skin/1.0/images/jrgx.png)"><img src="https://www.cnmmm.com/skin/1.0/images/jrgx.png" alt="每日文章更新专题"></span><strong class="title">每日更新</strong></a>
</div>
<div class="col-xs-6">
<a href="/" target="_blank"><span class="thumb" style="background-image:url(https://www.cnmmm.com/skin/1.0/images/zdtj.png)"><img src="https://www.cnmmm.com/skin/1.0/images/zdtj.png" alt="推荐置顶内容专题"></span><strong class="title">置顶推荐</strong></a>
</div>
</div>
</div>
</div>
</div>
 
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-subjects">
<h2 class="hf-title"><strong><a href="/" target="_blank">源码推荐</a></strong><a href="/" target="_blank" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="/" target="_blank"><span class="thumb" style="background-image:url(http://cnmmm.com/skin/1.0/images/djjc.png)"><img src="http://cnmmm.com/skin/1.0/images/djjc.png" alt="求源码"></span><strong class="title">有求必应</strong></a>
</div>
<div class="col-xs-6">
<a href="/" target="_blank"><span class="thumb" style="background-image:url(https://www.cnmmm.com/skin/1.0/images/qym.png)"><img src="https://www.cnmmm.com/skin/1.0/images/qym.png" alt="基础教程"></span><strong class="title">搭建教程</strong></a>
</div>
 
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-course">
<h2 class="hf-title"><strong><a href="/" target="_blank">网站公告</a></strong><a href="/announcement" target="_blank" class="more">more</a></h2>
<div class="courses">
<div class="course-items">
<ul>
<li><a href="/" target="_blank"><strong>本站公告</strong><span>全部公告</span></a></li>
<li><a href="/" target="_blank"><strong>积分获取</strong><span>如何获取积分</span></a></li>
<li><a href="/" target="_blank"><strong>意见反馈</strong><span>意见反馈</span></a></li>
<li><a href="/" target="_blank"><strong>免费帮会员下载</strong><span>资源代下</span></a></li>
 
</ul>
</div>
</div>
</div>
</div>
</div></div></div>

二、在ripro/assets/css目录下找到diy.css 并在最下方插入以下内容

大师免费

已有26人支付

如下图所示:

四、找到ripro根目录下的header.php文件并在</head>前插入以下内容

<script src="//at.alicdn.com/t/font_1208165_7qnah1qoq8w.js"></script>

五、最后我们需要找到ripro根目录下的footer.php文件并在最下面的</style>后插入以下内容

<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

PS: 一定不要忘了重置一下“当前分区”

1.本站所有素材均可免费下载
2.本站所有素材仅限个人学习研究使用,请勿商业使用
3.本站所有素材版权均归上传者所有,如需商业使用请先与版权所有人联系
4.如果你觉得本站不错记得收藏及分享
UI图设计网 » ripro主题 专用首页分类导航-风格2教程

发表评论

提供最优质的素材集合

立即查看 了解详情