當前位置:首頁 > IT技術 > 移動平臺 > 正文

HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript
2021-08-09 13:13:19

HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript 手機模板wap 手機網站模板 企業(yè)手機網站模板

手機網站模板 手機模板 響應式手機網站 html5手機網站模板 企業(yè)手機網站模板 公司手機網站模板

作品介紹

1.網頁作品簡介方面 :星球福利社一系列的手機抽獎游戲包含有:翻卡抽花費、初春領紅包、驚喜送數(shù)碼、京東購物卡、幸運大轉盤、砸金蛋搶福利、刮刮樂、九宮格抽獎等html5手機抽獎活動頁面模板。

2.網頁作品編輯方面:此作品為html5響應式手機模板, html+css 布局制作,作品下載后可使用任意HTML編輯軟件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用)

一、作品演示

HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript_抽獎網頁設計HTML5

二、代碼目錄

HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript_H5手機抽獎游戲頁面_02

三、代碼實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星球福利社</title>
    <link rel="stylesheet" href="game/common/css/common.css">
    <link rel="stylesheet" href="index/css/index.css">
    <!-- 移動端適配 -->
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 10 + 'px';
        }
    </script>
</head>

<body>
<section id="wrap">
    <!--活動-->
    <section class="active">
        <h2 class="title tit1"></h2>
        <ul>
            <li>
                <a href="game/doll/index.html">
                    <img src="index/image/icon1.png">
                    <p>抽現(xiàn)金</p>
                </a>
            </li>
            <li>
                <a href="game/goldEgg2/index.html">
                    <img src="index/image/icon2.png">
                    <p>搶手機</p>
                </a>
            </li>
            <li>
                <a href="game/guaguale/index.html">
                    <img src="index/image/icon3.png">
                    <p>挖金子</p>
                </a>
            </li>
            <li>
                <a href="game/nineGrid/index.html">
                    <img src="index/image/icon4.png">
                    <p>贏流量</p>
                </a>
            </li>
        </ul>
    </section>
    <section class="game">
        <h2 class="title tit2"></h2>
        <ul>
            <li>
                <a href="game/luckCard/index.html">
                    <img src="index/image/img1.png">
                    <p>你的話費我包啦</p>
                </a>
            </li>
            <li>
                <a href="game/ring/index.html">
                    <img src="index/image/img2.png">
                    <p>紅包流量發(fā)不完</p>
                </a>
            </li>
            <li>
                <a href="game/tiger/index.html">
                    <img src="index/image/img3.png">
                    <p>手機平板通通有</p>
                </a>
            </li>
            <li>
                <a href="game/zhuanpan/index.html">
                    <img src="index/image/img4.png">
                    <p>購物卡發(fā)到手軟</p>
                </a>
            </li>
        </ul>
    </section>
    <section class="gift">
        <h2 class="title tit3"></h2>
        <ul>
            <li>
                <a href="game/zhuanpan/index.html">
                    <img src="index/image/gift1.png">
                    <div class="clearfix">
                        <p>轉盤抽紅包,看誰包最大</p>
                        <span>立即領取</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="game/goldEgg/index.html">
                    <img src="index/image/gift2.png">
                    <div class="clearfix">
                        <p>砸金蛋,領大獎</p>
                        <span>立即領取</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="game/guaguale/index.html">
                    <img src="index/image/gift3.png">
                    <div class="clearfix">
                        <p>刮卡贏數(shù)碼,獎品不上限</p>
                        <span>立即領取</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="game/nineGrid/index.html">
                    <img src="index/image/gift4.png">
                    <div class="clearfix">
                        <p>初春隨大禮,蘋果隨便送</p>
                        <span>立即領取</span>
                    </div>
                </a>
            </li>
        </ul>
    </section>
</section>
</body>
</html>


四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)

web前端 零基礎-入門到高級 (視頻+源碼+開發(fā)軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站
HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript_HTML5手機網頁_03


五、源碼獲取

? ~ 關注我,點贊博文~ 每天帶你漲知識!

?1.看到這里了就 [點贊+好評+收藏] 三連 支持下吧,你的「點贊,好評,收藏」是我創(chuàng)作的動力。

? 2.關注我 ~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者,一起探討 前端 Node 知識,互相學習」!

?3.以上內容技術相關問題可以相互學習,可關注↓公Z號 獲取更多源碼 !

HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript_HTML5手機網頁_04

六、更多HTML期末大作業(yè)(成品下載)

>>>戳我>>>點擊進入200例期末大作業(yè)作品

200多例 HTML5期末考核大作業(yè)源碼 包含 個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他 可滿足大學生網頁大作業(yè)網頁設計需求, 喜歡的可以下載!
HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript_企業(yè)手機網站模板_05
HTML5響應式手機模板:h5手機抽獎游戲活動頁面集合模板 HTML+CSS+JavaScript_企業(yè)手機網站模板_06

本文摘自 :https://blog.51cto.com/u

開通會員,享受整站包年服務立即開通 >