1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<body><div class="pic"媪青怍牙> <div id="box"> <img class="pj" src="images/201__.png"> <img class="p2" src="images/202.png"> <img class="p3" src="images/203.png"> <img class="p4" src="images/204.png"> <img class="p5" src="images/205.png"> <img class="p6" src="images/206.png"> <img class="p7" src="images/207.png"> <img class="p8" src="images/208.png"> <img class="p9" src="images/209.png"> </div> <div id="output"> <img alt="" src="images/2.jpg"> </div></div><!-- 提示 --><div class="time"> <p>英雄，您已作战<span>0</span>秒</p></div><div class="bu"> <p>英雄，您已经走了<span>0</span>步</p></div><input type="button" id="button" value="开始新游戏">
4、书写css代码。<style type="text/css">* { 罪焐芡拂margin: 0px; padding: 0px; border: 0px; }#box { width: 300px; height: 300px; position: relative; border: 1px solid #ccc; }.pic { width: 528px; margin: 16px auto 0px; }.pic>div { display: inline-block; }#box img { float: left; width: 100px; height: 100px; }#box .pj, #box .p2, #box .p3, #box .p4, #box .p5, #box .p6, #box .p7, #box .p8, #box .p9 { position: absolute; }#box .pj, #box .p2, #box .p3 { top: 0px; }#box .p4, #box .p5, #box .p6 { top: 100px; }#box .p7, #box .p8, #box .p9 { top: 200px; }#box .pj, #box .p4, #box .p7 { left: 0px; }#box .p2, #box .p5, #box .p8 { left: 100px; }#box .p3, #box .p6, #box .p9 { left: 200px; }#button { padding: 6px; color: #fff; background: #574a4a; border-radius: 4px; margin: 0 auto; display: block }#output { width: 170px; height: 170px; margin-left: 50px; }#output img { height: 170px; width: 170px; float: right; border: 1px solid #ccc; }.time, .bu { width: 300px; height: 30px; clear: both; text-align: center; line-height: 30px; border: 1px solid #574a4a; margin: 10px auto; border-radius: 4px; }</style>
5、书写并添加js代码。<script src="js/jquery.min.js"></script>
6、代码整体结构。
7、查看效果。
