<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css画电脑键盘</title>

<style type="text/css">

h2{font-size:24px; position:relative; top:15px; left:100px;}

body{ background:#f5f6f7; font-size:12px;}

#jianpan{ width:1100px; height:360px; border:1px solid #999; margin:100px auto; background:#fff; border-radius: 20px; border:none;

box-shadow: rgba(0,0,0,0.3) 0 1px 5px; position:relative;}

.anjian{ width:40px; height:40px;border:none; box-shadow: rgba(0,0,0,0.3) 0 1px 5px; position:absolute;border-radius:4px;}

.lan_1{top:47px; height:28px;}

.esc{left:20px;}

.f1{left:116px;}

.f2{left:164px;}

.f3{left:212px;}

.f4{left:260px;}

.f5{left:328px;}

.f6{left:384px;}

.f7{left:432px;}

.f8{left:480px;}

.f9{left:548px;}

.f10{left:596px;}

.f11{left:644px;}

.f12{left:692px;}

.lan_2{top:85px}

.a_1{left:20px;}

.a_2{left:68px;}

.a_3{left:116px;}

.a_4{left:164px;}

.a_5{left:212px;}

.a_6{left:260px;}

.a_7{left:308px;}

.a_8{left:356px;}

.a_9{left:404px;}

.a_10{left:452px;}

.a_11{left:500px;}

.a_12{left:548px;}

.a_13{left:596px;}

.a_14{left:644px; width:88px;}

.prt,.insert, .delete, .l_left{left:747px;}

.scroll, .home, .end, .l_up, .l_down{left:796px;}

.pause, .page_up, .page_down, .l_right{left:844px;}

.lan_3{ top:130px;}

.tap{left:20px; width:70px;}

.q{left:98px;}

.w{left:146px;}

.e{left:194px;}

.r{left:242px;}

.t{left:290px;}

.y{left:338px;}

.u{left:386px;}

.i{left:434px;}

.o{left:482px;}

.p{left:530px;}

.p1{left:578px;}

.p2{left:626px;}

.p3{left:674px; width:58px;}

.lan_4{ top:175px;}

.caps{left:20px; width:80px;}

.a{left:108px;}

.s{left:156px;}

.d{left:204px;}

.f{left:252px;}

.g{left:300px;}

.h{left:348px;}

.j{left:396px;}

.k{left:444px;}

.l{left:492px;}

.b_1{left:540px;}

.b_2{left:588px;}

.b_3{left:636px; width:96px;}

.lan_5{ top:220px;}

.shift{left:20px; width:107px;}

.z{left:135px;}

.x{left:183px;}

.c{left:231px;}

.v{left:279px;}

.b{left:327px;}

.n{left:375px;}

.m{left:423px;}

.m_1{left:471px;}

.m_2{left:519px;}

.m_3{left:569px;}

.m_4{left:615px; width:117px;}

.lan_6{ top:265px;}

.ctrl, .ctrl_1{ width:65px;}

.windows, .windows_1{ width:55px;}

.alt, .alt_1, .right_on{ width:50px;}

.ctrl{ left:20px;}

.windows{ left:93px;}

.alt{ left:156px;}

.space{left:214px; width:270px;}

.alt_1{left:492px;}

.windows_1{ left:550px;}

.right_on{ left:613px;}

.ctrl_1{ left:671px;}

.ctrl_1{ width:61px;}

span.first{ position:absolute; top:2px; left:5px; line-height:12px;}

span.second{ position:absolute; top:15px; text-align:center; width:40px;}

span.third{ position:absolute; top:10px; left:5px; width:40px; line-height:12px;}

span.fourth{ position:absolute; top:23px; left:5px; width:40px; line-height:12px;}

span.fifth{ position:absolute; top:40px; left:5px; width:40px; line-height:12px;}





.num_lock, .seven, .four, .one, .zone{ left:899px;}

.a_15, .eight, .five, .two{ left:947px;}

.a_16, .nine, .six, .three, .del{ left:995px;}

.a_17, .add, .s_enter{ left:1043px;}

.zone{ width:88px;}

