Web前端开发技术课程大作业，期末考试(英雄联盟LOL游戏静态网站制作 )

最新推荐文章于 2022-12-15 11:28:32 发布
最新推荐文章于 2022-12-15 11:28:32 发布
阅读量217 收藏
点赞数
分类专栏： 学生网页设计作业 文章标签： 前端 游戏 css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38513433/article/details/127202359
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

H32JP- 英雄联盟js登录联系（5页）

🧩 2.图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>英雄联盟</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-----头部开始------->
<div class="top">
<a href="index.html"><img  src="images/logo.jpg" /></a> 
</div>
<!---nav开始---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">LOL简介</a></li>
<li><a href="yingxiong.html">经典英雄</a></li>
<li><a href="lianxi.html">联系我们</a></li>
<li><a href="huiyuan.html">会员登录</a></li>
</ul>
</div>
</div>
<!---nav结束---->
<!-----banner------->
<div class="box" id="box">
    <div class="inner">
        <!--轮播图-->
        <ul>
            <li><a href="#"><img  src="images/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img  src="images/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner3.jpg" alt=""></a></li>
      
        </ul>
 
        <ol class="bar">
 
        </ol>
        <!--左右焦点-->
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
 
    </div>
</div>
<script type="text/javascript" src="js/banner.js"></script>

<!-----头部结束------->
<!-----main开始------->
<div class="main">
<div class="sleft">
<div class="stitle">

<p>英雄联盟简介</p>
</div>
<img src="images/left-img.jpg" />
</div>
<div class="sright">
<div class="sbox1">
<div class="wen">
<h1>游戏背景</h1>
<p>&nbsp;&nbsp;近200年来的战争和纷争导致魔法滥用，英雄们打造出大部分魔法物品率领部队厮杀。从未考虑过无止境的滥用魔法会给这片大陆的环境带来怎么样的灾难。人们终于意识到世界已经承受不起符文之战的破坏。为了回应世界上不断恶化的政治和经济危机，瓦罗兰的大法师们达成共识，他们成立了一个叫英雄联盟的组织，英雄联盟决定所有的纷争和争斗都必须通过设立在瓦罗兰各地的竞技场来处理。这些英雄们带领着小兵进行战斗，这些小兵由水晶枢纽制造。它们也将在竞技场内中和英雄们一起战斗，达成任务目标获取胜利。而胜利条件是摧毁对方的水晶枢纽或对方主动投降。</p>
</div>
<img src="images/ri01.jpg" />
</div>
<div class="sbox2">
<img src="images/ri02.jpg" />
<div class="wen">
<h1>地图资料</h1>
<p>游戏中目前拥有4个地图，它们分别是召唤师峡谷（新版）、扭曲丛林、水晶之痕、嚎哭深渊。召唤师峡谷：瓦罗兰大陆最古老的战场，继承了DotA地图的主要特征，整体为魔幻森林风格，色调以绿色为主。地图左下角和右上角各1个基地之间有3条线路（各包含6座防御塔，每边3座）相连，兵线之间以野区相隔，又有一条河道从左上连至右下，最终野区被分区为4个部分，野区内生活着各种中立生物。整个地图大致呈中心对称。可容纳每边最多5名英雄。</p>
</div>
</div>

</div>

</div>

<!-----main结束------->
<!-----bottom开始------->
<div class="bottom">
<div class=" daoh">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">LOL简介</a></li>
<li><a href="yingxiong.html">经典英雄</a></li>
<li><a href="lianxi.html">联系我们</a></li>
<li><a href="huiyuan.html">会员登录</a></li>
</ul>
</div>
<img src="images/logo2.jpg" />
</div>

<!-----bottom结束------->
</body>
</html>

🏠CSS样式代码

@charset "utf-8";
/* CSS Document */

body{ margin:0 auto; font-size:12px; font-family: "宋体",arial; line-height:22px;   }


div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{ height:auto; margin:0;; padding:0; vertical-align:middle ;}

li{ list-style:none;}

a{ text-decoration:none;}

.ul{ list-style:none;}

.divclear{ clear:both;}

