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>&amp;</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>&lt;</span><span>,</span></li>

                <li><span>&gt;</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 ...

随机推荐

APPIUM Android 定位方式
原文地址https://www.cnblogs.com/sundalian/p/5629500.html 1.定位元素应用元素 1.1通过id定位元素 Android里面定位的id一般为resrouc ...
jmeter处理带表单的接口请求
如何用jmeter处理带选项的表单接口请求下面是用到了F12 抓包的处理方法下图是直接手动在页面上请求的结果下面就是采用F12抓包抓到url 和FormData 分别把上面获取的url和Form ...
type Props={};
Components Learn how to type React class components and stateless functional components with Flow Se ...
Qt事件过滤器和事件的发送
事件过滤器 /* *事件过滤器不是类,仅仅是QObject类的两个函数:installEventFilter() 和 eventFilter() . *下面讲个例子: * 监视过滤 textEdit的 ...
用python实现一个简单的socket网络聊天通讯（Linux --py2.7平台与windows--py3.6平台）
windows --> windows 写法均在py3.6 客户端写法 import socket client = socket.socket() client.connect(('192 ...
python 跳过可迭代对象的开始部分
想遍历一个可迭代对象,但是它开始的某些元素你并不感兴趣,想跳过它们 itertools 模块中有一些函数可以完成这个任务.首先介绍的是itertools.dropwhile() 函数.使用时,你给它传 ...
Hive配置文件中配置项的含义详解（收藏版）
这里面列出了hive几乎所有的配置项,下面问题只是说出了几种配置项目的作用.更多内容,可以查看内容问题导读: 1.hive输出格式的配置项是哪个? 2.hive被各种语言调用如何配置? 3.hive ...
python中的对象（三）
一.python对象 python使用对象模型来存储数据.构造任何类型的值都是一个对象. 所有python对象都拥有三个特性:身份.类型.值身份:每个对象都有一个唯一的身份标识自己,任何对象的身份可 ...
Mocha describe 生命周期
1 describe('test', function() { 2 // 在本测试块的所有测试用例之前执行且仅执行一次 3 before(function() { 4 5 }); 6 // 在本测试块 ...
Linux基础命令---mv
mv 将文件或者目录移动到另一个地方,或者重命名. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 mv [选项 ...

css 键盘

css 键盘的更多相关文章

随机推荐

热门专题