如果没有复杂的子菜单，就四五个一级菜单，那我们完全可以用固定DIV在页面最底端来实现。
固定DIV在页面最底端就一句CSS样式代码即可：
| style="position:fixed; bottom:0px;z-index:999;" |
这段样式代码加到DIV上，就能固定DIV在页面最底部，并让它保持在其他DIV上，不会被遮盖了。
当然，通过控制DIV的位置，我们可以延伸样式表代码，加上点击链接的特效，这样就可以轻松做成移动端页面的导航菜单了：
<!--底部菜单样式表-->
<style>
#nav {
width: 100%;
height: 50px;
background: #d50000;
}
ul {
padding: 0;
margin: 0;
azimuth:center;
}
li {
display: inline;
padding: 0;
line-height:50px
}
li a {
font-family: Arial;
font-size: 12pt;
text-decoration: none;
float: center;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
color: #fff;
}
li a:hover {
font-family: Arial;
font-size: 12pt;
text-decoration: none;
float: center;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
color: #fff;
}
</style> <!--导航图层-->
<div id="nav" style="position:fixed; bottom:0px;z-index:999;">
<ul style="text-align:center;">
<li><a href="1.asp">首页</a></li>
<li><a href="2.asp">我们</a></li>
<li><a href="3.asp">碎念</a></li>
<li><a href="4.asp">留言</a></li>
</ul>
</div> |