img{ border:0; margin:0; padding:0;}

 a{color:#333;}

 a:link{ color:#333;}

 a:hover {color:#629705;text-decoration:none;overflow:hidden;}

/*---网页开始-----*/
/*---top开始-----*/
.top{ height: 110px;width: 1366px;margin: 0 auto;  text-align:center; }
.ban{ height: 224px;
width: 1366px;
margin: 0 auto;
margin-bottom:10px;}

/*---top结束-----*/
/*---导航----*/
.daohang{width: 1366px; height: 50px;   margin: 0 auto; background: #000000;}
#nav{ width:1170px; height:50px; line-height:50px; font-family:"微软雅黑"; margin:0 auto; }

#nav ul{  margin:0 auto; }

#nav li{float: left;
width:230px;
text-align: center;
color: #FFF;
}

#nav a{width:230px;height:50px; display:block; font-size:24px;  float:left; color:#ebba20; text-align:center;}
.box {
	width: 1366px;
	height:400px;
	margin:0 auto;
	margin-bottom:10px;
	
        }
        .inner{
	width: 1366px;
	height:400px;
	position: relative;
	overflow: hidden;
        }
        .inner img{
           width: 1366px;
	height:400px;
            vertical-align: top
        }
        .inner ul {
            width: 1000%;
            position: absolute;
            list-style: none;
            left:0;
            top: 0;
	    margin:0px;
	    padding:0px;
        }
        .inner li{
            float: left;
 
        }
 
        ol {
	position: absolute;
	height: 20px;
	right: 20px;
	bottom: 12px;
	text-align: center;
	padding: 5px;
        }
        ol li{
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	background-color: #fff;
	margin: 5px;
	cursor: pointer; 
        }
        ol .current{
            background-color: red;
        }
        #arr{
	display: block;
        }
        #arr span{
	width: 30px;
	height: 40px;
	position: absolute;
	left: 14px;
	top: 156px;
	margin-top: -20px;
	background: #fff;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 30px;
	color: #000;
	opacity: 0.5;
	border: 1px solid #fff;
        }
        #arr #right {
	right: 18px;
	left: auto;
        }
