一、固定底部导航栏并且实现自适应 <style> *{margin: 0px;padding: 0px}/*设置无边距*/ img{width: 100%} .footer{ display: flex;/*设置成盒子模型*/ width:100%; height:70px; background: #eeeeee;/*设置背景色*/ /*固定到底部start*/ position:fixed;/*固定作用*/ bottom:0px; /*固定到底部end*/ /*ie6下样式，加下划线表示只针对ie6 的hack */ _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/ _bottom:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */ z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */ } .footer div{width: 33.3333%;text-align: center;margin-top: 8px;} .footer div p img{width: 30px;height: 30px;} </style> <div class="footer"> <div><p><img src="/static/wap/images/index/ft-1.png"></p><p>首页</p></div> <div><p><img src="/static/wap/images/index/ft-2-2.png"></p><p>搜索</p></div> <div><p><img src="/static/wap/images/index/ft-3-3.png"></p><p>我的</p></div> </div>