jQuery石头剪刀布猜拳网页小游戏

1、新建html文档。

3、书写css代码。<style>html { background-color: #ecee髫潋啜缅ef; min-height: 100%; }html * { outline: 0; }section { height: 120px; width: 600px; position: absolute; top: 50%; left: 50%; background-color: #fff; padding: 10px; margin-top: -100px; margin-left: -210px; border-radius: 6px; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); }section button { background: 0; border: 0; height: 120px; width: 20%; float: left; }section button .fa { font-size: 80px; display: block; margin-bottom: 20px; }section button.win { color: #15a015; }section button.loss { color: #ff1515; }section button.tie { color: #1515ff; }section .result { position: absolute; text-align: center; font-size: 28px; height: 40px; color: #fff; top: -40px; right: 0; left: 0; }section .result .animated { -webkit-animation-duration: 1.7s; animation-duration: 1.7s; }aside { box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px; background-color: #e9eaed; padding-top: 50px; padding-bottom: 50px; position: fixed; width: 200px; bottom: 0; left: 0; top: 0; }aside .legend { position: fixed; top: 0; left: 0; right: 0; width: 200px; background-color: #fff; height: 50px; border-top: 1px solid rgba(0, 0, 0, 0.1); }aside .legend .me, aside .legend .cpu { height: 40px; line-height: 40px; font-size: 14px; width: 50%; float: left; text-align: center; padding: 0.3rem 0; }aside .history-item { height: 40px; font-size: 24px; line-height: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }aside .history-item.win { background-color: rgba(0, 150, 0, 0.1); }aside .history-item.loss { background-color: rgba(150, 0, 0, 0.1); }aside .history-item.tie { background-color: rgba(0, 0, 150, 0.1); }aside .history-item .fa { text-align: center; width: 50%; }aside .scoreboard { position: fixed; bottom: 0; left: 0; right: 0; width: 200px; background-color: #fff; height: 50px; border-top: 1px solid rgba(0, 0, 0, 0.1); }aside .scoreboard .win, aside .scoreboard .loss, aside .scoreboard .tie, aside .scoreboard .move { height: 40px; line-height: 20px; font-size: 11px; width: 25%; float: left; text-align: center; padding: 0.3rem 0; }</style>

5、代码整体结构。