html5小游戲源代碼程序設計html源碼網(wǎng)頁電子版資料素材

近期末, 你還在為HTML網(wǎng)頁設計結(jié)課作業(yè),老師的作業(yè)要求感到頭大？HTML網(wǎng)頁作業(yè)無從下手？網(wǎng)頁要求的總數(shù)量太多？沒有合適的模板？等等一系列問題。你想要解決的問題，在專欄
Html+Css+JavaScript期末大作業(yè)
都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網(wǎng)頁設計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，非常適合初學者學習使用。

網(wǎng)頁實現(xiàn)截圖：文末獲取源碼

動漫官網(wǎng)主頁：

游戲動漫頁面展示：

招賢納士：

聯(lián)系我們：

關于公司：

主要源碼展示：

游戲動漫主頁.html

<head>

    <title>游戲動漫官網(wǎng)-首頁</title>
    
</head>

<body>
   
                    <li class="active"><a href="index.html">首頁</a></li>
                    <li><a href="worksShow.html">作品展示</a></li>
                    <li><a href="recruit.html">招賢納士</a></li>
                    <li><a href="contract.html">聯(lián)系我們</a></li>
                    <li><a href="about.html">關于公司</a></li>
                    <li class="lang"><a class="active">中</a>|<a href="en_index.html">EN</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
            <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
            <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
            <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
            <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <!--多圖輪播-->
    <div class="lunbo">
        <div class="title wow bounceInUp">我們參與的項目</div>
        <div class="picScroll">
            <ul>
                <li>
                    <a target="_blank" href="###">
								<img _src="img/lunbo1.png" src="img/lunbo1.png" />
								<div class="img-text">大型海戰(zhàn)戰(zhàn)場“潛龍之淵”上線，全民開戰(zhàn)！</div>
							</a>
                </li>
                <li>
                    <a target="_blank" href="###">
								<img _src="img/lunbo2.png" src="img/lunbo2.png" />
								<div class="img-text">天刀嘲天宮《一人之戰(zhàn)》視頻首發(fā) 同名專輯上架QQ音樂</div>
							</a>
                </li>
                <li>
                    <a target="_blank" href="###"><img _src="img/lunbo3.png" src="img/lunbo3.png" />
								<div class="img-text">懶人攻略 如何刷完一周勝負令</div>
							</a>
                </li>
                <li>
                    <a target="_blank" href="###"><img _src="img/lunbo4.png" src="img/lunbo4.png" />
								<div class="img-text">《王者榮耀》魔性H5上線，五軍對決等你來戰(zhàn)</div>
							</a>
                </li>
                <li>
                    <a target="_blank" href="###"><img _src="img/lunbo5.png" src="img/lunbo5.png" />
								<div class="img-text">超高期待！玩家Coser作品獲《絕地求生 全軍出擊》官方點贊</div>
							</a>
                </li>
                <li>
                    <a target="_blank" href="###"><img _src="img/lunbo6.png" src="img/lunbo6.png" />
								<div class="img-text">揭幕戰(zhàn)RNGvsIG LPL春季賽1月15日正式開賽</div>
							</a>
                </li>
            </ul>
            <a class="prev" href="javascript：void(0)"></a>
            <a class="next" href="javascript：void(0)"></a>
        </div>
        <a href="###">
            <div class="more">更多作品</div>
        </a>
    </div>
    <!--關于我們-->
    <div class="aboutUs">
        <div class="wrap">
            <div class="title wow bounceInUp">關于我們</div>
            <div class="text wow slideInDown">
                <span class="ccf0f32">廣州袁動動漫設計有限公司（YD ART），致力于CG美術概念設計及三維影視游戲視覺開發(fā)制作</span>
                <span>其團隊現(xiàn)由創(chuàng)辦人袁杰聯(lián)合著名CG藝術家肖壯悅以及XRCGTEAM（<a href="http://www.xrcgteam.com">http://www.xrcgteam.com</a>）成員和各游戲、影視、動漫業(yè)內(nèi)資深藝術家所組成，</span>
                <span>為國內(nèi)外眾多項目提供優(yōu)質(zhì)概念設計、原畫設定、美宣插畫、次世代3D、GUI、動作特效等外包服務。</span>
                <span>曾參與《星際爭霸》《上古卷軸》《英雄聯(lián)盟》《戰(zhàn)神》《三國無雙》《夢幻西游》《LOC》《鬼吹燈》《長城》等國內(nèi)外大型游戲影視項目視覺美術開發(fā)制作</span>
            </div>
            <
                <ul>
                    <li>
                        <a href="###">角色原畫設計</a>
                        <a href="###">場景原畫設計</a>
                        <a href="###">UI設計</a>
                    </li>
                    <li>
                        <a href="###">肖像繪制</a>
                        <a href="###">道具繪制</a>
                        <a href="###">圖標繪制</a>
                    </li>
                    <li>
                        <a href="###">美宣</a>
                        <a href="###">卡牌繪制</a>
                        <a href="###">2D場景整合</a>
                    </li>
                    <li>
                        <a href="###">3DMAX角色模型</a>
                        <a href="###">3DMAX場景模型</a>
                        <a href="###">次世代模型、貼圖</a>
                    </li>
                    <li>
                        <a href="###">3DMAX動畫</a>
                        <a href="###">3DMAX特效</a>
                        <a href="###">3轉(zhuǎn)2繪制</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--footer-->
    

    <style>
        .copyrights {
            text-indent: -9999px;
            height: 0;
            line-height: 0;
            font-size: 0;
            overflow: hidden;
        }
    </style>

