1、新建html文档。
3、书写css代码。* { margin: 0; padding: 0; }body { font: 71鬈熵痼霄%/1.5 Verdana, Sans-Serif; background: #eee; }#container { margin: 100px auto; width: 688px; }#write { margin: 0 0 5px; padding: 5px; width: 671px; height: 200px; font: 1em/1.5 Verdana, Sans-Serif; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; }#keyboard { margin: 0; padding: 0; list-style: none; }#keyboard li { float: left; margin: 0 5px 5px 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -we bkit-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; }#keyboard li:hover { position: relative; top: 1px; left: 1px; border-color: #e5e5e5; cursor: pointer; }
5、代码整体结构。
