首頁 > 文章 > web前端 > H5行動端做一個不限個數的通欄按鈕的範例程式碼詳解

H5行動端做一個不限個數的通欄按鈕的範例程式碼詳解

黄舟原創: 2017-03-10 16:49:281712瀏覽

H5行動端做一個不限個數的通欄按鈕

前言

在行動裝置h5的頁面上經常需要一些通欄的按鈕.當然,要做一個通欄的按鈕這個事兒還是巨簡單的.可是,產品經理和設計師永遠都會給你添點麻煩.比如,明明是格式一樣的按鈕,但這裡是一個通欄的按鈕,到下面,就變成了通欄需要兩個按鈕,進到內頁,就是三個按鈕擠在一個通欄上.

#如果沒有一個合理的解決方法,那麼,無疑是非常噁心的.因為,我們必須寫多個樣式.而我們總想少寫一些程式碼,那麼,我們有沒有什麼好好的解決方法來實現呢?

其實是有的.下面,這篇博文,就讓我們來實現這個挑戰.

所需的效果.

可能看了上面的文字,你並沒有理解我想表達什麼.下面,我們來看一下一個效果圖,你就明白我說的是什麼了.

H5行動端做一個不限個數的通欄按鈕的範例程式碼詳解

如如上圖所示,第一個是一個通欄的按鈕,第二行是兩個按鈕,第三行是三個按鈕.

我希望透過一種CSS就能滿足這所有的需求,並且,html結構異常簡單才行.怎麼實作?看下面的程式碼:

##html結構

<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>移动端H5做一个H5行動端做一個不限個數的通欄按鈕的範例程式碼詳解</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="../style/style.css">
    </head>
    <body>
    <br>
    <!-- 第一行按钮 -->
    <p class="button_box">
        <p class="button pink">确定</p>
    </p>
    <br>
    <!-- 第二行按钮 -->
    <p class="button_box">
        <p class="button pink">付款</p>
        <p class="button">取消订单</p>
    </p>
    <br>
    <!-- 第三行按钮 -->
    <p class="button_box">
        <p class="button pink">设为默认</p>
        <a class="button">修改</a>
        <label class="button">删除<input type="submit"></label>
    </p></body></html>

如上程式碼所示.

其中的
br是為了區隔各個按鈕之間的距離,主要是p.button_box裡面的內容.

html的結構應該說是相當簡單的.首先,外層是

p.button_box#的盒子,而裡面呢,需要什麼按鈕,就寫a.button的非自閉和元素即可.

非自閉和元素是指除了
br\hr\input等自閉元素之外的其他元素.

在第三行裡面,我們示範了普通的盒子,連結,以及按鈕的寫法.

由於按鈕是自閉和元素,因此,我們用一個

label元素進行包裹,使其是可用的.

SASS部分

首先引用reset.scss和mixin.scss,見移動端H5系列博文基礎reset.scss和mixin.scss

其次,CSS部分使用SASS語法書寫,如果不會的話,請參考CSS預編譯技術之SASS學習經驗小結. 不再做過多闡述.

.button_box {
    display: table;     // 将 button_box 外层盒子模拟成表格
    width: 100%;        // 表格非完整块级元素,需要设定宽度
    table-layout:fixed; // 设定表格内单元格的宽度为自动等宽,重要!
    border-collapse: collapse;  // 合并表格和单元格边框
    .button {
        display: table-cell;    // 将子元素模拟成单元格
        font-size: 1.5rem;text-align: center;
        background: #eee;color: #555;   // 设定默认按钮样式
        box-shadow: 0 0 0 1px #ddd;     // 利用阴影模拟边框(阴影不占用盒子模型)
        text-decoration: none;          // 如果元素是链接,则去掉下划线
        @include hlh(4.8rem);           // 引用高度行高隐藏溢出代码块
        &.pink {        //设定一个特殊按钮样式,可根据需要设定多个
            background: #F13E7A;
            color: #fff;
            box-shadow:0 0 0 1px #F13E7A;
        }
        input {display: none;}      // 如果是按钮,则隐藏
    }
}

sass部分的解釋,我已經放在註釋裡面了.其思考主要是利用表格的特殊屬性,來實現了這個看上去比較費勁的需求.

總結

表格,多麼神奇的元素.由於當年我們使用表格佈局,造成代碼像老太太的裹腳布一樣又臭又長,因此,我們掀起了p+css的熱潮.而由於矯枉過正,導致我們忽略了表格的很多牛逼的特性.

其實表格是很牛逼的.透過這個案例,我們利用表格,順利的解決了這個看似困難的需求.而且完成得非常理想,非常棒.

html元素遠非塊級元素和內聯元素.有很多的屬性,也需要我們去嘗試和了解.看上去簡單,你確定簡單嗎?

以上是H5行動端做一個不限個數的通欄按鈕的範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：H5行動端各種各樣的列表的製作方法(七最終章)下一篇：H5行動端各種各樣的列表的製作方法(七最終章)

看更多