.main{ width:1366px; min-height:590px; height:auto;overflow:hidden; margin:0 auto; }
.sleft{ width:380px; height:570px; float:left; margin-right:15px; }
.sleft .stitle{ width:370px; padding-left:10px; height:76px; padding-top:20px; background:#f8f8f8; margin-bottom:5px; }
.sleft .stitle p{ font-size:18px; color:#3c3c3c;}
.sright{ width:921px; padding:25px; height:540px; float:left; background:#f8f8f8}
.sright .box1{ width:921px; height:250px; }
.sright .box1 img{ width:440px; height:248px; float:right; margin-left:30px;}
.sbox1 .wen{ width:450px; float:left; margin-right:20px;}
.sbox1 h1{ color: #3c3c3c;
font-size: 24px;
width: 100%;
margin-bottom:20px;}
.sbox1 p{ display: block;
font-size: 16px;
width: 100%;
line-height:27px;}

.sright .sbox2{ width:921px; height:257px; margin-top:30px;}

.sright .sbox2 img{ width:447px; height:253px; float:left; margin-right:30px;}
.sbox2 .wen{ width:440px; float:left;}
.sbox2 h1{ color: #3c3c3c;
font-size: 24px;
width: 100%;
margin-bottom:20px;}
.sbox2 p{ display: block;
font-size: 16px;
width: 100%;
line-height:27px;}



.left{ width:380px; height:570px; float:left; margin-right:15px; }
.left .title{ width:370px; padding-left:10px; height:56px; padding-top:40px; background:#f8f8f8; margin-bottom:5px; }
.left .title h1{ font-size:36px; color:#141414; text-align:center; }
.right{ width:921px; padding:25px; min-height:540px; height:auto; overflow:hidden; float:left; background:#f8f8f8; color:#141414; font-size:18px; font-family:"微软雅黑"; line-height:36px;}
.right p{ text-indent:2em;}
.sheshi{ width: 940px;
height: 500px;}
.sheshi ul{ }
.sheshi ul li{ width: 290px;
height: 220px;
float: left;
padding: 10px;
text-align: center;}
.sheshi ul li img{ width:280px; height:185px;}
.sheshi ul li h1{ color:#141313; height:40px; font-weight:normal; font-size:24px;}
.lianxi{ width:700px; height:285px; margin-top:90px; margin-left:125px;}
.lianxi img{ width:264px; height:264px; float:left; margin-right:65px;}
.lianxi p{ color:#141414; height:40px; line-height:40px;}
.content{ width:100%; text-align:center; height:auto; overflow:hidden; margin:10px 0px;}
.zhuce{ width:590px; height:auto; overflow:hidden; margin:0 auto;}
.one{margin:10px 0}
.one label{width:100px;float:left;text-align:right;height:20px;line-height:40px}
.one input{border:1px solid #ccc;height:20px}.two{padding-left:100px}
.reda{color:red}.a2{width:100px;margin-left:5px;padding:2px;background:#ccc}
.error{background:#ccc url(../images/error.gif) no-repeat;padding-left:25px;padding-right:3px}
.righta{background:#ccc url(../images/righta.gif) no-repeat;padding-left:25px;padding-right:3px}
.btn{background: #ffb72f;
width: 50px;
border: none;
padding: 3px;
color: #fff;}
/*---bottom结束-----*/
.bottom{ width: 1366px;margin: 0 auto;margin-top: 20px; height:143px; background:#000000; }
.bottom img{float:right; margin-right:20px; margin-top:20px;}
.bottom .daoh{ color:#111111; width:700px; float:left; height:50px; margin-top:50px;}
.bottom .daoh ul{ }
.bottom .daoh ul li{ width:100px; height:50px; float:left;  font-size:18px; line-height:50px; background:url(../images/jiange.png) right no-repeat; text-align:center;}
.bottom .daoh ul li a{ color:#ebba20;}
/*---bottom结束-----*/

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

英雄联盟LOL静态HTML网页制作模板 DIV+CSS学生网页作品代码 游戏题材大学生网页设计作业下载
11-14
英雄联盟LOL学生网页设计作品：网页作品为DIV+CSS设计制作的单页面，简单做了CSS样式。DW初学者可使用。
[html5网页设计]英雄联盟lpl总决赛游戏网页设计大作业，hbuilder网页设计成品，dw网页设计成品模板，游戏网页设计带图片轮播，音乐，视频，注册登录表单。
猿猿网页设计
01-20 6863
html5学生英雄联盟lpl总决赛游戏网页设计大作业，hbuilder网页 原创2022-01-20 09:49·猿猿影视 html5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点：div布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码可以去猿猿设计官网下载，制作水平和原创度都适合学习或交作业用，记得点赞； 一般html5静态网页设计作业主题
课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip
07-07
课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 【资源介绍】 该项目是个人毕设项目，答辩评审分达到95分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。 该资源主要针对计算机、通信、自动化等相关专业的学生、老师或从业者下载使用，亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现不同的功能。
英雄联盟LOL静态HTML网页制作模板DⅣ+CSS学生网页作品代码游戏题材大学生网页设计作业下载
qq___365392777的博客
10-22 7192
HTML5期末大作业：动漫网站设计——迪斯尼公主(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满
HTML静态页面项目：英雄联盟官网网站 的实现
热门推荐
BIG BOSS的博客
07-03 1万+
效果： 源码与素材：链接: https://pan.baidu.com/s/1OuJd1lfEV7mrnf0I6FXm4A 提取码: 5c6j 复制这段内容后打开百度网盘手机App，操作更方便哦
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
08-10
该项目主要是一个基于HTML+CSS+JavaScript技术栈构建的前端网页设计项目，目标是模仿英雄联盟（League of Legends, 简称LOL）游戏官方网站的风格与功能。此项目旨在帮助学生理解和实践网页设计的基本原理和技术要点...
Unity和C#-游戏开发-LOL英雄联盟+源代码工程
08-11
Unity和C#-游戏开发-LOL英雄联盟+源代码工程
高分项目，基于Unity3D开发实现的LOL英雄联盟，内含完整源码+资源
最新发布
06-16
《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。《英雄联盟...
大学生游戏静态HTML网页设计 (HTML+CSS+JS仿英雄联盟网站15页)
VX_WJ88950106的博客
12-15 608
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
静态英雄联盟轮播图布局
知而好问，然后能才
05-17 4266
室友打了一局英雄联盟的时间，我居然学会了静态英雄联盟轮播图布局
HTML+CSS+JS+JQ实现LOL官网界面
08-19
HTML+CSS+JS+JQ实现LOL官网界面,大部分都实现了，比较逼真,课余时间做的，课余时间做的
HTML/CSS/JS仿英雄联盟网站.zip
12-21
有十一个游戏相关的网页，主页使用了js实现了轮播图效果和视频弹出播放的效果，登录部分使用js来验证用户和密码是否匹配（具体信息见js），其余部分的网页大部分都是网页布局的使用，对图片和文字的排版，大部分为网页外观的展示。
英雄联盟周边商城html静态网页
02-27
好看的静态网页，值得你拥有。好看的静态网页，值得你拥有。好看的静态网页，值得你拥有。好看的静态网页，值得你拥有。
一个静态html页面（游戏类官网主页）
01-26
html静态页面，游戏类官网页面，用bootstrap布局，html静态页面
html英雄联盟
12-16
这是用HTML和CSS写的英雄联盟官网的网页，对初学HTML的来说吧，是很有借鉴和学习的意义。
【无标题】
11-29 373
HTML5期末大作业：仙剑奇缘游戏网站设计——仙剑奇缘游戏页面(3页) 大学生手游网页作品 电竞网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下
仿英雄联盟网页HTML代码 学生网页设计与制作期末作业下载 大学生网页设计与制作成品下载 DW游戏介绍网页作业代码下载
HTML网页设计
08-01 970
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
简单静态网页
共勉
06-01 950
该网页分为俩大块，分别是导航与div块 导航栏 使用无序列表设置 css内容 .ul{ margin: 0; padding: 0; background: red; width: 100%; height: 80px; } .ul li{ list-style-type:none;<–列表无样式–> display: inline-block; <–列表内...
HTML5游戏网站源码：仿英雄联盟LOL前端设计
该资源是一个面向学生的Web前端大作业，主要使用HTML、CSS和JavaScript技术来仿制英雄联盟LOL游戏网站。作业包括多个页面，采用DIV+CSS布局，具有丰富的CSS排版，颜色鲜明，顶部导航和底部区域背景色为全宽。作品集...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT黑马程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值