72. 大学生HTML期末大作业 ―【英雄联盟游戏主题网页】 Web前端网页制作 html+css

码喜乐

于 2025-05-15 18:22:39 发布

阅读量1.1k

点赞数 42

分类专栏：无js 10-15页游戏文章标签：前端 html 课程设计 html5 css 游戏 javascript

本文链接：https://blog.csdn.net/2401_90084105/article/details/147989436

版权

无js 同时被 3 个专栏收录

22 篇文章

订阅专栏

10-15页

7 篇文章

订阅专栏

游戏

4 篇文章

订阅专栏

一、网页概述

本实例应用html+css、导航菜单、图片滚动、三级页面、留言表单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含15个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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=gb2312" />
<title>英雄联盟-LOL游戏特色站！欢迎喜欢LOL的朋友加入进来！</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body οnlοad="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它？');">
<center>
<div class="top">
<div id="page">

<div class="huanying">
<p>您好，欢迎来到英雄联盟特色游戏网！</p>
<span><a href="jieshao.html">英雄联盟介绍</a> <a href="lianxi.html">联系我们</a></span>

</div>


<div class="head">
<div class="headA"><img src="images/flashA.jpg" width="700" height="120" /></div>
<div class="headB">
<ul>

</ul>
</div>

</div>

<div class="clearit"></div>
<div class="hSpace10"></div>

<div class="content">

<div class="content_l">
<ul>
<li><a href="index.html">英雄联盟首页</a></li>
<li><a href="jieshao.html">英雄联盟介绍</a></li>
<li><a href="fenxi.html">游戏攻略</a></li>
<li><a href="guize.html">游戏规则</a></li>
<li><a href="tupian.html">英雄联盟图片</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
<div class="hSpace10"></div>
<div class="zuo"><img src="images/zuo.jpg" /></div>
</div>

<div class="content_r">

<div class="l_weibu">

<div class="jieshao">
<div class="jieshaoA"><h4>英雄联盟介绍</h4></div>
<div class="clearit"></div>
<p> 　 《英雄联盟》是由美国Riot Games开发的3D大型竞技场战网游戏，其主创团队是由实力强劲的Dota-Allstars的核心人物，以及暴雪等著名游戏公司的美术、程序、策划人员组成，将DOTA的玩法从对战平台延伸到网络游戏世界。除了DotA的游戏节奏、即时战略、团队作战外，《英雄联盟》拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素，让玩家感受全新的英雄对战。</p>
<p> </p>
<p>　　《英雄联盟》英文名：League of Legends，简称LOL。由DotA-Allstars原地图作者Steve Guinsoo（DotA主要开发者，DotA中的羊刀以其名字命名）担任游戏主创，DotA-Allstars社区创始人PenDragen加盟负责，同时还拥有曾任暴雪魔兽世界游戏策划、魔兽争霸3主策划、魔兽争霸3数值平衡师的Tom Cadwell担任主策。 </p>
</div>

...

2.CSS

代码如下（节选示例）：

