如何写好css系列之button
2018-06-27 09:10:00来源:未知 阅读 ()
现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要,因为基础有boostrap,组件库有:easyui,elementui,iview,ionic等等。但我个人练习自己如何写好一个css框架,对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。
一、与美术交流获取得这些信息
1. 按钮状态:普通状态、鼠标悬停、选中状态、禁用状态
2. 按钮形状:常用形状(有背景),简单形状(无背景),图标按钮、多文字按钮、fullwidth按钮
3. 其他:按钮可以分组、a标签与button标签表现要一致
二、已实现的示例效果展示
三、实现具体细节阐述
本次使用sass作用css的预编译器,代码结构如下:
说明:
1. _button.scss:实现按钮的基本形状和状态;
2. _button.plain.scss:实现简单迎按钮的形状和行为,其中还包含了去掉边框的样式
3. _button.onlyIcon.scss:图标按钮的实现,在这里申明:图标都是使用的font-awesome。
4. _button.link.scss:对按钮扩充为a标签也能支持
5. _button.group.scss:按钮分组
6. _variable.scss:相关变量定义文件
7. main.scss:编译文件入口。其他文件夹是表明后期会实现的模块。
3.1. button的实现代码解析
代码分为两部分,一部分为html结构,一部分为css代码
1. html结构
<button class="f-btn f-btn-primary-norm multi plain noborder"> <span class="fa fa-address-book"></span><span>有个图标</span> </button>
2. sass代码
.f-btn{ border-radius: $radius-width-base; font-family: $font-family; cursor: pointer; border: 1px solid transparent; outline: 0; padding: $btn-padding-norm; font-size: $font-size; line-height: $line-height; vertical-align: middle; text-align: center; transition: background-color .3s; width: 58px; white-space: nowrap; @each $class, $bgcolor, $color in $colors { &.f-btn-#{$class}{ background-color: $bgcolor; color: $color; &:hover, &:active{ background-color: darken($bgcolor, 6%); } &.disabled, &:disabled{ @include opacity(.65); } } } > .fa{ margin-right: 4px; } &.max{ width: 100%; display: block; + .max{ margin-top: 20px; } } &.multi{ width: auto; padding: $btn-padding-multi; } }
从html结构可以看出按钮可以包含两部分(两个span),一个图标,一个文字。首先利用button来修饰按钮的整体形状和状态等信息,然后再将图标和文字span进一步修改即可。
从sass代码中可以看出,我循环了一个colors数组,这里就是为了创建多种不同状态的按钮,如:正常、警告、提示等,因为他们的背景或字体颜色是有区别的。
3.2. 其他
本人在阐述此篇博客的时候,对css前端框架整体理解还没达到高级水平。所以在文章逻辑结构和语言的时候存在诸多问题,希望各位朋友、前辈指教。源码下载
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash