当前位置:首页 > HTML/CSS > 正文内容

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

彭淇3年前 (2017-10-24)HTML/CSS37380

在一些博客手机版会看到底部有些按键很好看!跟下面图片的一样,把代码随便添加到首页或者footer文件就行


给网站添加好看的底部功能按钮  首页 css 博客 视觉差 第1张


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


扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/181.html

分享给朋友:
返回列表

上一篇:微信公众号开通

没有最新的文章了...

相关文章

CSS高效书写小贴士分享

统一样式书写顺序 位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, m...

css简单导航条制作

css简单导航条制作,效果如图所示:<!DOCTYPE html> <html lang="en"> <head>...

关于本站已开通APP下载的公告

亲,大家好,本站于2017年9月6日正式开通用户下载APP功能,欢迎大家积极下载,成为本站的一份子!用户下载(可以直接点击此处,进行下载)(欢迎在下方直接安装,更方便哟)温馨提示:本软件经检测为无病毒...

微信公众号开通

微信公众号开通

博主的微信公众号正式开通啦,欢迎扫描下方二维码关注,谢谢!...

3D时间显示

3D时间显示

js获取时间与css3 3D属性做出的3D旋转时间 源代码如下: <!DOCTYPE html> <html l...

如何为网页选择合适的字体?

字体系列一般分为五种:Sans-serif、 Serif、 Monospace、 Cursive 和 Fantasy。 每个font-family包含了一系列具有相同特征的字体,这里...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。