html+css3实现网页小键盘
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代艨位雅剖码。<divstyle="width:960px;margin:10禊诬娱飑pxauto;clear:both;text-align:center;"></div><divid="container"> <textareaid="write"rows="6"cols="60"></textarea> <ulid="keyboard"> <liclass="symbol"><spanclass="off">`</span><spanclass="on">~</span></li> <liclass="symbol"><spanclass="off">1</span><spanclass="on">!</span></li> <liclass="symbol"><spanclass="off">2</span><spanclass="on">@</span></li> <liclass="symbol"><spanclass="off">3</span><spanclass="on">#</span></li> <liclass="symbol"><spanclass="off">4</span><spanclass="on">$</span></li> <liclass="symbol"><spanclass="off">5</span><spanclass="on">%</span></li> <liclass="symbol"><spanclass="off">6</span><spanclass="on">^</span></li> <liclass="symbol"><spanclass="off">7</span><spanclass="on">&</span></li> <liclass="symbol"><spanclass="off">8</span><spanclass="on">*</span></li> <liclass="symbol"><spanclass="off">9</span><spanclass="on">(</span></li> <liclass="symbol"><spanclass="off">0</span><spanclass="on">)</span></li> <liclass="symbol"><spanclass="off">-</span><spanclass="on">_</span></li> <liclass="symbol"><spanclass="off">=</span><spanclass="on">+</span></li> <liclass="deletelastitem">delete</li> <liclass="tab">tab</li> <liclass="letter">q</li> <liclass="letter">w</li> <liclass="letter">e</li> <liclass="letter">r</li> <liclass="letter">t</li> <liclass="letter">y</li> <liclass="letter">u</li> <liclass="letter">i</li> <liclass="letter">o</li> <liclass="letter">p</li> <liclass="symbol"><spanclass="off">[</span><spanclass="on">{</span></li> <liclass="symbol"><spanclass="off">]</span><spanclass="on">}</span></li> <liclass="symbollastitem"><spanclass="off">\</span><spanclass="on">|</span></li> <liclass="capslock">capslock</li> <liclass="letter">a</li> <liclass="letter">s</li> <liclass="letter">d</li> <liclass="letter">f</li> <liclass="letter">g</li> <liclass="letter">h</li> <liclass="letter">j</li> <liclass="letter">k</li> <liclass="letter">l</li> <liclass="symbol"><spanclass="off">;</span><spanclass="on">:</span></li> <liclass="symbol"><spanclass="off">'</span><spanclass="on">"</span></li> <liclass="returnlastitem">return</li> <liclass="left-shift">shift</li> <liclass="letter">z</li> <liclass="letter">x</li> <liclass="letter">c</li> <liclass="letter">v</li> <liclass="letter">b</li> <liclass="letter">n</li> <liclass="letter">m</li> <liclass="symbol"><spanclass="off">,</span><spanclass="on"><</span></li> <liclass="symbol"><spanclass="off">.</span><spanclass="on">></span></li> <liclass="symbol"><spanclass="off">/</span><spanclass="on">?</span></li> <liclass="right-shiftlastitem">shift</li> <liclass="spacelastitem"> </li> </ul></div>
3、书写css代码跷孳岔养。*{margin:0;padding:0;}body{font:71鬈熵痼霄%/1.5Verdana,Sans-Serif;background:#eee;}#container{margin:100pxauto;width:688px;}#write{margin:005px;padding:5px;width:671px;height:200px;font:1em/1.5Verdana,Sans-Serif;background:#fff;border:1pxsolid#f9f9f9;-moz-border-radius:5px;-webkit-border-radius:5px;}#keyboard{margin:0;padding:0;list-style:none;}#keyboardli{float:left;margin:05px5px0;width:40px;height:40px;line-height:40px;text-align:center;background:#fff;border:1pxsolid#f9f9f9;-moz-border-radius:5px;-webkit-border-radius:5px;}.capslock,.tab,.left-shift{clear:left;}#keyboard.tab,#keyboard.delete{width:70px;}#keyboard.capslock{width:80px;}#keyboard.return{width:77px;}#keyboard.left-shift{width:95px;}#keyboard.right-shift{width:109px;}.lastitem{margin-right:0;}.uppercase{text-transform:uppercase;}#keyboard.space{clear:left;width:681px;}.on{display:none;}#keyboardli:hover{position:relative;top:1px;left:1px;border-color:#e5e5e5;cursor:pointer;}
4、书写并添加js代码。<scriptsrc="js/jquery.min.js"></script>
5、代码整体结构。
6、查看效果。
