纯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%呢 ...
随机推荐
- 一起了解 .Net Foundation 项目 No.14
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. .NET Core .NE ...
- 网络编程技术-----6、I/O复用实现并发服务器
网络编程技术-----6.I/O复用实现并发服务器 一.实验要求 服务器: 服务器等待接收客户的连接请求,一旦连接成功则显示客户地址,接着接收客户端的名称并显示:然后接收来自该客户的字符串,对 ...
- 基于springcloud搭建项目-公共篇(二)
上一篇已经写过如何搭建注册中心eureka,这一篇主要是搭建一些公共的api接口服务,并把实体类单独拿出来放到一个服务上引用,比较简单的 1.首先.创建一个实体类服务,这样就不用在每个服务里创建实体了 ...
- Asp.Net Core 中IdentityServer4 授权中心之自定义授权模式
一.前言 上一篇我分享了一篇关于 Asp.Net Core 中IdentityServer4 授权中心之应用实战 的文章,其中有不少博友给我提了问题,其中有一个博友问我的一个场景,我给他解答的还不够完 ...
- JetBrains 第二轮：再为免费全家桶续命三个月
昨天分享了如何通过参与JetBrains的解密任务来获取正版全家桶的兑换码.今天 JetBrains 一早继续在Twitter推出第二波任务: 下面,我们就继续来一起参与一下,为我们的正版JetBra ...
- opt目录
在linux环境测试时,会部署到/opt目录下,这是为何呢? 下面来详解Linux的/opt目录: /opt:用户级的程序目录 这里主要存放那些可选的程序. 比如,你想部署firefox测试版,那就装 ...
- （转）GNU风格ARM汇编语法指南（非常详细）5
原文地址:http://zqwt.012.blog.163.com/blog/static/120446842010111482417545/ 6.GNU汇编程序中的常数 <1> 十 ...
- Spring 全局异常拦截根据业务返回不同格式数据 自定义异常
1.全局异常拦截:针对所有异常进行拦截 可根据请求自定义返回格式 2.自定义异常类 处理不同业务的异常 接下来开始入手代码: 1).自定义异常类 @ControllerAdvice//添加注解 记得开 ...
- video.js 视频自动全屏播放
1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...
- springboot集成axis1.4
1.首先通过axis工具根据wsdl文件生成java代码和wsdd文件 set Axis_Lib=/Users/apple/configuration/axis-1_4/lib //lib文件目录se ...