H5移动端做一个不限个数的通栏按钮的示例代码详解
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元素远非块级元素和内联元素.有很多的属性,也需要我们去尝试和了解.看上去简单,你确定简单吗?
以上是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;”等等。
