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 ...
随机推荐
- unity3d-小案例之角色简单漫游
准备资源 我这里从网上下载一个角色模型,里面有一组动画.有站立.奔跑.杀怪等 我们来实现角色的前后左后移动,即键盘上的WSDA键,这里因为没有行走的动画.索性就用奔跑代替了!! 暂时先不计较代码冗余的 ...
- 【安装vsftpd】安装vsftpd工具步骤
1 安装vsftpd组件 [root@bogon ~]# yum -y install vsftpd 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. 2 添 ...
- PHP查询MySQL大量数据的内存占用分析
这篇文章主要是从原理, 手册和源码分析在PHP中查询MySQL返回大量结果时, 内存占用的问题, 同时对使用MySQL C API也有涉及. 昨天, 有同事在PHP讨论群里提到, 他做的一个项目由于M ...
- nginx之全局设置,location,虚拟主机,日志管理
nginx之全局设置,location,虚拟主机,日志管理 worker_processes 1;//子进程,cpu数*核数 ****************全局设置************** ** ...
- 20165207 Exp4 恶意代码分析
目录 1.实验内容 1.1.系统运行监控 1.1.1.使用命令行创建计划任务 1.1.2.使用命令行借助批处理文件创建计划任务 1.1.3.分析netstat计划任务的最终结果 1.1.4.安装配置s ...
- ajax请求头设置 | header 传token
$('.w-entry-btn').on('tap',function(){ var urlAddress = '/api/address'; var valToken = JSON.parse(lo ...
- 斯坦福大学机器学习，EM算法求解高斯混合模型
斯坦福大学机器学习,EM算法求解高斯混合模型.一种高斯混合模型算法的改进方法---将聚类算法与传统高斯混合模型结合起来的建模方法, 并同时提出的运用距离加权的矢量量化方法获取初始值,并采用衡量相似度的 ...
- JavaScript甜点（1）
甜点1:什么是脚本语言? 脚本语言是由传统编程语言简化而来的,它与传统的编程语言既有很多相似之处,又有很多的不同之处.脚本语言的最显著的特点是:首先它不需要编译成二进制,以文本的形式存在:其次就是脚本 ...
- Linux 系统版本查询
显示Linux版本信息 输入"cat /proc/version",说明正在运行的内核版本. 输入"cat /etc/issue", 显示的是发行版本信息. 输 ...
- Android实践项目汇报总结（下）
微博客户端的设计与实现(下) 第四章 系统详细功能实现 本应用实现了如下主要模块:程序启动模块.登录授权模块.主界面显示模块撰写发表微博模块.用户发布信息模块.软件设置模块. 4.1程序启动模块实现 ...