苹果cms模板内添加手机端底部导航通用教程

苹果cms模板内添加手机端底部导航通用教程

方法一

<div class="myui-nav__tabbar">

<a class="item" href="/">
<img class="icon-img" src="图片地址"/>
<p class="title">电影</p></a>

<a class="item" href="/">
<img class="icon-img" src="图片地址"/>
<p class="title">剧集</p></a>

<a class="item" href="/">
<img class="icon-img" src="图片地址"/>
<p class="title">综艺</p></a>

<a class="item" href="/">
<img class="icon-img" src="图片地址"/>
<p class="title">动漫</p></a>

<a class="item" href="/">
<img class="icon-img" src="图片地址"/>
<p class="title">福利</p></a>

<a class="item" href="/">
<img class="icon-img" src="图片地址"/>
<p class="title">明星</p></a>

</div>

说明： 复制上方所有代码，在后台模板block/foot.html 最底部粘贴既可(这是本站常见苹果cms添加方法，所有不要用到css)

上方的链接自己改成想要的地址，因为每一个人的眼光喜好都不同，图片自找

方法二

有些朋友是其他模板，那么泽需要重新添加css，请看下方

.single-strong{display: block;margin: 3px 0;padding-left: 10px;border-left: 3px solid #ff5c5c;color: #606060;font-weight: 500;font-size: 1pc;line-height: 21px;} #recently_viewed img{display: none;}.foornav{display:none;border-top:1px solid #dcdcdc;z-index:9999;position:fixed;bottom:0;background:#eee;width:100%}@media only screen and (max-width:700px){.footer{margin-bottom: 50px;}.foornav{display:block}}.foornav span{text-align:center;font-size:10px;width:18%;display:inline-block;padding:4px 2px}.foornav span img{padding:3px;margin:0 auto;width:24px;display:block}

}

把以上css代码复制到你头部任意一个css文件内

然后在foot模板下方添加以下代码既可

<div class="foornav">

<a href="https://www.23zhui.com/"><span>
<img src="https://www.23zhui.com/statics/icon/icon_0.png"/>
首页</span></a>

<a href="https://www.23zhui.com/index.php/vodtype/1.html"><span>
<img src="https://www.23zhui.com/statics/icon/icon_1.png"/>
电影</span></a>

<a href="https://www.23zhui.com/index.php/vodtype/2.html"><span>
<img src="https://www.23zhui.com/statics/icon/icon_2.png"/>
电视剧</span></a>

<a href="https://www.23zhui.com/index.php/vodtype/3.html"><span>
<img src="https://www.23zhui.com/statics/icon/icon_3.png"/>
综艺</span></a>

<a href="https://www.23zhui.com/index.php/topic.html"><span>
<img src="https://www.23zhui.com/statics/icon/icon_6.png"/>
榜单</span></a>

	</div>

这就是最终样式，图片随自己喜欢跟换既可