给网站底部添加上font

  • 时间:
  • 浏览:14
  • 来源:淤青的博客 - 专注共享松果娱乐网资源

 这个引用的是 Font Awesome 图标,一般模板不是吧。机会你模板里没法引用,请手动加带。

html代码:

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://www.mosq.cn"> <span class="fa fa-home"></span> 首页 </a></li>
        <li> <a href="https://www.mosq.cn/t"> <span class="fa fa-twitch"></span> 微语 </a></li>
        <li> <a href="https://www.mosq.cn"> <span class="fa fa-search"></span> 搜索 </a></li>
        <li> <a href="https://www.mosq.cn/liuyan.html"> <span class="fa fa-comments"></span> 留言 </a></li>
        <li> <a href="https://www.mosq.cn/guanyu.html"> <span class="fa fa-info-circle"></span> 关于 </a></li>
    </ul>
</div>

 css代码:

@media screen and (min-width:767px){#mobile-footer{display:none}}
#mobile-footer{height:60

px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:60

%;z-index:9999999}
#mobile-menu{display:block}
#mobile-menu:after{content:'';display:block;height:0;clear:both}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:60

%}
#mobile-menu>li>a:hover{color:#000;}
#mobile-menu>li>.active{color:#000;}
#mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:60

%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:60

px}

使用依据

1、把html代码装进 去去 footer.php

2、把css代码装进 去去你模板的css文件里

3、修改一下html代码里的链接地址、图标和名称就行了


本文链接:https://www.mosq.cn/post-296.html

本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议。转载请注明出处!

猜你喜欢

大发快3平台网址_互联网家装用户渗透率不断提升 租赁成增量市场

比达咨询(BigData-Research)数据中心监测数据显示,互大发快3平台网址联大发快3平台网址网家装用大发快3平台网址户渗透率仍在不断提升,从今年第一季度的24.8%增

2019-09-23

1分彩靠谱吗_2018年6月移动视频市场:爱奇艺继续领跑视频用户活跃度 短视频崛起行业竞争格局生变

6月QuestMobile数据出炉,爱奇艺在用户规模与用户粘性等指标上继续保持移动视频行业第一的位置。短视频应用突然老出反1分彩靠谱吗超腾讯视频、优酷的趋势,腾讯视频的6月日均

2019-09-23

1.5分快3靠谱吗_我为能准时下班而做的准备,以及由此的收获,同时总结下不足

  可能性村里人 会说,做IT的想准时下班好难,尤其是在互联网公司。一些外企或国企倒能准时下班,由于是公司更像养老院。  随便说说这里处在个误区:还都可不还可以准时下班随便说

2019-09-23

腾讯3分彩平台开户_三八节送给女人的小福利:友情舒心菜

妇腾讯3分彩平台开户女节的小福利,小孩送给妈妈腾讯3分彩平台开户、女人不送给女人不,这名 礼物再适合不过了腾讯3分彩平台开户!让家里的女主越吃越漂亮!食材:圆肉、南枣、浮

2019-09-23

3分彩电脑版_【发型屋】面试发型技巧 这些错误千万不能犯

来源:星娱TV2016-08-1223:05:58  文章来源:明星发型分享平台"星娱TV",原创标题:【发型屋】面试发型技巧你你你什儿 错误千万不到犯责任编辑:Se  

2019-09-23