很好看的手机站底部

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

效果截图:

很好看的手机站底部

<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>

随机推荐

手机站底部邀请电话咨询，商务通咨询
手机站底部邀请电话咨询，商务通咨询，深绿色背景，包含拨打免费电话，在线咨询。效果图:
在商务通对话窗口中添加离线宝的方法
将以下代码通过商务通后台添加到商务通对话窗口中即可实现将离线宝加入商务通对话窗口。需要将 input id=uid value= 6026803 type=hidden name=uid 中的 6026803 替换为自己的开通了离线宝的百度推广账户ID 复制代码代码如下: p form id=lxb-data-form inp
很好看的手机站底部
很好看的手机站底部，每个按钮宽度都是自适应的，适合不同屏幕分辨率的手机。代码整理格式化，去除无用代码，方便使用与修改。效果截图: 打包下载: 很好看的手机站底部
商务通轨迹代码未加载出来前执行的打开商通对话的函数
医疗网站上的商务通代码在一些情况下可能出现无法加载的情况(常见的有网络速度慢，商务通服务器速度慢，商务通服务器受到攻击等)，导致商务通代码无法执行，访客无法进入商务通进行咨询，这样错失了很多的对话机会，给我们造成很大的损失。下面医疗模板库为
百度离线宝调用接口
医疗模板库(www.120muban.com)收集整理的百度离线宝调用接口，使用方便，可自定义离线宝样式。 //data-lxb-uid 为百度推广账户ID //data-lxb-gid 为离线宝分组ID，没有可留空。

很好看的手机站底部

相关文章

随机推荐