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>登入後複製
如上程式碼所示.<!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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Vue專案中使用行動端的手勢操作
Oct 08, 2023 pm 07:33 PM
如何在Vue專案中使用行動端的手勢操作隨著行動裝置的普及，越來越多的應用程式需要在行動端上提供更友善的互動體驗。而手勢操作是行動裝置上常見的互動方式之一，它能夠讓使用者透過觸控螢幕來完成各種操作，如滑動、縮放等。在Vue專案中，我們可以透過第三方函式庫來實現行動手勢操作，以下將介紹如何在Vue專案中使用手勢操作，並提供具體的程式碼範例。首先，我們需要引入一個專門用
解決Vue行動端多觸點問題
Jun 30, 2023 pm 01:06 PM
在行動裝置開發中，我們經常會遇到多手指觸控的問題。當使用者在行動裝置上使用多個手指滑動或縮放螢幕時，如何準確地識別和回應這些手勢是一個重要的開發難題。在Vue開發中，我們可以採取一些措施來解決行動端多手指觸控問題。一、使用vue-touch插件vue-touch是用於Vue的手勢插件，它可以方便地處理移動端的多手指觸控事件。我們可以透過npm安裝vue-to
h5是指什麼
Aug 02, 2023 pm 01:52 PM
H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。
Vue實現行動端響應式佈局的完整指南（Vant）
Jun 09, 2023 pm 04:09 PM
Vue實現行動端響應式佈局的完整指南（Vant）行動端響應式佈局是現代Web開發中非常重要的一環，隨著行動裝置的普及，如何快速響應用戶手機螢幕的大小和分辨率，成為了前端工程師必須面對的挑戰之一。 Vue框架自備響應式佈局的特性，同時也有不少第三方函式庫來幫助我們實現響應式佈局。其中，Vant元件庫是一款Vue行動裝置UI庫，因其十分強大、易用和客製化，並且完全符合移
Vue開發中如何解決行動端雙擊放大問題
Jun 29, 2023 am 11:06 AM
隨著行動端設備的普及，使用Vue進行行動端開發已經成為了常見的選擇。然而，我們在行動端開發過程中常常會面臨一個問題，就是雙擊放大。本文將針對此問題，探討Vue開發中如何解決行動端雙擊放大的具體方法。行動端雙擊放大問題的出現，主要是因為行動裝置在觸控螢幕上進行雙擊操作時，會自動放大網頁的縮放比例。對於一般的網頁開發來說，這種雙擊放大通常是有好處的，因為它可以
h5如何使用position
Dec 26, 2023 pm 01:39 PM
在H5中使用position屬性可以透過CSS控制元素的定位方式：1、相對定位relative，語法為「style="position: relative;」；2、絕對定位absolute，語法為「style="position: absolute; 」；3、固定定位fixed，語法為「style="position: fixed;」等等。
