杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

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

Young小杰2017-9-29 16:00 网站搭建(6)5138小标签: 网站搭建教程 森七博客 AE博客

Screenshot_2017-09-29-16-00-36-084_com.android.br.png

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

跟下面图片的一样,把代码随便添加到首页或者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了

本文最后更新于2017-9-29,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • 滴,成人卡  打卡成功,现在时间:21点50分记得每天坚持打卡哦!

  • 四天 Lv 1

    支持下,已转载,试了下发现按钮第一个和最后一个不协调,改了下把“list-style-type:none;top:0px;left:3%;}”中的3%改为0就好看的多了

  • 小河 Lv 2

    日常来观望dalao

  • Flyer Lv 3

    很肉鸡  没啥用

  • 小小 Lv 1

    打卡成功,现在时间:21点42分记得每天坚持打卡哦! 只有比别人更早更勤奋地发奋,才能尝到成功的味道

  • 手机扫描二维码
    阅读体验更佳