本文摘自PHP中文网,作者黄舟,侵删。
H5移动端做一个不限个数的通栏按钮
前言
在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品经理和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上.
如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们总想少写一些代码,那么,我们有没有什么好的解决方法来实现呢?
其实是有的.下面,这篇博文,就让我们来实现这个挑战.
所要的效果.
可能看了上面的文字,你并没有理解我想表达什么.下面,我们来看一下一个效果图,你就明白我说的是什么了.
如上图所示,第一个是一个通栏的按钮,第二行是两个按钮,第三行是三个按钮.
我希望通过一种CSS就能满足这所有的需求,并且,html结构异常简单才行.怎么实现?看下面的代码:
html结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
如上代码所示.
其中的
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学习经验小结. 不再做过多阐述.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
sass部分的解释,我已经放在注释里面了.其思考主要是利用表格的特殊属性,来实现了这个看上去比较费劲的需求.
总结
表格,多么神奇的元素.由于当年我们使用表格布局,造成代码像老太太的裹脚布一样又臭又长,因此,我们掀起了p+css的热潮.而由于矫枉过正,导致我们忽略了表格的很多牛逼的特性.
其实表格是很牛逼的.通过这个案例,我们利用表格,顺利的解决了这个看似困难的需求.而且完成得非常理想,非常棒.
html元素远非块级元素和内联元素.有很多的属性,也需要我们去尝试和了解.看上去简单,你确定简单吗?
以上就是H5移动端做一个不限个数的通栏按钮的示例代码详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5返回音频/视频的当前网络状态(activity)的属性networkstate
更多相关阅读请进入《h5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者