css画电脑键盘-白红宇

css画电脑键盘

阅读量：5168 次

发布时间：2019-06-13

本文共 10924 字，大约阅读时间需要 36 分钟。

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

<head>

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

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 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_14 anjian lan_2"><span class="first">←Backspace</span></div>

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

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

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

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

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

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

</div>

</body>

</html>

转载于:https://www.cnblogs.com/gcczhongduan/p/5078474.html

你可能感兴趣的文章

<Learning How to Learn>Week One: Focused versus Diffuse Thinking

查看>>

基于霍尔元件的电机转速测量

查看>>

File文件类型和RandomAccessFile类型

查看>>

Mongodb源码分析--Replication之OpLog

查看>>

一张图看懂 SQL 的各种 join 用法

三种继承方式和访问控制方式对子类成员的影响

查看>>

ride中安装AutoItLibrary

查看>>