/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
*{margin:0;padding:0;border:0;}
body { font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover{text-decoration:underline;}

ul,li{list-style-type:none;}
li a:hover{text-decoration:underline;}
object{margin:0;padding:0;border:0;}

.clearit{clear:both;}
.hSpace1 {height:1px;line-height:1px;overflow:hidden; clear:both;}
.hSpace5 {height:5px;line-height:5px;overflow:hidden; clear:both;}
.hSpace10 {height:10px;line-height:10px;overflow:hidden; clear:both;}
.hSpace5F {height:5px;line-height:5px; background:#FFFFFF;overflow:hidden; clear:both;}
.p5 {padding:5px;}
.borderU {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;}
.borderU_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;padding:5px;}
.borderH {border-right: 1px solid #75819e;border-left: 1px solid #75819e;}
.borderH_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;padding:5px;}
.line_X{background:url(images/lineX.gif) repeat-x; overflow:hidden; line-height:1px;}

#page{width:970px; margin:0 auto; background:#d9d9d9 }
.top{width:100%; padding-top:300px; background:url(images/top.jpg) no-repeat top center;}

.head{width:970px; margin:0 auto;}
.headA{width:700px; height:120px; float:left;}
.headB{width:270px; height:120px; float:left; background:url(images/headB.jpg) no-repeat;}
.headB ul li{text-align:center; color:#FFFFFF;}
.content{width:970px; margin:0 auto;}

.content_l{width:159px; float:left; background:#eaf2ff; }
.content_l ul li{width:159px; height:30px; display:block; font-weight:bolder; background:url(images/navA_bg.jpg) no-repeat; font-size:14px; line-height:30px; margin-top:10px;}
.content_l ul li a:hover{color:#091e9d;}
.content_r{width:801px; float:right;}

.l_weibu{width:398px; height:338px; border:1px solid #d5d5d5; float:left}

.dongtai{width:390px; height:145px; background:url(images/dongtai_bg.jpg) no-repeat; margin-top:4px;}
.dongtaiA h4{font-size:14px; font-weight:bolder;color:#091e9d; text-align:left; line-height:30px; margin-left:10px; float:left; display:inline}
.dongtaiA span{float:left; margin-left:10px; display:inline; line-height:30px;color:#091e9d;}

.dongtai ul{text-align:left; line-height:24px; padding-top:5px; margin-left:10px;}

.jieshao{width:390px; height:344px; background:#2b0208; }
.jieshaoA{width:100%; height:30px; overflow:hidden; border-bottom:1px solid #FFFFFF;}
.jieshaoA h4{font-size:14px; font-weight:bolder;color:#ffffff; text-align:left; line-height:30px; margin-left:10px; float:left; display:inline}
.jieshaoA span{float:left; margin-left:10px; display:inline; line-height:30px;color:#ffffff;}
.jieshao p{text-align:left; line-height:22px; width:368px; padding-top:5px; color:#FFFFFF}

.r_weibu{width:389px; height:338px; border:1px solid #d5d5d5; float:right}

.xundao{width:379px; height:282px; margin:0 auto;}
.xundao img{border:1px solid #000000; display:block;}

.mingxing{width:379px; height:52px; background:#2b0208;}
.mingxing ul{text-align:left; margin-left:20px; padding-top:5px;}
.mingxing ul li a{color:#FFFFFF;}

.nav{width:970px; height:25px; background:url(images/zhanshiA_bg.gif) no-repeat;}
.nav ul{ margin-left:120px;}
.nav ul li{display:block; float:left; width:100px; font-size:14px; font-weight:bolder; line-height:25px; margin-left:20px;}
.lianjie{width:970px; margin:0 auto; background:#eaf2ff; height:60px;}
.lianjie ul{ margin-left:160px;}
.lianjie ul li{width:100px; height:30px; border:1px solid #000000; background:#5c8be7; float:left; display:block; margin-left:20px; display:inline;font-size:14px; font-weight:bolder; line-height:30px;}

.huanying{width:970px; height:29px; background:url(images/huanying.gif) repeat-x;line-height:29px;}
.huanying p{float:left; line-height:29px;padding-left:10px; display:inline}
.huanying span{float:right; line-height:29px; padding-left:20px; background:url(../compic/shoucang_bg.gif) no-repeat left; margin-right:10px; display:inline}

.foot{width:970px; margin:0 auto; background:#eaf2ff; line-height:22px; padding:20px 0;}
.tuijian{width:796px; background:#ffffff}
.tuijianA{width:796px;height:37px; background:#2b0208;}
.tuijianA h4{font-size:14px; font-weight:bold; text-align:left; line-height:37px; padding-left:30px; color:#ffffff}
.tuijianB{border-bottom:1px solid #b2c7eb;border-left:1px solid #b2c7eb;border-right:1px solid #b2c7eb; padding:10px 0;}
.tuijianB img{border:1px solid #000000; float:left; margin-left:20px; display:inline; width:160px; height:113px;}

.new_r{width:801px; float:right;}

.new{width:780px; margin:0 auto;}
.new h1{font-size:16px; font-weight:bold; text-align:center; line-height:30px; padding:10px 0;}
.new_cont{text-align:left; line-height:24px; font-size:14px; padding-bottom:20px;}

.new_tu{text-align:left; line-height:24px; font-size:14px; padding-bottom:20px;}
.new_tu img{width:160px; display:block; padding:2px; border:1px solid #666666; float:left; margin-left:20px; display:inline;}

.erji{width:600px; margin:0 auto; overflow:hidden; padding-bottom:10px;}
.erji ul li{width:159px; height:30px; display:block; font-weight:bolder; background:url(images/navA_bg.jpg) no-repeat; font-size:14px; line-height:30px; float:left; margin-left:10px; display:inline; text-align:center;}
.erji ul li a:hover{color:#091e9d;}

...