.add, .s_enter{ height:85px;}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div id="jianpan">

  <div class="esc anjian lan_1"><span class="first">Esc</span></div>

  <div class="f1 anjian lan_1"><span class="first">F1</span></div>

  <div class="f2 anjian lan_1"><span class="first">F2</span></div>

  <div class="f3 anjian lan_1"><span class="first">F3</span></div>

  <div class="f4 anjian lan_1"><span class="first">F4</span></div>

  <div class="f5 anjian lan_1"><span class="first">F5</span></div>

  <div class="f6 anjian lan_1"><span class="first">F6</span></div>

  <div class="f7 anjian lan_1"><span class="first">F7</span></div>

  <div class="f8 anjian lan_1"><span class="first">F8</span></div>

  <div class="f9 anjian lan_1"><span class="first">F9</span></div>

  <div class="f10 anjian lan_1"><span class="first">F10</span></div>

  <div class="f11 anjian lan_1"><span class="first">F11</span></div>

  <div class="f12 anjian lan_1"><span class="first">F12</span></div>

  <div class="prt anjian lan_1"><span class="first">PrtSc SysRq</span></div>

  <div class="scroll anjian lan_1"><span class="first">Scroll Lock</span></div>

  <div class="pause anjian lan_1"><span class="first">Pause Break</span></div>

  

  <div class="a_1 anjian lan_2"><span class="first">~</span><span class="fourth">`</span></div>

  <div class="a_2 anjian lan_2"><span class="first">!</span><span class="fourth">1</span></div>

  <div class="a_3 anjian lan_2"><span class="first">@</span><span class="fourth">2</span></div>

  <div class="a_4 anjian lan_2"><span class="first">#</span><span class="fourth">3</span></div>

  <div class="a_5 anjian lan_2"><span class="first">$</span><span class="fourth">4</span></div>

  <div class="a_6 anjian lan_2"><span class="first">%</span><span class="fourth">5</span></div>

  <div class="a_7 anjian lan_2"><span class="first">^</span><span class="fourth">6</span></div>

  <div class="a_8 anjian lan_2"><span class="first">& </span><span class="fourth">7</span></div>

  <div class="a_9 anjian lan_2"><span class="first">*</span><span class="fourth">8</span></div>

  <div class="a_10 anjian lan_2"><span class="first">(</span><span class="fourth">9</span></div>

  <div class="a_11 anjian lan_2"><span class="first">)</span><span class="fourth">0</span></div>

  <div class="a_12 anjian lan_2"><span class="first">-</span><span class="fourth">-</span></div>

  <div class="a_13 anjian lan_2"><span class="first">+</span><span class="fourth">=</span></div>

  <div class="a_14 anjian lan_2"><span class="first">←Backspace</span></div>

  <div class="insert anjian lan_2"><span class="second">Insert</span></div>

  <div class="home anjian lan_2"><span class="second">Home</span></div>

  <div class="page_up anjian lan_2"><span class="third">Page Up</span></div>

  <div class="num_lock anjian lan_2"><span class="third">Num Lock</span></div>

  <div class="a_15 anjian lan_2"><span class="third">/</span></div>

  <div class="a_16 anjian lan_2"><span class="third">*</span></div>

  <div class="a_17 anjian lan_2"><span class="third">-</span></div>

  

  <div class="tap anjian lan_3"><span class="first">Tap</span></div>

  <div class="q anjian lan_3"><span class="first">Q</span></div>

  <div class="w anjian lan_3"><span class="first">W</span></div>

  <div class="e anjian lan_3"><span class="first">E</span></div>

  <div class="r anjian lan_3"><span class="first">R</span></div>

  <div class="t anjian lan_3"><span class="first">T</span></div>

  <div class="y anjian lan_3"><span class="first">Y</span></div>

  <div class="u anjian lan_3"><span class="first">U</span></div>

  <div class="i anjian lan_3"><span class="first">I</span></div>

  <div class="o anjian lan_3"><span class="first">O</span></div>

  <div class="p anjian lan_3"><span class="first">P</span></div>

  <div class="p1 anjian lan_3"><span class="first">{</span></div>

  <div class="p2 anjian lan_3"><span class="first">}</span></div>

  <div class="p3 anjian lan_3"><span class="first">|</span><span class="fourth">\</span></div>

  <div class="delete anjian lan_3"><span class="second">Delete</span></div>

  <div class="end anjian lan_3"><span class="second">End</span></div>

  <div class="page_down anjian lan_3"><span class="third">Page Down</span></div>

  <div class="seven anjian lan_3"><span class="third">7</span><span class="fourth">Home</span></div>

  <div class="eight anjian lan_3"><span class="third">8</span><span class="fourth">↑</span></div>

  <div class="nine anjian lan_3"><span class="third">9</span><span class="fourth">PgUp</span></div>

  <div class="add anjian lan_3"><span class="fifth">+</span></div>

  

  <div class="caps anjian lan_4"><span class="first">Caps Lock</span></div>

  <div class="a anjian lan_4"><span class="first">A</span></div>

  <div class="s anjian lan_4"><span class="first">S</span></div>

  <div class="d anjian lan_4"><span class="first">D</span></div>

  <div class="f anjian lan_4"><span class="first">F</span></div>

  <div class="g anjian lan_4"><span class="first">G</span></div>

  <div class="h anjian lan_4"><span class="first">H</span></div>

  <div class="j anjian lan_4"><span class="first">J</span></div>

  <div class="k anjian lan_4"><span class="first">K</span></div>

  <div class="l anjian lan_4"><span class="first">L</span></div>

  <div class="b_1 anjian lan_4"><span class="first">:</span></div>

  <div class="b_2 anjian lan_4"><span class="first">"</span></div>

  <div class="b_3 anjian lan_4"><span class="first">Enter</span></div>

  <div class="four anjian lan_4"><span class="third">4</span><span class="fourth">←</span></div>

  <div class="five anjian lan_4"><span class="third">5</span></div>

  <div class="six anjian lan_4"><span class="third">6</span><span class="fourth">→</span></div>

  

  <div class="shift anjian lan_5"><span class="first">Shift</span></div>

  <div class="z anjian lan_5"><span class="first">Z</span></div>

  <div class="x anjian lan_5"><span class="first">X</span></div>

  <div class="c anjian lan_5"><span class="first">C</span></div>

  <div class="v anjian lan_5"><span class="first">V</span></div>

  <div class="b anjian lan_5"><span class="first">B</span></div>

  <div class="n anjian lan_5"><span class="first">N</span></div>

  <div class="m anjian lan_5"><span class="first">M</span></div>

  <div class="m_1 anjian lan_5"><span class="first"><</span></div>

  <div class="m_2 anjian lan_5"><span class="first">></span></div>

  <div class="m_3 anjian lan_5"><span class="first">?</span></div>

  <div class="m_4 anjian lan_5"><span class="first">Shift</span></div>

  <div class="l_up anjian lan_5"><span class="second">↑</span></div>

  <div class="one anjian lan_5"><span class="third">1</span><span class="fourth">End</span></div>

  <div class="two anjian lan_5"><span class="third">2</span><span class="fourth">↓</span></div>

  <div class="three anjian lan_5"><span class="third">3</span><span class="fourth">PgDn</span></div>

  <div class="s_enter anjian lan_5"><span class="fifth">Enter</span></div>

  

  <div class="ctrl anjian lan_6"><span class="first">Ctrl</span></div>

  <div class="windows anjian lan_6"><span class="first">Win</span></div>

  <div class="alt anjian lan_6"><span class="first">Alt</span></div>

  <div class="space anjian lan_6"><span class="first"></span></div>

  <div class="alt_1 anjian lan_6"><span class="first">Alt</span></div>

  <div class="windows_1 anjian lan_6"><span class="first">Win</span></div>

  <div class="right_on anjian lan_6"><span class="first"></span></div>

  <div class="ctrl_1 anjian lan_6"><span class="first">Ctrl</span></div>

  <div class="l_left anjian lan_6"><span class="second">←</span></div>

  <div class="l_down anjian lan_6"><span class="second">↓</span></div>

  <div class="l_right anjian lan_6"><span class="second">→</span></div>

  <div class="zone anjian lan_6"><span class="third">0</span><span class="fourth">Ins</span></div>

  <div class="del anjian lan_6"><span class="third">.</span><span class="fourth">Del</span></div>

</div>

</body>

</html>

css画电脑键盘的更多相关文章

  1. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  2. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  3. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  4. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

  7. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  9. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

随机推荐

  1. Android中的帧动画与补间动画的使用

    前言 在日常开发中,我们有时候须要一些好看的动画效果,这时能够充分利用Android提供的这几种动画来实现. Android提供了3种类型的动画: 补间动画:补间动画能够应用于View,让你能够定义一 ...

  2. android屏幕适配方案

    曾经看了android的屏幕适配方案,有非常多种.当中自己用到的一种是:先找一款主流的分辨率的android机,如:1080*1920的分辨率做基准,然后在这个基准上.调整好一切布局.图片.适配其它手 ...

  3. 【Educational Codeforces Round 33 A】Chess For Three

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.知道哪个人是旁观者就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever ...

  4. 逻辑与和逻辑或：&& 、||

    逻辑或:首先看左边是真还是假(除了那5个都是真),如果为真,返回左边值,如果为假,返回右边的值 逻辑与:和逻辑或相同,先看左边的值是真是假,如果左边为真返回右边的值,左边为假返回左边的值 在两者同时出 ...

  5. POJ 3723 Conscription MST

    http://poj.org/problem?id=3723 题目大意: 需要征募女兵N人,男兵M人,没征募一个人需要花费10000美元,但是如果已经征募的人中有一些关系亲密的人,那么可以少花一些钱, ...

  6. Loadrunner--负载生成器

    对场景进行设计后,接着需要对负载生成器进行管理和设置.Load Generator是运行脚本的负载引擎,在默认情况下使用本地的负载生成器来运行脚本,但是模拟用户行为也需要消耗一定的系统资源,所以在一台 ...

  7. vue项目实现导出数据到excel

    实现导出功能分两种,一种是客户端拿到数据做导出,第二种是服务器端处理好,返回一个数据流实现导出 第一种网上很容易找到,也很好用,本文要说的是第二种. fetchExport({ id: this.so ...

  8. es6三点运算符的用法

    扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1,2,3]); console.log(1,. ...

  9. 【BZOJ 3998】弦论

    [链接]h在这里写链接 [题意]     给你一个长度为n的子串;     让你求出第k小的子串是什么;     输出答案的类型分两种;     第一种,重复的算两次,第二种,重复的算一次.     ...

  10. 量化交易中VWAP/TWAP算法的基本原理和简单源码实现（C++和python）（转）

    量化交易中VWAP/TWAP算法的基本原理和简单源码实现(C++和python) 原文地址:http://blog.csdn.net/u012234115/article/details/728300 ...