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 提供了更加整洁的方式来创建打 ...
随机推荐
- docker go代码编译上传
一.找需要编译的项目 env GOOS=linux GOARCH=amd64 go build . //编译代码 二.编辑Dockerfile文件, Dcokerfile文件配置: https://w ...
- C语言实现链式队列
链式队列,简称"链队列",即使用链表实现的队列存储结构. 链式队列的实现思想同顺序队列类似,只需创建两个指针(命名为 top 和 rear)分别指向链表中队列的队头元素和队尾元素, ...
- ASP.NET Core 3.1+MySQL 部署到docker上面使用docker-compose+DockerFile
一.新建DockerFile文件 选择Linux版本 FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base WORKDIR ...
- hadoop(九)启动|关闭集群(完全分布式六)|11
前置章节:hadoop集群namenode启动ssh免密登录(hadoop完全分布式五)|11 集群启动 配置workers(3.x之前是slaves), 删除localhost,添加102/103/ ...
- 《深入理解 Java 虚拟机》读书笔记:垃圾收集器与内存分配策略
正文 垃圾收集器关注的是 Java 堆和方法区,因为这部分内存的分配和回收是动态的.只有在程序处于运行期间时才能知道会创建哪些对象,也才能知道需要多少内存. 虚拟机栈和本地方法栈则不需要过多考虑回收的 ...
- 运行jmeter.bat时 提示 not able to find java executable or version
安装过好几次,这是第一次遇到运行jmeter.bat时 提示 not able to find java executable or version Please check your Java in ...
- 最长公共子窜和最长公共子序列(LCS)
他们都是用dp做;复杂度都是O(N方) 有一个大佬的博客写的很详细,是关于最长公共子序列的:https://blog.csdn.net/hrn1216/article/details/51534607 ...
- 最长回文子窜O(N)
字符窜同构的性质:同构字符窜拥有最小和最大的表示方法: 最长回文子窜: 1.首先暴力法:(n三方) 枚举每个起点和终点,然后单向扫描判断是不是回文子窜: 2.中心扩散法,(N方) 枚举每个中点,向外扩 ...
- 通过神秘代码登录自己的QQ
通过神秘代码登录自己的QQ 如图:是怎么做成的呢? 其实很明显,这个是QQ号码的16进制 所以网上搜索进制转换打开一个网页 输入自己的QQ号码,得到16进制的QQ号码 在QQ页面账号处先添加0x然后复 ...
- stand up meeting 12-4
今日进步: 1.国庆答题界面和结果界面的连接完成,并能显示GetRankData API返回结果和错误题目的单词信息. 2.天赋: 完成了整个 单词挑战需要碰到的"Storage" ...