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

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

跟下面图片的一样,把代码自行添加到合适位置就可以了!。

只在手机版显示

<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>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网开发者交流社区

SpringBoot使用Spring Initializer

1042
来自专栏君赏技术博客

设置Xcode自动管理证书文件

许多的开发者依然维护着旧的项目,他们也许需要选择一个证书签名去编译。这个问题讨论怎么在Xcode设置来自动化选择证书通过他们默认的设置,这个问题适用于IOS和M...

4193
来自专栏GIS讲堂

Arcgis Server服务中rest服务和wms服务的对应关系

我们在用Arcgis Server发布服务时,会发布Mapserver的同时发布Wmsserver服务,但是,调用的图层的顺序却相反,本文从几个例子详细介绍下r...

1994
来自专栏黑泽君的专栏

如何去掉myeclipse的web项目启动时出现的 CodeLive Panel

  最近安装了Myeclipse 2017 CI ,写了一个web项目,在浏览器打开网页时右上角出现了 CodeLive面板,有时显示会遮挡页面效果,看着也碍眼...

2072
来自专栏Youngxj

Emlog修改3D标签云显示标签数量

2733
来自专栏iOS开发攻城狮的集散地

Xcode炫酷插件

1853
来自专栏Jerry的SAP技术分享

微信小程序开发系列七:微信小程序的页面跳转

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

2292
来自专栏运维技术迷

Pycharm常用技巧

1.在Pycharm下为你的Python项目配置Python解释器 Project:当前项目名>Project Interpreter>add Local 2....

58812
来自专栏别先生

解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

1、参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981

2153
来自专栏朱丽琪的专栏

Selenium 原理探秘

Selenium 作为目前主流的 web 自动化工具,使用非常广泛,本文介绍 selenium 的发展历程以及对应的工作原理。

9891

扫码关注云+社区

领取腾讯云代金券