1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div class="shanDeng" id=&qu泠贾高框ot;deng"> <div id="luck"> <table style="border-spacing:.08rem .03rem;"> <tr> <td class="luck-unit luck-unit-0"><img src="./img/01.png"></td> <td class="luck-unit luck-unit-1"><img src="./img/02.png"></td> <td class="luck-unit luck-unit-2"><img src="./img/03.png"></td> </tr> <tr> <td class="luck-unit luck-unit-7"><img src="./img/05.png"></td> <td class="cjBtn" id="btn"></td> <td class="luck-unit luck-unit-3"><img src="./img/01.png"></td> </tr> <tr> <td class="luck-unit luck-unit-6"><img src="./img/02.png"></td> <td class="luck-unit luck-unit-5"><img src="./img/04.png"></td> <td class="luck-unit luck-unit-4"><img src="./img/03.png"></td> </tr> </table> </div></div><div class="rule"> <p>抽奖活动规则</p> <p>1、单次加油满200元,可抽奖一次;</p> <p>2、各种奖券使用规则详见该奖券的使用说明;</p> <p>3、奖券请在有效期内使用或者分享给其他朋友,过期无效</p></div><div class="play"> <span></span><div class="div"> <div id="demo" class="qimo8"> <div class="qimo"> <div id="demo1"> <ul> <li>获得一等奖</li> <li>获得四等奖</li> <li>获得三等奖</li> <li>获得二等奖</li> <li>获得四等奖</li> <li>获得三等奖</li> <li>获得二等奖</li> <li>获得三等奖</li> </ul> </div> <div id="demo2"></div> </div> </div></div>
4、书写css代码。body { background-image: url(../img/bg-img.png); background-repeat: no-repeat; background-size: 100% 100%; width: 7.5rem; height: 9.7rem; padding-top: 3.6rem; }body:after { position: relative; }* { margin: 0; padding: 0; }.shanDeng { width: 100%; background-size: 100%; background-repeat: no-repeat; margin-bottom: .15rem;}#btn .cjBtn, .shanDeng .active, .shanDeng td { width: 1.74rem; height: 1.48rem; background-repeat: no-repeat; }#btn.cjBtn { background-image: url(../img/cjBtn.png); background-size: 100% 100%; }#btn.cjBtnDom { background-image: url(../img/buttonDown.png); }#luck .active { background-image: url(../img/active.png); }.shanDeng td { text-align: center; background-image: url(../img/proBj.png); background-size: 100% 100%; }.shanDeng table { margin: 0 auto; }.rule { margin: 0 auto; background-color: #E84A54; width: 4.3rem; height: 2.3rem; padding: 0 .4rem;}.rule p { font-size: 26px; color: #fff; line-height: .38rem;}.rule p:first-child { text-align: center; font-size: 32px; line-height: .6rem;}.play { position: absolute; top: 4%; width: 100%; height: .42rem; line-height: .42rem;background-color: #FFEAB2; }.play .div { height: 100%; margin-left: .7rem;border-left: 2px solid #E84A54; }.play span { background: url("../img/icon-laba.png") no-repeat; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); height: .26rem;width: .3rem; margin: 0 .2rem;}
5、书写并添加js代码。<script src="js/common.js"></script><script src="js/jquery.min.js"></script>
6、在head标签中加入meta声明<meta name="apple-mobile-web-app-capable" content="yes">
7、代码整体结构。
8、查看效果。
