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 ...
随机推荐
- 通过脚本获取form表单的数值而不是submit
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如: <form action=" ...
- Mysql闭包表之关于国家区域的一个实践
在电商系统中,我们总是会遇到一些树形结构数据的存储需求.如地理区域.位置信息存储,地理信息按照层级划分,会分为很多层级,就拿中国的行政区域划分为例,简单的省-市-县-镇-村就要五个级别.如果系统涉及到 ...
- 网页中自适应的显示PDF
PDF格式呢,是一个高大的新式,如何在不同的浏览器中自适应显示,是一个值得研究的问题. 这里说明重点部分:获取浏览器宽高. IE中: document.body.clientWidth ==> ...
- 基于Axis1.4的webservice接口开发（接口调用）
基于Axis1.4的webservice接口开发(接口调用) 一.webservice接口代码参考上一篇博客: http://www.cnblogs.com/zhukunqiang/p/7125668 ...
- 用户可在Messenger内读书并与角色互动
畅销小说作家 James Patterson 与 Facebook 合作,为新书<The Chef>在 Messenger 推出互动体验版. 10 月 30 日下午消息,据<香港经济 ...
- 第一个c++泛型函数（即模板）
先定义如下: ns.h template <typename T> // 这个关键字typename, 明显多此一举 inline void PRINT_ELEMENTS(const T& ...
- kubernetes 一些基本的概念
k8s 原理 kubernetes API server 作为集群的核心,负责集群各功能之间的通信, 集群内的各个功能模块通过API Server将信息存入etcd,当需要获取和操作这些数据的时候 通 ...
- centos 安装 ffmpeg
使用yum方式安装ffmpeg: 先安装Nux Dextop仓库: Nux Dextop库依赖于EPEL库,所有要先安装EPEL库(需要管理员权限). 如果安装过则跳过. $ su root $ yu ...
- 《Python程序设计（第3版）》[美] 约翰·策勒（John Zelle） 第 2 章 答案
判断对错1．编写程序的好方法是立即键入一些代码,然后调试它,直到它工作.2．可以在不使用编程语言的情况下编写算法.3．程序在写入和调试后不再需要修改.4．Python 标识符必须以字母或下划线开头.5 ...
- 硬盘分区表知识—详解硬盘MBR
硬盘是现在计算机上最常用的存储器之一.我们都知道,计算机之所以神奇,是因为它具有高速分析处理数据的能力.而这些数据都以文件的形式存储在硬盘 里.不过,计算机可不像人那么聪明.在读取相应的文件时,你必须 ...