移动端H5做一个不限个数的通栏按钮 by FungLeo
前言
在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨 简单 的.可是, 产品经理 和设计师 永远 都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到 内页 ,就是三个按钮挤在一个通栏上.
如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们总想少写一些代码,那么,我们有没有什么好的解决方法来实现呢?
其实是有的.下面,这篇博文,就让我们来实现这个挑战.
所要的效果.
可能看了上面的文字,你并没有理解我想表达什么.下面,我们来看一下一个效果图,你就明白我说的 是什么 了.
如上图所示,第一个是一个通栏的按钮,第二行是两个按钮,第三行是三个按钮. vc D4NCjx WPS 7Sz6PN+82ouf3Su9bWQ1NTvs3E3 ML 61+ pv 4sv509C1xNDox/Ms SQL H0ixodG1sveG5udLss6O88rWlssXQ0C7U9cO0yr xp 1j+/tM/Cw+a1xLT6wus6PC9wPg0KPGgyIGlkPQ == "html结构">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 { dis play : 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 -s hadow: 0 0 0 1px #ddd; // 利用 阴影模拟边框(阴影不占用盒子模型) text-decoration: none; // 如果元素是链接,则去掉下划线 @include hlh(4.8rem); // 引用高度行高隐藏溢出代码块 & am p; .pink { //设定一个特殊按钮样式,可根据需要设定多个 background: # F1 3E7A; color: #fff; box-shadow:0 0 0 1px #F13E7A; } input {display: none;} // 如果是按钮,则隐藏 } } sass部分的解释,我已经放在注释里面了.其思考主要是利用表格的特殊属性,来实现了这个看上去比较费劲的需求.
总结
表格,多么神奇的元素.由于 当年 我们使用表格布局,造成代码像老太太的裹脚布一样又臭又长,因此,我们掀起了p+css的热潮.而由于矫枉过正,导致我们忽略了表格的很多牛逼的特性.
其实表格是很牛逼的.通过这个案例,我们利用表格,顺利的解决了这个看似 困难 的需求.而且完成得非常 理想 ,非常棒.
html元素远非块级元素和内联元素.有很多的属性,也需要我们去尝试和 了解 .看上去简单,你确定简单吗?
移动端H5做一个不限个数的通栏按钮 by FungLeo
前言
在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品 经理 和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上.
如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们总想少写一些代码,那么,我们有没有什么好的解决方法来实现呢?
其实是有的.下面,这篇博文,就让我们来实现这个挑战.
所要的效果.
可能看了上面的文字,你并没有理解我想表达什么.下面,我们来看一下一个效果图,你就明白我说的是什么了.
如上图所示,第一个是一个通栏的按钮,第二行是两个按钮,第三行是三个按钮. vc D4NCjxwPs7Sz6PN+82ouf3Su9bWQ1NTvs3E3ML61+PV4sv509C1xNDox/MssqLH0ixodG1sveG5udLss6O88rWlssXQ0C7U9cO0yrXP1j+/tM/Cw+a1xLT6wus6PC9wPg0KPGgyIGlkPQ=="html结构">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元素远非块级元素和内联元素.有很多的属性,也需要我们去尝试和了解.看上去简单,你确定简单吗?
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-移动端H5做一个不限个数的通栏按钮 by FungLeo 全部内容，希望文章能够帮你解决 html5教程-移动端H5做一个不限个数的通栏按钮 by FungLeo 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-移动端H5做一个不限个数的通栏按钮 by FungLeo的详细内容...