很好看的手机站底部
很好看的手机站底部,每个按钮宽度都是自适应的,适合不同屏幕分辨率的手机。代码整理格式化,去除无用代码,方便使用与修改。
效果截图:
打包下载:很好看的手机站底部
<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>
相关文章
- 网站商务通高级定制教程(1)
网站商务通高级定制教程(1),今天为大家介绍一下商务通的高级定制方面的知识,利用到了之前和大家说过的 商务通核心函数库解密格式化后的代码 中的一个函数。 实现功能: 邀请框二次弹出、自定义快速邀请框内容、邀请后浏览器标题显示新信息闪烁和一个使最小
- 很炫的商务通效果
很炫的商务通效果 在线演示: 很炫的商务通效果 下载: 很炫的商务通效果 效果截图:
- 在商务通对话窗口中添加离线宝的方法
将以下代码通过商务通后台添加到商务通对话窗口中即可实现将离线宝加入商务通对话窗口。 需要将 input id=uid value= 6026803 type=hidden name=uid 中的 6026803 替换为自己的开通了离线宝的百度推广账户ID 复制代码 代码如下: p form id=lxb-data-form inp
- 很好看的手机站底部
很好看的手机站底部,每个按钮宽度都是自适应的,适合不同屏幕分辨率的手机。代码整理格式化,去除无用代码,方便使用与修改。 效果截图: 打包下载: 很好看的手机站底部
- 手机站底部邀请电话咨询,商务通咨询
手机站底部邀请电话咨询,商务通咨询,深绿色背景,包含拨打免费电话,在线咨询。 效果图:
随机推荐
- 网站商务通高级定制教程(1)
网站商务通高级定制教程(1),今天为大家介绍一下商务通的高级定制方面的知识,利用到了之前和大家说过的 商务通核心函数库解密格式化后的代码 中的一个函数。 实现功能: 邀请框二次弹出、自定义快速邀请框内容、邀请后浏览器标题显示新信息闪烁和一个使最小
- 很炫的商务通效果
很炫的商务通效果 在线演示: 很炫的商务通效果 下载: 很炫的商务通效果 效果截图:
- 在商务通对话窗口中添加离线宝的方法
将以下代码通过商务通后台添加到商务通对话窗口中即可实现将离线宝加入商务通对话窗口。 需要将 input id=uid value= 6026803 type=hidden name=uid 中的 6026803 替换为自己的开通了离线宝的百度推广账户ID 复制代码 代码如下: p form id=lxb-data-form inp
- 很好看的手机站底部
很好看的手机站底部,每个按钮宽度都是自适应的,适合不同屏幕分辨率的手机。代码整理格式化,去除无用代码,方便使用与修改。 效果截图: 打包下载: 很好看的手机站底部
- 手机站底部邀请电话咨询,商务通咨询
手机站底部邀请电话咨询,商务通咨询,深绿色背景,包含拨打免费电话,在线咨询。 效果图: