很好看的手机站底部，每个按钮宽度都是自适应的，适合不同屏幕分辨率的手机。代码整理格式化，去除无用代码，方便使用与修改。

效果截图:

打包下载:很好看的手机站底部

<title>很好看的手机站底部</title>
<style>
/*******公用样式*******/
*{ margin:0px; padding:0px;}
body{ font-size:14px; margin:0px;font-family:"微软雅黑"; color:#444; min-height:100%; padding-bottom:66px; position:relative;}
ul,ol,li{list-style-type:none; margin:0px; padding:0px;}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form{ margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6{ font-family:"微软雅黑","黑体";}
select,input,select{vertical-align:middle;}
a{ text-decoration:none; border:none;}
a:hover{text-decoration:none;} 

/*底部浮动样式*/
.bdgg_m {
width: 100%;
background: #2C61B9;
height: 60px;
position: fixed;
bottom: 0;
font-family:"微软雅黑"; font-size:12px;}
.bdgg_m ul {
overflow: hidden;}
.bdgg_m ul li {
float: left;
height: 60px;
width: 25%;
background:url(/data2/20140913/bottombg.gif) no-repeat right 1px;
text-align: center;}
.bdgg_m ul li a {
float: left;
display: inline-block;
width: 100%;
padding-top: 8px;
}
.bdgg_m ul li a span {
display: block;
background:url(/data2/20140913/bottomico.png) no-repeat center 0;
width: 100%;
}
.bdgg_m ul li a p {
width: 100%;
color: white;
font-size: 0.75em;
line-height: 25px;
}
.bdgg_m ul li.liLast1 {
background: none;
}
.bdgg_m ul li a span.fotthree {
background-position: center -60px;
height: 27px;
}
.bdgg_m ul li a span.fottwo {
background-position: center -30px;
height: 28px;
}
.bdgg_m ul li a span.fotone {
background-position: center 0;
height: 28px;
}
.bdgg_m ul li a span.fotfour {
background-position: center -87px;
height: 27px;
}
.bdgg_m ul li a p {
width: 100%;
color: white;
font-size:12px;
}
</style>

<div class="bdgg_m">
  <ul>
    <li style="background:#F00;"><a href="tel:10086"><span class="fotone"></span>
      <p>一键通话</p>
      </a></li>
    <li><a href="javascript:void(0)" onclick="openZoosUrl('chatwin');"><span class="fottwo"></span>
      <p>免费咨询</p>
      </a></li>
      <li><a href="javascript:void(0)" onclick="openZoosUrl('chatwin');"><span class="fotfour"></span>
      <p>在线预约</p>
      </a></li>
    <li class="liLast1"><a href="/"><span class="fotthree"></span>
      <p>返回首页</p>
      </a></li>    
  </ul>
</div>
<p>医疗模板库(www.120muban.com)收集整理 仅供学习参考，请勿用于商业用途</p>