css畫電腦鍵盤

2024-09-05 12:17:16

字體：大中小

來源：轉載

供稿：網友

CSS鍵盤，閑著無聊，用CSS代碼寫個鍵盤，技術要求個人感覺不太高，只是繁瑣一些，最終效果覺得還挺不錯。

<!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   class="iwvjtn8m0"   id="jianpan">  <div   id="iwvjtn8m0"   class="esc anjian lan_1"><span id="iwvjtn8m0"    class="first">Esc</SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556541.html'>CSS3實現蘋果產品圖片360度旋轉</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556543.html'>div模擬select下拉菜單</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流