位置:宝安网站建设 > 资讯中心 > 网站运营 >

手机站底部悬浮咨询条实现源码

手机站底部悬浮咨询条

  手机站底部悬浮咨询条实现源码

  很多行业的手机站、移动站流量都已经超越了pc站,已经进入了移动互联网时代,手机网站的精细优化建设,是一个很重要的事情。

  据统计,手机站的咨询转化,90%都是来自底部的悬浮咨询条,做好这个将大大提高咨询量。下面是实现手机站底部咨询条的源码,如果喜欢可以直接复制使用哟。

  你也可以在底下直接下载压缩包源码:

  【html代码部分】

  <div id="bottom">

  <ul>

  <li> <a href="https://www.mz211.com">

  <dl>

  <dt><img src="images/icon_home.png" width="22" height="22" style=" margin-top:5px;"></dt>

  <dd>网站首页</dd>

  </dl>

  </a> </li>

  <li> <a href="sms:">

  <dl>

  <dt><img src="images/icon_sms.png" width="22" height="22" style="margin-top: 5px; " class="wow flash animated" data-wow-delay="2s"></dt>

  <dd>发送短信</dd>

  </dl>

  </a> </li>

  <li> <a href="tel:">

  <dl>

  <dt><img src="images/icon_phone.png" width="22" height="22" style="margin-top: 5px;" class="wow flash animated" data-wow-delay="3s"></dt>

  <dd>电话咨询</dd>

  </dl>

  </a> </li>

  <li> <a href="#">

  <dl>

  <dt><img src="images/icon_chat.png" width="28" height="28" style=" margin-top:2px;"></dt>

  <dd>在线咨询</dd>

  </dl>

  </a> </li>

  </ul>

  </div>

  【css代码部分】

  <style>

  *{padding:0;margin:0;}

  ul,li{list-style:none;}

  a{ text-decoration:none;}

  #bottom {

  position: fixed;

  width: 100%;

  max-width: 640px;

  margin: 0 auto;

  height: 50px;

  bottom: 0;

  background: #bc1213;

  z-index: 999;

  }

  #bottom ul {

  height: 45px;

  line-height: 45px

  }

  #bottom ul li {

  width: 25%;

  float: left;

  color: #FFF

  }

  #bottom ul li dl {

  width: auto;

  margin: 0 auto;

  border-right: 1px solid #980001;

  box-shadow: 1px 0px 0 #880506;

  text-align: center

  }

  #bottom ul li dt {

  width: auto;

  height: 30px;

  overflow: hidden;

  }

  #bottom ul li dd {

  width: auto;

  height: 20px;

  font-size: 12px;

  color: #fff;

  line-height: 20px;

  }

  </style>

下载源码 →

主营业务:

名匠网络有多年的网站建设小程序开发SEO优化实战经验,帮助客户打造营销型网站,快速提升网站关键词排名,抢占搜索引擎流量,提高网站转化率,为客户带来更多的订单。

联系方式:
QQ:360764540
微信:jun360764540
  • 最新
  • 推荐
  • 热门