你的位置:首页 > 网页设计

[网页设计]css画电脑键盘


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <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>http://www.999jiujiu.com/</div>
<div id="jianpan">
<div ><span >Esc</span></div>
<div ><span >F1</span></div>
<div ><span >F2</span></div>
<div ><span >F3</span></div>
<div ><span >F4</span></div>
<div ><span >F5</span></div>
<div ><span >F6</span></div>
<div ><span >F7</span></div>
<div ><span >F8</span></div>
<div ><span >F9</span></div>
<div ><span >F10</span></div>
<div ><span >F11</span></div>
<div ><span >F12</span></div>
<div ><span >PrtSc SysRq</span></div>
<div ><span >Scroll Lock</span></div>
<div ><span >Pause Break</span></div>

<div ><span >~</span><span >`</span></div>
<div ><span >!</span><span >1</span></div>
<div ><span >@</span><span >2</span></div>
<div ><span >#</span><span >3</span></div>
<div ><span >$</span><span >4</span></div>
<div ><span >%</span><span >5</span></div>
<div ><span >^</span><span >6</span></div>
<div ><span >& </span><span >7</span></div>
<div ><span >*</span><span >8</span></div>
<div ><span >(</span><span >9</span></div>
<div ><span >)</span><span >0</span></div>
<div ><span >-</span><span >-</span></div>
<div ><span >+</span><span >=</span></div>
<div ><span >←Backspace</span></div>
<div ><span >Insert</span></div>
<div ><span >Home</span></div>
<div ><span >Page Up</span></div>
<div ><span >Num Lock</span></div>
<div ><span >/</span></div>
<div ><span >*</span></div>
<div ><span >-</span></div>

<div ><span >Tap</span></div>
<div ><span >Q</span></div>
<div ><span >W</span></div>
<div ><span >E</span></div>
<div ><span >R</span></div>
<div ><span >T</span></div>
<div ><span >Y</span></div>
<div ><span >U</span></div>
<div ><span >I</span></div>
<div ><span >O</span></div>
<div ><span >P</span></div>
<div ><span >{</span></div>
<div ><span >}</span></div>
<div ><span >|</span><span >\</span></div>
<div ><span >Delete</span></div>
<div ><span >End</span></div>
<div ><span >Page Down</span></div>
<div ><span >7</span><span >Home</span></div>
<div ><span >8</span><span >↑</span></div>
<div ><span >9</span><span >PgUp</span></div>
<div ><span >+</span></div>

<div ><span >Caps Lock</span></div>
<div ><span >A</span></div>
<div ><span >S</span></div>
<div ><span >D</span></div>
<div ><span >F</span></div>
<div ><span >G</span></div>
<div ><span >H</span></div>
<div ><span >J</span></div>
<div ><span >K</span></div>
<div ><span >L</span></div>
<div ><span >:</span></div>
<div ><span >"</span></div>
<div ><span >Enter</span></div>
<div ><span >4</span><span >←</span></div>
<div ><span >5</span></div>
<div ><span >6</span><span >→</span></div>

<div ><span >Shift</span></div>
<div ><span >Z</span></div>
<div ><span >X</span></div>
<div ><span >C</span></div>
<div ><span >V</span></div>
<div ><span >B</span></div>
<div ><span >N</span></div>
<div ><span >M</span></div>
<div ><span ><</span></div>
<div ><span >></span></div>
<div ><span >?</span></div>
<div ><span >Shift</span></div>
<div ><span >↑</span></div>
<div ><span >1</span><span >End</span></div>
<div ><span >2</span><span >↓</span></div>
<div ><span >3</span><span >PgDn</span></div>
<div ><span >Enter</span></div>

<div ><span >Ctrl</span></div>
<div ><span >Win</span></div>
<div ><span >Alt</span></div>
<div ><span ></span></div>
<div ><span >Alt</span></div>
<div ><span >Win</span></div>
<div ><span ></span></div>
<div ><span >Ctrl</span></div>
<div ><span >←</span></div>
<div ><span >↓</span></div>
<div ><span >→</span></div>
<div ><span >0</span><span >Ins</span></div>
<div ><span >.</span><span >Del</span></div>
</div>
</body>
</html>