响应式布局 底部客户联系代码

2020-04-09 14:13:06 编辑:七云网络 来源:本站原创
底部客户联系代码,红色为可以改动部分,CSS部分 都可以改动
预览图
HTML部分:
<div id="toolbar">
  <div class="x3"><a href="/"><span class="icon-home"></span>首页</a></div>
  <div class="x3"><a href="tel:电话号码"><span class="icon-phone"></span>电话</a></div>
  <div class="x3"><a href="sms:电话号码"><span class="icon-envelope-o"></span>短信</a></div>
  <div class="x3"><a href="#"><span class="icon-user"></span>联系</a></div>
</div>

CSS部分:

/* 当浏览器的可视区域小于760px,显示该代码*/
@media screen and (max-width: 760px){
#toolbar {
    color: #fff;
    width: 100%;
    height: 54px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 8;
    background: #000;
    display: block;
}
#toolbar a {
    width: 100%;
    color: #fff;
    display: block;
    padding: 5px 0 0 0;
    line-height: 23px;
    font-size: 14px;
}
#toolbar a span {
    font-size: 22px;
    display: block;
}
.x3 {
    width: 25%;
    float: left;
}
}
本站文章均为英德网站建设网络原创文章或转载,如有版权纠纷,请联系站长QQ删除