Use the keyboard to control the DIV. The Red Square is the keyboard operation area. You can perform the following operations:
Upper: lower left: lower right: →
Ctrl + 1: the background turns green
Ctrl + 2: the background turns yellow
Ctrl + 3: the background turns blue
Ctrl + ZOOM: Zoom in
Ctrl + ZOOM: Zoom out
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> use the keyboard to control the DIV </title> <style type =" text/css "> html, body {overflow: hidden;} body {margin: 0; padding: 0;} pre {color: green; padding: 10px 15px; background: # f0f0f0; border: 1px dotted #333; font: 12px/1.5 Courier New; margin: 12px ;}span {color: #999 ;}# box {position: absolute; top: 50px; left: 300px; width: 100px; height: 100px; background: red ;} </style> </pead> <body> <pre> the red block is the keyboard operation area. You can perform the following operations: Top: Bottom left: bottom right: → Ctrl + 1: the background turns green Ctrl + 2: the background turns yellow Ctrl + 3: the background turns blue Ctrl + ←: Zoom Ctrl + ←: zoom out </pre> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]