给网站添加好看的底部功能按钮

在一些博客手机版会看到底部有些按键很好看!

跟下面图片的一样,把代码随便添加到首页或者footer文件就行

<style type="text/css">.nav{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.85);list-style-image:none;list-style-type:none;margin:0px;padding:0px !important;}.nav ul li{position:relative;float:left;width:20%;text-align:center;margin:0px;padding:0px;list-style-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>

<div class="nav">
  <ul>
    <li> <a href="https://www.mom1.cn/"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5orc0s4pj202s02sq2t.jpg"></a> </li>
    <li> <a href="https://www.mom1.cn/ql.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5ormmj33j202s02smx1.jpg"></a> </li>
    <li> <a href="https://www.mom1.cn/qqo.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5onpl6ohj202s02sglh.jpg"></a> </li>
    <li> <a href="http://yk.mom1.cn/"><img style="animation: blink 1.0s linear infinite;" src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5p5z185rj202s02s0sm.jpg"></a> </li>
    <li> <a href="https://www.mom1.cn/io.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fjclu2gnghj202s02s745.jpg"></a> </li>
  </ul>
</div>

只在手机版显示

文字和图片是一体的,如果你想换其他文字,只能自己找图p了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

891
来自专栏一个会写诗的程序员的博客

Python 使用 pygame 实现一个简单的动画

1614
来自专栏微信小程序开发

swiper组件添加左右箭头

前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。 思路很简单:在swip...

3649
来自专栏Youngxj

自适应导航网页源码

9902
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

5925
来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

1210
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

1132
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

1402
来自专栏疯狂的小程序

关于微信小程序内置组件swiper,circular使用分享

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技...

62410
来自专栏jiajia_deng

react-router 环境使用锚点的方法

1972

扫码关注云+社区

领取腾讯云代金券