dedecms,织梦,搞笑段子,织梦伪静态规则,织梦全站伪静态,织梦手机版伪静态

手机网站底部固定栏html代码

工作手记 baishitou 2198℃ 0评论

先看一下效果 。

 

111

我这里用的是只有两栏的代码,用的字体图标,字体图标调用代码:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">

样式部分:

/*底部*/
.ft {
    padding: 10px 0 0 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}
.ft ul {
    height: 0px;
}
.ft ul li {
    float: left;
    width: 50%;
	height: 50px;
    text-align: center;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.ft ul li span {
    display: block;
    color: #fff;
    font-size: 1em;
    font-family: "微软雅黑";
    line-height: 22px;
}
.ft a {
    color: #000;
    text-decoration: none;
}

 

HMTL部分:

<div class="ft">
            <ul>
                <li style="background:#FF5A00">
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=35625244&site=qq&menu=yes"><span><i class="fas fa-comment-dots"></i></span><span>在线咨询</span></a>
                </li>
                <li style="position:relative;background: #007aff">
                    <a href="tel:12345678910"><span><i class="fas fa-headphones"></i></span><span>电话咨询</span></a>
                </li>
            </ul>
</div>

如果你想显示三栏。只需把LI的宽度设置三等分。即33.33%,四栏,就是25%。我这里显示的是两栏,所以设置的宽度为50%。看看三栏的效果

222

给一个演示地址:http://m.441516.com

转载请注明:白石头博客 » 手机网站底部固定栏html代码

喜欢 (3)or分享 (0)

您必须 登录 才能发表评论!