主頁css

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #cf0f32;
    background: none;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #cf0f32;
}

.navbar-nav>li>a {
    line-height: 80px;
}

.navbar-default .navbar-nav>li>a {
    color: #000;
}

.nav>li>a {
    padding: 10px 12px;
    display: inline-block;
}

.navbar-default .navbar-nav>li.lang {
    margin-left: 20px;
}

xxxxxxxxxxbr .navbar-default .navbar-nav>.active>a,br.navbar-default .navbar-nav>.active>a:focus,br.navbar-default .navbar-nav>.active>a:hover {br    color: #cf0f32;br    background: none;br}brbr.navbar-default .navbar-nav>li>a:hover {br    color: #cf0f32;br}brbr.navbar-nav>li>a {br    line-height: 80px;br}brbr.navbar-default .navbar-nav>li>a {br    color: #000;br}brbr.nav>li>a {br    padding: 10px 12px;br    display: inline-block;br}brbr.navbar-default .navbar-nav>li.lang {br    margin-left: 20px;br}

javascript實現(xiàn)圖片輪播：

//多圖輪播
    jQuery(".picScroll").slide({
        mainCell: "ul",
        effect: "leftLoop",
        vis: 6,
        scroll: 1,
        autoPage: true,
        switchLoad: "_src",
        autoPlay: true
    });

    //banner輪播
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        //	      effect: 'fade',
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

xxxxxxxxxxbr //多圖輪播br    jQuery(".picScroll").slide({br        mainCell: "ul",br        effect: "leftLoop",br        vis: 6,br        scroll: 1,br        autoPage: true,br        switchLoad: "_src",br        autoPlay: truebr    });brbr    //banner輪播br    var swiper = new Swiper('.swiper-container', {br        spaceBetween: 30,br        //        effect: 'fade',br        loop: true,br        pagination: {br            el: '.swiper-pagination',br            clickable: true,br        },br        navigation: {br            nextEl: '.swiper-button-next',br            prevEl: '.swiper-button-prev',br        },br    });br

etnews是一個響應式的HTML新聞,博客,雜志網(wǎng)站模板,可以使用這套前端模板簡約很多設計的工作。模板有許多特性適合流行的主題商業(yè)、時尚,游戲,娛樂,生活方式、體育、科技、政治、旅行、天氣、視頻等部分。基于先進的前端技術，專為前端開發(fā)人員服務。

主要特色

基于Bootstrap4. x
100%的響應
漂亮和干凈的設計
清潔和注釋代碼
14 +所有頁面
4 +主頁
Sass包括
Webpack 4
容易定制
標準HTML5和CSS3

多用游戲娛樂新聞網(wǎng)站bootstrap模板（共374個文件）

幫助文檔

開發(fā)環(huán)境(NodeJs)

生產(chǎn)環(huán)境

源碼獲取，前端學習交流私信“123”

在線咨詢

上一篇：在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標簽有哪些？
下一篇：HTML字間距如何設置？#html

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

html5小游戲源代碼程序設計html源碼網(wǎng)頁電子版資料素材

您的項目需求