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 ...
随机推荐
- sql2008评估板过期
1.查看sql2008到期时间,打开数据库---帮助---关于,具体可查看试用期还有多长时间 2.重新激活 : ① 打开注册表后,找到并把 HKEY_LOCAL_MACHINE\SOFTWARE\Mi ...
- fontawesome与amazeUI
fontawesome是很不错的东西呢~~~~ amazeUI也是很不错的东西呢~~~~~ 最近一年里,比较偏爱这两个家伙? 什么?为什么bootstrap?有什么区别? 这个我还真说不太清楚. 用一 ...
- tensorflow训练自己的数据集实现CNN图像分类1
利用卷积神经网络训练图像数据分为以下几个步骤 读取图片文件 产生用于训练的批次 定义训练的模型(包括初始化参数,卷积.池化层等参数.网络) 训练 1 读取图片文件 def get_files(file ...
- 英语笔记-some words about description of girl
what did you learn from your last class?20:09:07abc360.Draven/PHH-HA04 ☠ 2018/4/9 20:09:07 poop20:1 ...
- Zookeeper学习记录（二）：使用以及配置
zookeeper已经介绍了它的原理设计以及实现方式,我们接下来介绍zookeeper的使用方法以及简单配置. 下载 获取Zookeeper的发布包,从Apache下载映像中下载一个最新稳定版本. 单 ...
- 一起来全面解析5G网络领域最关键的十大技术
提到5G,很多人的第一印象就是它的网络速度快.延时性低.带宽大,没错,这就是5G时代的特点!5G作为第五代移动通信网络,其峰值理论传输速度可达每秒数十Gb,这比4G网络的传输速度快数百倍,整部超高画质 ...
- C++结构体字节对齐
转自:http://www.cnblogs.com/JensenCat/p/4770171.html 这里是头文件结构的定义: 一个非字节对齐结构体_tagTest2 一个字节对齐_tagTest3 ...
- ELK学习笔记之ELK分析syslog日志
0x00 配置FIlebeat搜集syslog并发送至 #配置 mv /etc/filebeat/filebeat.yml /etc/filebeat/filebeat.yml.bak vim /et ...
- P1661 扩散
P1661 扩散 二分+最小生成树(kruskal使用并查集) 不清楚的题意导致我被坑了qwq,其实间接联通也是允许的.所以可以使用并查集+最小生成树维护 每次二分答案,然后跑一遍最小生成树判断是否联 ...
- Android 实践项目开发 总结
Android 实践项目开发 总结 课程:移动平台应用开发实践 班级:201592 姓名:杨凤 学号:20159213 成绩:___________ 指导老师:娄嘉鹏 ...