层的应用-底部工具栏
————————————————————
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#bottom_nav_wrap {
bottom: 0;
height: 34px;
left: 0;
overflow: visible;
position: fixed;
width: 100%;
z-index: 10000;
}
#bottom_nav {
color: #FFFFFF;
height: 34px;
margin: 0 auto;
max-width: 1255px;
position: relative;
width: 1225px;
}
#bottom_nav .bottom-bg {
background: none repeat scroll 0 0 #9BBADC;
border: 1px solid #4788C9;
padding-top: 1px;
}
#bottom_nav * {
font-family: "宋体";
font-size: 12px;
line-height: 14px;
}
#bottom_nav .ul-nav {
background: none repeat scroll 0 0 #5082BE;
height: 32px;
text-align: left;
width: 100%;
}
#bottom_nav .ul-nav li {
float: left;
height: 32px;
width: 200px;
border-right: 1px solid #457CB3;
text-align:center;
padding-top:10px;
}
#bottom_nav .ul-nav li a{
color:white;
font-size:14px;
}
</style>
————————————————————————
<body>
<div id="bottom_nav_wrap" style="">
<div id="bottom_nav" style="width: 1255px;">
<div class="bottom-bg">
<ul class="ul-nav">
<li>
<a href="#">菜单001</a>
</li>
<li>
<a href="#">菜单002</a>
</li>
<li>
<a href="#">菜单003</a>
</li>
<li>
<a href="#">菜单004</a>
</li>
</ul>
</div>
</div>
</div>
<div style=" height:1800px; background:#666;"></div>
</body>
————————————————————————————————————
