先上效果图：

没有打字的功能，纯属是个界面图（一时无聊写的）

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>键盘ui </title>

    </head>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            font-family:"comic sans ms";

        }

        body{

            text-align: center;

        }

        button{

            width: 62px;

            height: 59px;

            background-color: white;

            font-size: 14px;

            text-align: center;

            border: 2px solid black;

            border-radius: 5px;

            margin: 2px;

            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

            cursor:pointer;

        }

        button:hover{

              box-shadow: 0px 4px 4px 4px rgba(79, 239, 239, 61),2px 4px 4px 0px rgba(0, 255, 255, 61);

              border: 1px solid black;

        }

        .f_div{

            position: relative;

            background-color:#cccccc;

            width: 1087px;

            height: 342px;

            margin: 100px 10%;

            border-radius:10px;

            display: flex;

        }

        #s_div{

            position: absolute;

            top: 10px;

        }

    </style>

    <body>

        <div class="f_div">

            <div id="s_div">

                <!-- 第一排 -->

                <button>~</button>

                <button>1</button>

                <button>2</button>

                <button>3</button>

                <button>4</button>

                <button>5</button>

                <button>6</button>

                <button>7</button>

                <button>8</button>

                <button>9</button>

                <button>0</button>

                <button>-</button>

                <button>+</button>

                <button style="width: 134px;">Delete</button>

                <!-- 第二排 -->

                <button style="width: 98px;">Tab</button>

                <button>Q</button>

                <button>W</button>

                <button>E</button>

                <button>R</button>

                <button>T</button>

                <button>Y</button>

                <button>U</button>

                <button>I</button>

                <button>O</button>

                <button>P</button>

                <button>[</button>

                <button>]</button>

                <button style="width:98px;">\</button>

                <!-- 第三排 -->

                <button style="width: 134px;">CapsLk</button>

                <button>A</button>

                <button>S</button>

                <button>D</button>

                <button>F</button>

                <button>G</button>

                <button>H</button>

                <button>J</button>

                <button>K</button>

                <button>L</button>

                <button>;</button>

                <button>'</button>

                <button style="width:134px;">Enter</button>

                <!-- 第四排 -->

                <button style="width: 170px;">Shift</button>

                <button>Z</button>

                <button>X</button>

                <button>C</button>

                <button>V</button>

                <button>B</button>

                <button>N</button>

                <button>M</button>

                <button>,</button>

                <button>.</button>

                <button>/</button>

                <button style="width:170px;">Shift</button>

                <!-- 第五排 -->

                <button style="width: 98px;">Ctrl</button>

                <button>Window</button>

                <button>Alt</button>

                <button style="width: 450px;">span</button>

                <button>Fn</button>

                <button>ray</button>

                <button style=" width: 103px;">Command</button>

                <button style="width: 98px;">Ctrl</button>

            </div>

        </div>

    </body>

</html>

代码简洁一眼就能看懂：

记录一下自己无聊的成果，后面如果给键盘添加了功能我就来更新一下子

更新：https://www.cnblogs.com/2979100039-qq-con/p/12679692.html

纯html加css的键盘UI效果图的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 纯HTML和CSS实现JD轮播图

    博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识.  ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...

  3. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  4. AJ学IOS（17）UI之纯代码自定义Cell实现新浪微博UI

    AJ分享,必须精品 先看效果图 编程思路 代码创建Cell的步骤 1> 创建自定义Cell,继承自UITableViewCell 2> 根据需求,确定控件,并定义属性 3> 用get ...

  5. 一个js加css加html完成的HTML

    效果图: 代码: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. 怎样用纯HTML和CSS更改默认的上传文件按钮样式

    如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...

  7. 纯jQuery-添加/修改/删除 标签，属性

    <h1>通过学习<精彩绝伦的jQuery>与W3C,大致了解JQuery的一些方法.</h1> PS:需要有一些前置条件,比如JQuery源代码,比如html就要有 ...

  8. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...

  9. 用css实现圆形波浪效果图

    在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以. 原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢 ...

随机推荐

  1. Python-Requests库的安装和调用

    #使用pip或者pip3安装requests库pip3 install requests #requests库:python #输入python进入命令行模式在cmd命令行中依次运行以下代码,或者直接 ...

  2. django使用户名和邮箱都能登录

    为了能够让邮箱也能登录,需要重新定义认证功能,需要把email添加成username用于认证 定义的class继承ModelBackend,使用Q方法并集 然后在settings.py里面添加 这样既 ...

  3. Django中使用CORS实现跨域请求

    跨域请求: ​    请求url包含协议.网址.端口,任何一种不同都是跨域请求. 1.安装cors模块 pip install django-cors-headers2.添加应用 INSTALLED_ ...

  4. 网络编程---socket模块

    内容中代码都是先写  server端, 再写 client端 1 TCP和UDP对比 TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效 ...

  5. vue列表中表单的验证

    先上效果图: 在点击确认的时候会验证带有验证的字段 嵌套逻辑: 表单 表格 表格项 表单项 表单项 表格项 表格 表单 代码部分: <!-- 注意此处的model,需要一个对象,而我们的数据是一 ...

  6. VsCode从零开始配置一个属于自己的Vue开发环境

    vscode vue VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code下载地址:点我去下载插件众多,功能齐全,我在平常开发过程中都是用的它,整理了些自认好用的插件, ...

  7. Python进阶学习之面向对象

    目录 面向对象 私有属性 面向对象   python也有面向对象的编程,它与C++中的类有点相似.它也只是运算符重载,继承. class Test: num=0 def __init__(self): ...

  8. 记一次修改mysql密码

    因为马大哈的原因,没有记录自己服务器mysql的密码,试来试去试不出来只好选择重置密码. 直接上命令: 首先 vim /etc/my.cnf 在my.cnf文件中,在[mysqld]的段中加上 ski ...

  9. Layui select下拉框改变之 change 监听事件（转）

    在layui中使用 jquery 触发select 的 change事件无效 使用layui.use监听select事件 <select lay-filter="demo" ...

  10. shell脚本基础-起始句的含义

    大部分的shell脚本第一行,要么是 #!/bin/bash 要么是 #!/bin/sh 其实第二种是第一种的升级版,增加了协议posix(#!/bin/sh = #!/bin/bash + posi ...