css 键盘
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.board {
margin: 0 auto;
padding: 0 auto;
width: 600px;
height: 450px;
margin-top: 50px;
background: rgb(210, 210, 210);
border-radius: 20px;
position: relative;
box-shadow: 0px 5px 6px rgb(160, 160, 160);
background: -webkit-linear-gradient(60deg, rgba(250, 250, 250, 1) 25%, rgba(210, 210, 210, 1));
} .board:before {
content: '';
display: block;
width: 780px;
height: 20px;
background: rgb(210, 210, 210);
border-radius: 0px 0px 3px 3px;
border-top-left-radius: 390px 18px;
border-top-right-radius: 390px 18px;
position: absolute;
top: -20px;
left: -90px;
border-bottom: 2px solid rgb(0, 0, 0);
background: -webkit-linear-gradient(top, rgb(210, 210, 210) 50%, rgb(255, 255, 255));
} .blackbar {
width: 450px;
height: 18px;
position: absolute;
left: 75px;
border-radius: 2px;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
background: -webkit-linear-gradient(top, rgb(30, 30, 30), rgb(60, 60, 60) 35%, rgb(100, 100, 100) 50%, rgb(30, 30, 30) 65%);
background: -linear-gradient(top, rgb(30, 30, 30), rgb(60, 60, 60) 35%, rgb(100, 100, 100) 50%, rgb(30, 30, 30) 65%);
} .keyboard {
position: absolute;
width: 530px;
height: 216px;
left: 35px;
top: 35px;
border: 1px solid rgb(180, 180, 180);
border-radius: 8px;
background: rgba(250, 250, 250, 1);
box-shadow: 2px 0px 2px rgb(180, 180, 180) inset,
0px 3px 3px rgb(180, 180, 180) inset,
-5px -0px 1px rgb(255, 255, 255) inset,
0px -3px 3px rgb(180, 180, 180) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} ul,
li {
list-style: none;
margin: 0 auto;
padding: 0 auto;
display: block;
font-family: "Vrinda";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} ul {
width: 530px;
margin-top: 8px;
padding-left: 8px;
} li {
width: 29px;
height: 29px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
background-color: rgb(30, 30, 30);
color: rgb(200, 200, 200);
text-align: center;
line-height: 28px;
font-size: 12px;
border-radius: 4px;
border: 1px solid rgb(70, 70, 70);
box-shadow: 1px 0px 0px rgb(0, 0, 0),
0px 1px 0px rgb(0, 0, 0),
-1px 0px 0px rgb(0, 0, 0),
0px -1px 0px rgb(0, 0, 0);
} li:nth-child(-n+14):nth-child(n+1) {
width: 30px;
height: 15px;
} li:nth-child(-n+27):nth-child(n+16) {
/*box-sizing: border-box;
padding-top: 4px;*/
} li:nth-child(-n+26):nth-child(n+15) span,
li:nth-child(27) span,
li:nth-child(40) span,
li:nth-child(41) span,
li:nth-child(42) span,
li:nth-child(53) span,
li:nth-child(54) span,
li:nth-child(-n+66):nth-child(n+64) span {
display: block;
margin-top: 5px;
line-height: 0.5;
} li:nth-child(28),
li:nth-child(29) {
width: 45px;
} li:nth-child(43),
li:nth-child(55) {
width: 55px;
} li:nth-child(56),
li:nth-child(67) {
width: 73px;
} li:nth-child(-n+74):nth-child(n+68) {
height: 33px;
} li:nth-child(72) {
width: 173px;
} li:nth-child(71),
li:nth-child(73) {
width: 37px;
} li:nth-child(75),
li:nth-child(77),
li:nth-child(78) {
margin-top: 18px;
height: 14px;
} li:nth-child(76) {
height: 13px;
margin-top: 19px;
} li:nth-child(78) {
position: absolute;
bottom: 22px;
right: 38px;
} .touch {
position: absolute;
width: 200px;
height: 150px;
border: 2px solid rgb(190, 190, 190);
bottom: 23px;
left: 200px;
border-radius: 8px;
}
</style>
</head> <body>
<div class="board">
<div class="blackbar"> </div>
<div class="keyboard">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li><span>~</span><span>`</span></li>
<li><span>!</span><span>1</span></li>
<li><span>@</span><span>2</span></li>
<li><span>#</span><span>3</span></li>
<li><span>$</span><span>4</span></li>
<li><span>%</span><span>5</span></li>
<li><span>^</span><span>6</span></li>
<li><span>&</span><span>7</span></li>
<li><span>*</span><span>8</span></li>
<li><span>(</span><span>9</span></li>
<li><span>)</span><span>0</span></li>
<li><span>—</span><span>-</span></li>
<li><span>+</span><span>=</span></li>
<li></li>
<li></li>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li><span>{</span><span>[</span></li>
<li><span>}</span><span>]</span></li>
<li><span>|</span><span>\</span></li>
<li></li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li><span>:</span><span>;</span></li>
<li><span>"</span><span>'</span></li>
<li></li>
<li></li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li><span><</span><span>,</span></li>
<li><span>></span><span>.</span></li>
<li><span>?</span><span>/</span></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>By Pure CSS.To Be Continued.</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="touch"> </div>
</div>
</body> </html>
css 键盘的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...
- 纯html加css的键盘UI效果图
先上效果图: 没有打字的功能,纯属是个界面图(一时无聊写的) 代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
- 从零开始制作【立体键盘】，画UI免写CSS，【盲打练习】的交互逻辑只用了10来行表达式！
手把手教你从空白页面开始通过拖拉拽可视化的方式制作[立体键盘]的静态页面,不用手写一行CSS代码,全程只用10来行表达式就完成了[盲打练习]的交互逻辑. 整个过程在众触应用平台进行,快速直观. 最终U ...
- 原生js和css写虚拟键盘
代码来源忘记是哪个大神的了,抱歉抱歉 放上源码: <!-- 虚拟键盘 --> <!DOCTYPE html> <html> <head> <met ...
- CSS笔记
初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- HTML＆CSS日常知识点总结
HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外 ...
- Css中的两个重要概念：块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
随机推荐
- Javascript-逻辑运算符非（！）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ruby 对多语言的支持
这是一篇翻译文章,原文链接 http://blog.grayproductions.net/articles/understanding_m17n.原文是一个系列,翻译过来整合成了一篇文章,对文章内容 ...
- uva11107 后缀数组
题意给了n个串 然后计算 这些串中的子串在大于1/2的串中出现 求出这个串的最长长度. 将这些串用一个每出现的不同的字符拼起来 ,然后二分找lcp #include <iostream> ...
- LINUX环境变量（一）
Linux 的变量可分为两类:环境变量和本地变量 环境变量,或者称为全局变量,存在与所有的shell 中,在你登陆系统的时候就已经有了相应的系统定义的环境变量了.Linux 的环境变量具有继承性,即子 ...
- python六剑客：map()、lambda()、filter()、reduce()、推导类表、切片
一:map():映射 map()有两个参数,一个函数,一个序列,序列中每一个元素都会做为参数传给前边的函数,然后生成新的列表, 第二个参数必须用一个序列:元祖,列表,字符串 >>> ...
- php ci 报错 Object not found! The requested URL was not found on this server. If you entered the URL manually please check
Object not found! The requested URL was not found on this server. The link on the referring page see ...
- Java lambda 表达式
其实是试验一下markdown... 原: 只有一个抽象方法的接口称为函数式接口(functional interface). 当需要实现了这种接口的类的对象的时候,就可以提供一个lambda表达式. ...
- Nginx服务器之负载均衡策略（6种）
一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独一个服务器压力过大,将来自用户的请求转发给不同的服务器.详情请查看我的另一篇博客. 二.Ng ...
- 架构和性能优化的核心原则（康神sf讲座学习笔记）
其实架构性能优化的核心就是分,分为分离.分层.分布. 分离动静分离静态资源.动态页面的分离 比如,一个页面有很多静态图片,静态的图片.动态数据.静态CSS.js,图片一般用cdn,但静态资源在使用域名 ...
- payload
payload就是协议报文中的有效载荷所占报文的百分比,用报文中去除协议的长度/报文总长度,协议设计的时候需要考虑到有效载荷所占的比重,避免出现payload很小的情况,比如TCP在设计的时候,就考虑 ...