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

最近更新时间: May 24, 2024

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

网页底部固定导航栏通栏

实现步骤:

  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样式根据我们的需要进行修改即可。

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

版权声明©:希望对您会有所帮助;转载请注明出处。

欢迎留言评论!

Your email address will not be published. Required fields are marked *

大简笔记微信公众号

欢迎关注微信公众号随时了解最新知识分享

微信公众号交流咨询