网页手机端底部通栏制作方法

在做移动端网站适配的时候，我们通常会在网站底部加上一个类似导航的通栏，目的是为了用户更加方便的进行选择，尤其是在做企业网站的时候，底部一般会有如下通栏：

实现步骤：

1. 步骤一：默认已添加移动端适配代码，如果没有就在页面头部标签加入如下代码：

   <meta name="viewport" content="width=device-width, initial-scale=1">

2. 步骤二：在网站页面代码底部添加如下html代码：

   <div class="clearfix" id="fix_footer"> <a href="/"> <span class="icon-
home"></span>
<p>Home</p>
</a> <a href="/"> <span class="icon-case"></span>
<p>Case</p>
</a> <a href="/"> <span class="icon-product"></span>
<p>Products</p>
</a> <a href="/"> <span class="icon-contact"></span>
<p>Inquiry</p>
</a> </div>


3. 步骤三：添加相应的css代码：

   <style type="text/css">
body {
margin:0px;
padding:0px;
}
#fix_footer {
display:none;
}
@media only screen and (max-device-width: 768px) {
#fix_footer {
height: 60px;
border-top: 1px solid #EEE;
display: block;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-content: center;
background: #1a73e8;
overflow: hidden;
}
#fix_footer a {
color: #fff;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
box-sizing: border-box;
display: block;
font-size: 16px;
}
#fix_footer .icon-home {
background: url(home.png) center no-repeat;
}
#fix_footer a span {
display: block;
width: 100%;
height: 30px;
float: left;
}
#fix_footer a p {
width: 100%;
height: 30px;
float: left;
font-size: 16px;
margin: 0;
padding: 0;
line-height: 30px;
}
#fix_footer .icon-product {
background: url(products.png) center no-repeat;
}
#fix_footer .icon-case {
background: url(case.png) center no-repeat;
}
#fix_footer .icon-contact {
background: url(inquiry.png) center no-repeat;
}
}
</style>


注意：具体的通栏文字内容、图标以及css样式根据我们的需要进行修改即可。

测试页面：网页手机端底部通栏测试效果（需要在手机端查看或者在电脑端网页开发工具中转到手机模式才能看到效果）