纯html加css的键盘UI效果图
先上效果图：
没有打字的功能，纯属是个界面图（一时无聊写的）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>键盘ui </title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family:"comic sans ms";
}
body{
text-align: center;
}
button{
width: 62px;
height: 59px;
background-color: white;
font-size: 14px;
text-align: center;
border: 2px solid black;
border-radius: 5px;
margin: 2px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
cursor:pointer;
}
button:hover{
box-shadow: 0px 4px 4px 4px rgba(79, 239, 239, 61),2px 4px 4px 0px rgba(0, 255, 255, 61);
border: 1px solid black;
}
.f_div{
position: relative;
background-color:#cccccc;
width: 1087px;
height: 342px;
margin: 100px 10%;
border-radius:10px;
display: flex;
}
#s_div{
position: absolute;
top: 10px;
}
</style>
<body>
<div class="f_div">
<div id="s_div">
<!-- 第一排 -->
<button>~</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>-</button>
<button>+</button>
<button style="width: 134px;">Delete</button>
<!-- 第二排 -->
<button style="width: 98px;">Tab</button>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<button>U</button>
<button>I</button>
<button>O</button>
<button>P</button>
<button>[</button>
<button>]</button>
<button style="width:98px;">\</button>
<!-- 第三排 -->
<button style="width: 134px;">CapsLk</button>
<button>A</button>
<button>S</button>
<button>D</button>
<button>F</button>
<button>G</button>
<button>H</button>
<button>J</button>
<button>K</button>
<button>L</button>
<button>;</button>
<button>'</button>
<button style="width:134px;">Enter</button>
<!-- 第四排 -->
<button style="width: 170px;">Shift</button>
<button>Z</button>
<button>X</button>
<button>C</button>
<button>V</button>
<button>B</button>
<button>N</button>
<button>M</button>
<button>,</button>
<button>.</button>
<button>/</button>
<button style="width:170px;">Shift</button>
<!-- 第五排 -->
<button style="width: 98px;">Ctrl</button>
<button>Window</button>
<button>Alt</button>
<button style="width: 450px;">span</button>
<button>Fn</button>
<button>ray</button>
<button style=" width: 103px;">Command</button>
<button style="width: 98px;">Ctrl</button>
</div>
</div>
</body>
</html>
代码简洁一眼就能看懂：
记录一下自己无聊的成果，后面如果给键盘添加了功能我就来更新一下子
更新：https://www.cnblogs.com/2979100039-qq-con/p/12679692.html
纯html加css的键盘UI效果图的更多相关文章
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 纯HTML和CSS实现JD轮播图
博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识. ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- AJ学IOS（17）UI之纯代码自定义Cell实现新浪微博UI
AJ分享,必须精品 先看效果图 编程思路 代码创建Cell的步骤 1> 创建自定义Cell,继承自UITableViewCell 2> 根据需求,确定控件,并定义属性 3> 用get ...
- 一个js加css加html完成的HTML
效果图: 代码: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 怎样用纯HTML和CSS更改默认的上传文件按钮样式
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...
- 纯jQuery-添加/修改/删除 标签，属性
<h1>通过学习<精彩绝伦的jQuery>与W3C,大致了解JQuery的一些方法.</h1> PS:需要有一些前置条件,比如JQuery源代码,比如html就要有 ...
- 纯代码实现CSS圆角
我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角 #chaomao{ border-radius:2px 2 ...
- 用css实现圆形波浪效果图
在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以. 原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢 ...
随机推荐
- 关于css 的垂直居中
对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~ 一.让大小不固定的元素垂直居中 因为:表格的单元格的特别属性:垂直居中等: `div.parent { di ...
- 2020年，如何成为一名 iOS 开发高手！
2020年对应程序员来说,是一个多灾的年份,很多公司都进行了不同比例的优化和裁员.等疫情得到控制后,将会是找工作的高峰期,从去年的面试经历来看,现在只会单纯写业务代码的人找工作特别难,很多大厂的面试官 ...
- 盘点Linux运维常用工具(一)-web篇之httpd
#前言:想把自己学的各种服务进行分类归档起来,于是就写了盘点Linux运维常用工具,Linux方面使用到的web应用服务有httpd(apache).nginx.tomcat.lighttpd,先了解 ...
- 对两个有序数组重新去重合并排序js实现
这里主要是要利用两个数组有序这个条件,所以只需两个指针分别指向两个数组,当其中一个小于另外一个就移动该指针,反之则移动另外一个指针,如果相等则均向后移动. 结束条件是,当任意一个数组的指针移到末尾则跳 ...
- CSRF攻击原理及预防手段
CSRF全程 Cross Site Request Forgery, 跨站域请求伪造.这种攻击方式相对于XSS,SQL注入等攻击方式比较晚被发现,今天就来讲解下这种攻击方式以及避免方式. 攻击过程 ...
- 学妹问的Spring Bean常用配置，我用最通俗易懂的讲解让她学会了
你好呀,我是沉默王二,一枚有趣的程序员,写的文章一直充满灵气,力求清新脱俗.昨天跑去王府井的小米店订购了一台小米 10,说是一周之内能到货,但我还是忍不住今天就想见到她.见我茶不思饭不想的,老婆就劝我 ...
- Java多线程并发03——在Java中线程是如何调度的
在前两篇文章中,我们已经了解了关于线程的创建与常用方法等相关知识.接下来就来了解下,当你运行线程时,线程是如何调度的.关注我的公众号「Java面典」了解更多 Java 相关知识点. 多任务系统往往需要 ...
- （转）ARM协处理器主要用途 及其 指令CDP LDC STC MCR MRC介绍
原文地址:http://zqwt.012.blog.163.com/blog/static/120446842010111610612200/ ARM 微处理器可支持多达 16 个协处理器,用于各种协 ...
- Ubuntu 18 安装 cuda 10
1.把预先下好的cuda放到某个目录,如Download. 2.Crtl + Alt + F3 进入tty,使用tty登录. 关闭用户图形界面,sudo systemctl set-default m ...
- asp.net core 3.1 引用的元包dll版本兼容性问题解决方案
自从.netcore 3.1出来后,大家都想立马升级到最新版本.我也是如此,微软也对.netcore 3.1的官方组件不断升级,几乎每隔几天就会有部分元包可以升级.每次打开Nuget包管理器,“更新” ...