HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计

HTML期末大作业—— 游戏网页(5个页面) ~全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源

@码出未来-web网页设计

7997人浏览 · 2021-07-12 10:48:11

@码出未来-web网页设计 · 2021-07-12 10:48:11 发布

HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：黑色全屏的游戏美术大赛活动页面模板，游戏美术作品征集单页介绍。HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页作品征集作品评选线下巡回合作伙伴 等总共 5 个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码
八、150套Echarts大数据可视化

一、作品演示

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<html lang="zh-CN"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>腾讯GAD艺行者游戏美术大赛</title>
    <meta name="Keywords" content="GAD艺行者游戏美术大赛，游戏美术大赛，艺行者，腾讯GAD游戏美术大赛">
    <meta name="description" content="2017“艺行者”腾讯GAD游戏美术大赛是由腾讯GAD主办，腾讯互娱光子美术中心与全球顶尖的用户界面产品生产商Wacom共同承办的游戏美术作品大赛活动，本次活动面向所有的游戏美术从业者以及在校大学生，旨在为参赛者搭建一个艺术学习和成长的交流平台，打造游戏美术专业顶尖赛事">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/swiper-3.4.1.min.css">
    <link rel="stylesheet" href="./css/index.css">
  
</head>
<body>
<!--页面主内容[[-->
<div class="m-container index">
    <!--头部导航栏[[-->
    <div class="headnav ">
        <div class="headnav-wrap">
            <a class="headnav-logo" href="http://www.gad.qq.com" target="_blank">
                <img class="logo-img" width="144" height="41" src="./img/activity_logo.png">
            </a>
            <div class="headnav-main">
                <ul class="headnav-list f-clearfix f-fl">
                    <li class="list-item cur">
                        <a class="list-link" href="javascript:;">首页</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">作品征集</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">作品评选</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">线下巡回</a>
                    </li>
                    <li class="list-item">
                        <a class="list-link" href="javascript:;">合作伙伴</a>
                    </li>
                </ul>
                <!--[交互说明]在headnav-signup后追加类：
                    立即报名（默认） | show-signup-normal
                    我的报名 | show-signup-my
                    报名结束 | show-signup-end

                    点击 立即报名/我的报名，调起报名弹窗，报名结束不可点
                -->
                <div class="headnav-signup show-signup-normal">
                    <a class="signup-btn btn-default normal" href="//gad.qq.com/megagame/intro/93">立即参赛 &gt;</a>
                    <a class="signup-btn btn-default my" href="javascript:;">我的参赛</a>
                    <a class="signup-btn btn-disabled end" href="javascript:;">比赛结束</a>
                </div>
            </div>
        </div>
    </div>
    <!--头部导航栏[[-->
    <div class="swiper-container swiper-container-vertical" style="height: 868px;">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-1 swiper-slide-active" style="height: 868px;">
                <div class="slide-zoom-cont slide-adaptation">
                    <div class="slide-main">
                        <img class="chip0" src="./img/chip0.png" alt="">
                        <span class="chip chip1"></span>
                        <span class="chip chip2"></span>
                        <span class="chip chip3"></span>
                        <span class="chip chip4"></span>
                        <span class="chip chip5"></span>
                        <span class="chip chip6"></span>
                        <span class="chip chip7"></span>
                        <span class="chip chip8"></span>
                        <span class="chip chip9"></span>
                        <span class="chip chip10"></span>
                        <div class="logo-box">
                            <img src="./img/logo2.png" alt="赞助者">
                        </div>
                        <h1 class="main-title" title="GAD游戏美术大赛"></h1>

                        <div class="time">
                            作品提交：2017年11月27日-2018年3月31日
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-2 swiper-slide-next" style="height: 868px;">
                <div class="slide-zoom-cont slide-adaptation">
                    <div class="slide-main">
                        <div class="page-sort">
                            <span class="sort-num">01</span>
                        </div>
                        <div class="page-cnt">
                            <div class="title-wrap">
                                <h2 class="title-sec"><span class="ico-title01"></span>作品征集</h2>
                                <p class="sec-time">2017年11月27日-2018年3月31日</p>
                            </div>
                            <dl class="cnt-part">
                                <dt class="title-three">大赛简介：</dt>
                                <dd class="cnt-part-content">2017“艺行者”腾讯GAD游戏美术大赛是由腾讯GAD主办，腾讯互娱光子美术中心与全球顶尖的用户界面产品生产商Wacom共同承办的游戏美术作品大赛活动，本次活动面向所有的游戏美术从业者以及在校大学生，旨在为参赛者搭建一个艺术学习和成长的交流平台，打造游戏美术专业顶尖赛事。</dd>
                            </dl>
                            <dl class="cnt-part">
                                <dt class="title-three">征集内容</dt>
                                <dd class="cnt-part-content">作品主题：《艺点爱心，照亮世界》</dd>
                                <dd class="cnt-part-content">作品类型： 2D、3D、UI、动画、特效作品。</dd>
                                <dd class="cnt-part-content img-content">
                                    <img src="./img/demo.jpg" alt="">
                                </dd>
                            </dl>
                            <a class="detail-link" href="/megagame/intro/93">查看大赛详情 &gt;</a>
                        </div>
                        <div class="page-aside">
                            <img class="advan" src="./img/advan.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-3" style="height: 868px;">
                <div class="slide-zoom-cont slide-adaptation">
                    <div class="slide-main">
                        <div class="page-sort">
                            <span class="sort-num">02</span>
                        </div>
                        <div class="page-cnt">
                            <div class="title-wrap">
                                <h2 class="title-sec"><span class="ico-title02"></span>作品评选</h2>
                                <p class="sec-time">线上初评：2018年4月1日-2018年4月15日<br>线下决赛：2018年4月16日-2018年6月30日</p>
                            </div>
                            <dl class="cnt-part">
                                <dt class="title-three">评选规则：</dt>
                                <dd class="cnt-part-content self">希望创作者可以本着开放、自由、创造的精神，并通过自身对于游戏文化的理解，创作出属于自己的游戏世界。作品可以2D、3D、UI、动画、特效的形式体现，风格不限。
                                    <br>
                                    大赛总体流程：线上作品初选+五大分赛点线下评选入围总决赛作品+深圳总决赛行业专家评选+所有获奖作品全国巡展。</dd>
                            </dl>
                            <ul class="citystop-list">
                                <li class="citystop-item item01">
                                    <a href="javascript:;">
                                        <p class="citystop-name">深圳</p>
                                        <!--<span class="citystop-time">17/10/29</span>-->
                                    </a>
                                </li>
                                <li class="citystop-item item02">
                                    <a href="javascript:;">
                                        <p class="citystop-name">北京</p>
                                        <!--<span class="citystop-time">17/10/29</span>-->
                                    </a>
                                </li>
                                <li class="citystop-item item03">
                                    <a href="javascript:;">
                                        <p class="citystop-name">上海</p>
                                        <!--<span class="citystop-time">17/10/29</span>-->
                                    </a>
                                </li>
                                <li class="citystop-item item04">
                                    <a href="javascript:;">
                                        <p class="citystop-name">广州</p>
                                        <!--<span class="citystop-time">17/10/29</span>-->
                                    </a>
                                </li>
                                <li class="citystop-item item05">
                                    <a href="javascript:;">
                                        <p class="citystop-name">厦门</p>
                                        <!--<span class="citystop-time">17/10/29</span>-->
                                    </a>
                                </li>
                                <li class="citystop-item item06">
                                    <a href="javascript:;">
                                        <p class="citystop-name">成都</p>
                                        <!--<span class="citystop-time">17/10/29</span>-->
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-4" style="height: 868px;">
                <div class="slide-zoom-cont slide-adaptation">
                    <div class="slide-main">
                        <div class="page-sort">
                            <span class="sort-num">03</span>
                        </div>
                        <div class="page-cnt">
                            <div class="title-wrap">
                                <h2 class="title-sec"><span class="ico-title03"></span>线下巡回展</h2>
                                <p class="sec-time">2018年8月—2018年12月</p>
                            </div>
                            <dl class="cnt-part">
                                <dt class="title-three">巡回简介：</dt>
                                <dd class="cnt-part-content">赛后的优秀作品巡展将由国内多家业界媒体与业内机构联手护航，将在大赛结束后在深圳、北京、上海、广州、厦门、成都六大城市巡回展开。</dd>
                            </dl>
                            <dl class="cnt-part">
                                <dt class="title-three">参展对象：</dt>
                                <dd class="cnt-part-content">艺行者美术大赛获奖作品及特邀嘉宾作品</dd>
                            </dl>
                            <dl class="cnt-part">
                                <dt class="title-three">场地合作伙伴招募</dt>
                                <dd class="cnt-part-content self">
                                    <div class="info-box">
                                        <p class="info-group">
                                            <span class="ico-people"></span><span class="info-txt">如果您有场地条件、并和我们一样希望用“艺点爱心”给予游戏美术更多光和能量，欢迎加入本次大赛的合作伙伴行列！</span>
                                        </p>
                                        <p class="info-group">
                                            <span class="ico-msg"></span><span class="info-txt">邮   箱：GAD@tencent.com</span>
                                        </p>
                                        <p class="info-group">
                                            <span class="ico-phone"></span><span class="info-txt">电   话：13422894431</span>
                                        </p>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-5" style="height: 868px;">
                <div class="slide-zoom-cont slide-adaptation">
                    <div class="slide-main">
                        <div class="page-sort">
                            <span class="sort-num">04</span>
                        </div>
                        <div class="page-cnt">
                            <div class="title-wrap">
                                <h2 class="title-sec"><span class="ico-title04"></span>合作伙伴</h2>
                            </div>
                            <div class="leader-box">
                                <dl class="cnt-part sponsor">
                                    <dt class="title-three">主办方</dt>
                                    <dd class="cnt-part-content">
                                        <img src="./img/logo.png" alt="GAD游戏开发者平台">
                                    </dd>
                                </dl>
                                <dl class="cnt-part help-sponsor">
                                    <dt class="title-three">协办方</dt>
                                    <dd class="cnt-part-content">
                                        <img src="./img/help_logo01.png" alt="">
                                        <img src="./img/help_logo02.png" alt="">
                                    </dd>
                                </dl>
                            </div>
                            <dl class="cnt-part partner">
                                <dt class="title-three">合作伙伴</dt>
                                <dd class="cnt-part-content">
                                    <img class="partner-pic" src="./img/partner.png" alt="">
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>