<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css Drawing computer keyboards </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; Bor Der: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>
<body>
<div>http://www.999jiujiu.com/</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= "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>
CSS Painting computer keyboard