欢迎来到宝物袋网站,如果你有宝物想分享给大家的话,请联系我们。注册 | 登录

当前位置:首页 » HTML » 正文内容

手机端网页底部悬浮固定导航菜单代码

实现手机端网页底部悬浮固定的导航菜单很简单,主要就是用到CSS样式里的属性,下面把实例源码附上来给大家:

<?php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手机页面底部悬浮固定导航菜单代码</title>
<style type="text/css">
*{padding:0px; margin:0px;}
ul{list-style-type:none;}
a{color:#00f;text-decoration:none}
.box{height:800px;}
#fotnav{ width:100%; background:#25aad6;border-top:3px solid #FFF;position:fixed; bottom:0px;z-index:190;}
#fotnav li{display:inline-table; width:24%; text-align:center; line-height:40px;}
#fotnav li a{display:block; font-size:16px; font-weight:bold; color:#FFF; padding:5px 0px;}
</style>
</head>

<body>
<div id="bwd">
<div class="box">QQ群邀请统计机器人:http://quntongji.baowudai.cn/</div>
  <div id="fotnav">
    <ul>
      <li><a href="http://quntongji.baowudai.cn/login">登录</a></li>
      <li><a href="http://quntongji.baowudai.cn/mingling">命令</a></li>
      <li><a href="http://quntongji.baowudai.cn/submit">下单</a></li>
      <li><a href="http://quntongji.baowudai.cn/wenti">问题</a></li>
    </ul>
  </div>
</div>
</body>
</html>
?>

主要就是用到“position:fixed”css样式,它就是悬浮固定的意思,然后就是用到“bottom:0px;”,它就是显示到距离底部0px的位置。