在线咨询
微信咨询
服务热线
服务热线:15639912513
TOP
当前位置:
首页 > 新闻中心> 前端设计>网站底部悬浮代码(包含一键拨号+首页+…

网站底部悬浮代码(包含一键拨号+首页+分类)

发布时间:2019-10-10 浏览:2935次

在开发高端网站定制的时候,由于客户需要在已经存在的网站底部加个悬浮代码,所以开个了个代码。以下是关于网站底部悬浮代码的流程及代码。

网站底部悬浮代码的流程是:

1、底部设计一行三列或者四列的正方形,每个正方形里面包含了一键拨号、首页、分类等等。

代码如下:

TIM图片20191010172837.png

2、编写关于这一行的样式

.footnav{

    display: none;

}

@media (max-width: 460px){

.footnav{

display:block;;

height: 70px;

width: 100%;

position: relative;

z-index: 999;

}

.foot_nav{

    position: fixed;

    bottom: 0;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    width: 100%;

    background-color: #000000;

}

.foot_nav_c{

    width: 25%;

    height: 50px;

    padding-top: 5px;

    color: #ffffff;

    text-align: center;

}

    .foot_nav_c a{

        color: #ffffff;

    }

}

样式这块的思路主要是,要悬浮!这个很关键,不然你设计个底部导航只能固定在网站底部,意义就不大了。有关如何让底部导航悬浮,请参考的这篇文章如何实现导航栏固定在顶部(吸顶效果)。底部导航悬浮问题解决后,主要是排版布局。

以上网站底部悬浮代码代码,经过测试,完全可以直接使用!

TAG
2935
该内容对我有帮助