在行動裝置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>
其中的html的結構應該說是相當簡單的.首先,外層是br
是為了區隔各個按鈕之間的距離,主要是
p.button_box裡面的內容.
p.button_box#的盒子,而裡面呢,需要什麼按鈕,就寫a.button的非自閉和元素即可.
非自閉和元素是指除了在第三行裡面,我們示範了普通的盒子,連結,以及按鈕的寫法.由於按鈕是自閉和元素,因此,我們用一個br\hr\input
等自閉元素之外的其他元素.
label元素進行包裹,使其是可用的.
.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;} // 如果是按钮,则隐藏 } }
以上是H5行動端做一個不限個數的通欄按鈕的範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!