CSS开发技巧(一):button样式设置
button样式需要注意的有几点:
1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;
2、建议有一个padding,以免内部文本显得过于拥挤;
2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动;
3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。
4、获得焦点时的outline建议去掉,否则较为难看。
普通状态样式设置:
```
.btn{
min-width: 60px;
padding: 5px 8px;
background: #fff;
color: #4daff9;
border: 1px solid #4daff9;
}
```
交互状态(hover、focus)样式设置:
.btn:hover{
color: #fff;
background: #0a90f5;
}
.btn:focus{
color: #fff;
background: #0a90f5;
outline: none;
}
CSS开发技巧(一):button样式设置的更多相关文章
- css学习の第六弹—样式设置小技巧
一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...
- CSS开发技巧(三):图片点击缩放
前言 利用CSS实现图片的点击缩放是一个很值得研究的效果.在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度.然而图片限制了宽度,一些图片的细节便又无法看 ...
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- Web之CSS开发技巧: CSS 居中大全
<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...
- 提高你css技能的css开发技巧(转载)
一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...
- 认识CSS中高级技巧之用户界面样式
前端之HTML,CSS(九) CSS高级技巧 CSS用户界面样式 用户界面样式指更改用户操作样式,如更改用户的鼠标样式.表单轮廓等. 鼠标样式cursor cursor属性具有属性值有:default ...
- 提高你css技能的css开发技巧
好久没整理博客了 进来啰嗦两句 继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...
- jquery mobile radio,checkbox button 样式设置
<label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...
- Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...
随机推荐
- mysql服务器内存使用情况总结
活动链接(动态)使用的内存数量如下所示: per_connection_memory = read_buffer_size //memory for sequential table scans +r ...
- 【Mongodb】聚合查询 && 固定集合
概述 数据存储是为了可查询,统计.若数据只需存储,不需要查询,这种数据也没有多大价值 本篇介绍Mongodb 聚合查询(Aggregation) 固定集合(Capped Collections) 准备 ...
- java第十九天,Collections集合工具类的使用
Collections Java中集合都实现了Collection接口,那么针对集合一些特定的功能,有没有一个接口或类能够统一的集成一些集合必要的功能呢?当然能.它就是--Collections集合工 ...
- django->基本操作和新建项目常用配置
一.安装django pip install django==2.1.5 -U #安装django/升级最新版本 二.创建.启动django项目 django-admin startproject m ...
- java添加对象成功后想知道当前添加对象的id
我使用的是springboot Mybatis写的项目,结构如下 mapper.xml(以下2个属性必须要有,主键id 一般是自动生成的) mapper.java (注意新增的返回值不需要,一般情况 ...
- 自己总结 :并发队列ConcurrentLinkedQueue、阻塞队列AraayBlockingQueue、阻塞队列LinkedBlockingQueue 区别 和 使用场景总结
并发队列ConcurrentLinkedQueue.阻塞队列AraayBlockingQueue.阻塞队列LinkedBlockingQueue 区别 和 使用场景总结 分类: Java2013-0 ...
- day02,静态库和动态库
一.首先我们来看一下什么是静态库和动态库,在这之前我们来看一下编译成可执行文件的过程: 1.静态库(.a..lib):就是在使用的时候会把代码复制到文件中: 它的优点:独立,在链接后不需要静态库源文件 ...
- BeanShell计算支付价格
问题:需要获取支付价格,而支付价格是商品价格*折扣 解决:先将商品价格和折扣获取出来,然后使用BeanShell将两个值相乘,获得最后的支付价格 1.使用json提取器提取商品的价格 2.使用正则表达 ...
- 最新超详细VMware虚拟机安装完整教程
一.基础介绍 VMWare虚拟机软件是一个“虚拟PC”软件,它使你可以在一台机器上同时运行二个或更多Windows.DOS.LINUX系统.与“多启动”系统相比,VMWare采用了完全不同的概念.多启 ...
- 刚从一道题发现的一些东西,PHP笔记,关于extract和null 空字符串
队友发给我的一道extract变量的最基础的题目,他发现了一些问题,当传入shiyan=&flag=0时出flag,当传入shiyan=0&flag=0时不出flag,传入shiyan ...