Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
RaspBerry
/
HTML
:
keynum04.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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"> </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>