手机站底部导航条效果自适应手机屏幕大小

代码打包下载：手机站底部导航条效果自适应手机屏幕大小

效果截图：

<title>手机站底部导航条效果自适应手机屏幕大小</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 Microsoft Yahei;color:#505050}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul,ol{list-style:none}
a{text-decoration:none;color:#333;outline:none}
a:hover{color:#333; }
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
button,input,select,textarea{font-size:100%;outline:none}
textarea{resize:none}
img{vertical-align:top;width:100%;}

.footer {
	height:60px;
	background:#e85329;
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	z-index:2000;
}
.menu li {
	width:20%;
	float:left;
	text-align:center;
}
.menu li.active {
	background:#f4823f;
}
.footer .menu a {
	padding-top:35px;
	height:25px;
	display:block;
	color:#FFF;
	background-repeat:no-repeat;
	background-size:30px auto;
	background-position:center 10px;
	font-size:14px;
	color:#FFF;
	text-decoration: none;
}
.footer .menu a:visited {
	color:#FFF;
}
.menu_1 a {
	background-image:url("/demo/20140929/001/images/menu_1.png");
}
.menu_2 a {
	background-image:url("/demo/20140929/001/images/menu_2.png");
}
.menu_3 a {
	background-image:url("/demo/20140929/001/images/menu_3.png");
}
.menu_4 a {
	background-image:url("/demo/20140929/001/images/menu_4.png");
}
.menu_5 a {
	background-image:url("/demo/20140929/001/images/menu_5.png");
}
</style>

<div class="footer">
  <ul class="menu clearfix">
    <li class="menu_1 active"><a target="_self" href="/">返回首页</a></li>
    <li class="menu_2"><a target="_self" href="#">预约挂号</a></li>
    <li class="menu_3"><a href="#" target="_blank">立即通话</a></li>
    <li class="menu_4"><a href="#" target="_self">在线咨询</a></li>
    <li class="menu_5"><a target="_self" href="#">医院地址</a></li>
  </ul>
</div>