🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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> 近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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
