H5移动端做一个不限个数的通栏按钮
前言
在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品经理和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上.
如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们总想少写一些代码,那么,我们有没有什么好的解决方法来实现呢?
其实是有的.下面,这篇博文,就让我们来实现这个挑战.
所要的效果.
可能看了上面的文字,你并没有理解我想表达什么.下面,我们来看一下一个效果图,你就明白我说的是什么了.
如上图所示,第一个是一个通栏的按钮,第二行是两个按钮,第三行是三个按钮.
我希望通过一种CSS就能满足这所有的需求,并且,html结构异常简单才行.怎么实现?看下面的代码:
html结构
<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8">
<title>移动端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的盒子,而里面呢,需要什么按钮,就写一个.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元素远非块级元素和内联元素.有很多的属性,也需要我们去尝试和了解.看上去简单,你确定简单吗?
Atas ialah kandungan terperinci H5移动端做一个不限个数的通栏按钮的示例代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
H5: Masa Depan Kandungan dan Reka Bentuk WebMay 01, 2025 am 12:12 AMH5 (HTML5) akan meningkatkan kandungan dan reka bentuk web melalui elemen baru dan API. 1) H5 meningkatkan penandaan semantik dan sokongan multimedia. 2) Ia memperkenalkan kanvas dan SVG, memperkayakan reka bentuk web. 3) H5 berfungsi dengan memperluaskan fungsi HTML melalui tag baru dan API. 4) Penggunaan asas termasuk membuat grafik menggunakannya, dan penggunaan lanjutan melibatkan WebStorageAPI. 5) Pemaju perlu memberi perhatian kepada keserasian penyemak imbas dan pengoptimuman prestasi.
H5: Ciri dan keupayaan baru untuk Pembangunan WebApr 29, 2025 am 12:07 AMH5 membawa beberapa fungsi dan keupayaan baru, meningkatkan kecekapan interaktiviti dan pembangunan laman web. 1. Tag semantik seperti meningkatkan SEO. 2. Sokongan multimedia memudahkan main balik audio dan video melalui dan tag. 3. Lukisan kanvas menyediakan alat lukisan grafik dinamik. 4. Penyimpanan Tempatan Memudahkan Penyimpanan Data melalui LocalStorage dan sessionStorage. 5. API Geolokasi memudahkan pembangunan perkhidmatan berasaskan lokasi.
H5: Penambahbaikan utama dalam HTML5Apr 28, 2025 am 12:26 AMHTML5 membawa lima penambahbaikan utama: 1. Tag semantik meningkatkan kejelasan kod dan kesan SEO; 2. Sokongan multimedia memudahkan penyembuhan video dan audio; 3. Peningkatan Borang Memudahkan Pengesahan; 4. Offline dan storan tempatan meningkatkan pengalaman pengguna; 5. Fungsi kanvas dan grafik meningkatkan visualisasi laman web.
HTML5: Standard dan kesannya terhadap pembangunan webApr 27, 2025 am 12:12 AMCiri -ciri teras HTML5 termasuk tag semantik, sokongan multimedia, penyimpanan luar talian dan penyimpanan tempatan, dan peningkatan bentuk. 1. Tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Memudahkan penanaman multimedia dengan label. 3. Storan luar talian dan penyimpanan tempatan seperti ApplicationCache dan LocalStorage Sokongan Operasi Bebas Rangkaian dan Penyimpanan Data. 4. Peningkatan Borang Memperkenalkan Jenis Input dan Sifat Pengesahan Baru Untuk Memudahkan Pemprosesan dan Pengesahan.
Contoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AMH5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.
Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AMH5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.
Blok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AMUnsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.
HTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AMTidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
Dreamweaver CS6
Alat pembangunan web visual
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
