<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机 底部 导航栏</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>手机站常用的底部导航条，宽度自适应</title> <style> body,ul,li,span,p,b,strong,h1,h2,h3,h4,h5,h6,dl,dt,dd,form{margin:0px;padding:0px;} body{font-size:12px;color:#666666;} a{text-decoration:none;color:#666666;} a:hover{text-decoration:underline;color:#FF0000;} #position{height:56px;background:#227bd6;padding-top:8px;position:fixed;bottom:0px;left:0px;width:100%;z-index:999;overflow:hidden;} #position dd{width:20%;text-align:center;float:left;background:url(/demo/20140929/002/images/foot_bg.jpg) repeat-y right top;overflow:hidden;} #position dd font{display:block;padding-top:8px;} #position dd a{color:#FFF;text-decoration:none;} #blank{height:64px;} </style> </head> <body> <div style='height:6000px;'> <h1>989898</h1> <p> 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </p> <dl id="position"> <dd><a href="/"><img src="/demo/20140929/002/images/foot_img1.jpg"><font>网站首页</font></a></dd> <dd><a href="#"><img src="/demo/20140929/002/images/foot_img2.jpg"><font>在线咨询</font></a></dd> <dd><a href="#"><img src="/demo/20140929/002/images/foot_img4.jpg"><font>电话咨询</font></a></dd> <dd><a href="#"><img src="/demo/20140929/002/images/foot_img3.jpg"><font>预约挂号</font></a></dd> <dd><a href="#"><img src="/demo/20140929/002/images/foot_img5.jpg"><font>医院地址</font></a></dd> </dl> </div> </body> </html>