手機(jī)網(wǎng)站底部固定欄html代碼

先看一下效果 。

我這里用的是只有兩欄的代碼，用的字體圖標(biāo)，字體圖標(biāo)調(diào)用代碼：

<link rel="stylesheet" >??//字體圖標(biāo)調(diào)用新式

頭部標(biāo)題前要添加meta viewport標(biāo)簽，加入這個(gè)后，手機(jī)端預(yù)覽才正常，效果如上圖。不然顯示的是電腦端的，上面字都小看不清楚，不加效果如下圖，如果你的模板頭部有這個(gè)就不用加了。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

樣式部分：

/*底部*/
.ft {
    padding: 10px 0 0 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}
.ft ul {
    height: 0px;margin: 0;padding: 0;
}
.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 ><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的寬度設(shè)置三等分。即33.33%，四欄，就是25%。我這里顯示的是兩欄，所以設(shè)置的寬度為50%?？纯慈龣诘男Ч?/p>

給一個(gè)演示地址：http://m.441516.com