File "keynum04.html"

Full Path: /home/analogde/www/RaspBerry/HTML/keynum04.html
File size: 2.47 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
  <title>CSS: A numeric keypad</title>
  <meta name="Author" content="Krijn Hoetmer ~ http://ktk.xs4all.nl/">
  <style type="text/css">
   html, body { background: #eee; }
   ul { list-style-type: none; overflow: hidden; margin: 0 auto; width: 224px; padding: 0; }
   li { margin: 0; padding: 0; float: left; }
   ul a { position: relative; display: block; height: 40px; width: 40px; font: menu; cursor: pointer; text-decoration: none; padding: 0.5em; background-color: ButtonFace; color: ButtonText; border-top: 2px solid ButtonHighlight; border-right: 2px solid ButtonShadow; border-bottom: 2px solid ButtonShadow; border-left: 2px solid ButtonHighlight; }
   ul a:active { top: 1px; left: 1px; border-top-color: ButtonShadow; border-right-color: ButtonHighlight; border-bottom-color: ButtonHighlight; border-left-color: ButtonShadow; }
   kbd { display: block; font-size: 100%; font: menu; }
   small { display: block; font-size: 100%; }
   li#plus, li#enter { float: right; }
   li#plus a, li#enter a { height: 96px; }
   li#zero a { width: 96px; }
   span#relief { display: block; text-align: center; border: 2px outset ButtonFace; width: 5px; margin: 10px auto 0 auto; line-height: 2px; }
  </style>
 </head>
 <body>
  <h1>A numeric keypad</h1>
  <ul>
   <li><a href="#"><kbd>Num Lock</kbd></a></li>
   <li><a href="#"><kbd>/</kbd></a></li>
   <li><a href="#"><kbd>*</kbd></a></li>
   <li><a href="#"><kbd>-</kbd></a></li>
   <li><a href="#"><kbd>7 <small>Home</small></kbd></a></li>
   <li><a href="#"><kbd>8 <small>↑</small></kbd></a></li>
   <li><a href="#"><kbd>9 <small>PgUp</small></kbd></a></li>
   <li id="plus"><a href="#"><kbd>+</kbd></a></li>
   <li><a href="#"><kbd>4 <small>←</small></kbd></a></li>
   <li><a href="#"><kbd>5 <span id="relief">&nbsp;</span></kbd></a></li>
   <li><a href="#"><kbd>6 <small>→</small></kbd></a></li>
   <li><a href="#"><kbd>1 <small>End</small></kbd></a></li>
   <li><a href="#"><kbd>2 <small>↓</small></kbd></a></li>
   <li><a href="#"><kbd>3 <small>PgDn</small></kbd></a></li>
   <li id="enter"><a href="#">Enter<kbd></kbd></a></li>
   <li id="zero"><a href="#">0 <small>Ins</small><kbd></kbd></a></li>
   <li><a href="#"><kbd>. <small>Del</small></kbd></a></li>
  </ul>
  <hr>
  <p>Only looking cool in Opera at the moment :-) (I know Gecko is right on the borders)</p>
  <hr>
  <p><a href="/">Home</a> - <a href="/stuff/">More stuff</a></p>
 </body>
</html>