521.开心消消乐游戏主题网页大学生期末大作业 Web前端网页制作 html+css+js_结合html css 与javascript,制作双击就能运行的网页版消消乐。-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/142709501

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css，div+css布局，代码简单，；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含5个页面：

三、网页效果

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

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>开心消消乐</title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<body>
   <div class="page">
   <ul class="nav">
   <a href="index.html"><li>主页</li></a>
<a href="sheding.html"><li>单位设定</li></a>
<a href="guize.html"><li>游戏规则</li></a>
<a href="daoju.html"><li>物品道具</li></a>
<a href="tese.html"><li>特色系统</li></a>
</ul>
<div class="banner"><img src="images/banner.jpg"></div>
<div class="mid">
    <h1>开心消消乐</h1>
<div class="wz">
   <p>《开心消消乐》是一款乐元素研发的一款三消类休闲游戏。2013年8月，正式在网页版上线，在2014年8月推出了安卓版本和IOS版本。</p>
   <p>游戏以救村长为目的，玩家开始了一段开心的闯关旅程。</p>
   <p>在2015年《开心消消乐》荣获玩家最喜爱的移动单机游戏奖。</p>
   <p>2020年12月，乐元素《开心消消乐》公益特别活动，获得第十五届人民企业社会责任奖公益案例奖。</p>
<img src="images/t1.jpg">
   <dl>
   <dt>中文名</dt>
   <dd>开心消消乐</dd>
   <dt>游戏类型</dt>
   <dd>休闲益智</dd>
   <dt>游戏平台</dt>
   <dd>iOS、Android、PC</dd>
   <dt>所属系列</dt>
   <dd>休闲益智</dd>
   <dt>地    区</dt>
   <dd>中国</dd>
   <dt>发行日期</dt>
   <dd>2013年8月（PC版）</dd>
<dt>-</dt>
   <dd>2014年初（iOS版及Android版）</dd>
   <dt>内容主题</dt>
   <dd>消除类</dd>
   <dt>玩家人数</dt>
   <dd>单人</dd>
   </dl>
   <dl>
   <dt>游戏分级</dt>
   <dd>4+（App Store）</dd>
   <dt>最新版本</dt>
   <dd>安卓版：1.73</dd>
<dt>-</dt>
   <dd>IOS版：1.1.25</dd>
   <dt>发行阶段</dt>
   <dd>正式版</dd>
   <dt>结局数</dt>
   <dd>无</dd>
   <dt>主要角色</dt>
   <dd>小熊、小鸡、青蛙、狐狸</dd>
<dt>-</dt>
<dd>、猫头鹰、河马、魔力鸟</dd>
   <dt>IOS版大小</dt>
   <dd>iPhone：121MB；iPad：127MB</dd>
   <dt>系    统</dt>
   <dd>android 2.2以上</dd>
   </dl>
</div>
<h2>背景设定</h2>
<div class="wz">
   <p>一天晚上，天空中掉下一颗神奇的豌豆种子，正好落在了梦之森林的村长屋附近，种子落地后吸收了池塘的水分，迅速成长，一夜之间变成参天大藤蔓…… 第二天早上，村民们醒来后看到巨大的藤蔓都惊呆了，聚在一起议论纷纷。有人说他似乎看到村长的房子在高耸入云的藤蔓上，房子似乎还在上升，有人号召说应该爬上去救村长，玩家需要爬到藤曼顶部救出村长。</p>
<img src="images/t2.jpg">
</div>
</div>
<div class="foot">Copyright © 开心消消乐</div>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
body, p, h1, h2, h3, h4, h5, table, ul, li, form, input {
   margin: 0;
   padding: 0;
   color: #000;
   font-family: Arial, Helvetica, sans-serif;
}
body{
   background:url(../images/bj.jpg) no-repeat center;
   background-attachment:fixed;
   font-size:12px;
}
a {
   color:#FFF;
   text-decoration: none;
   border: none;
   padding: 0;
   margin: 0;
}
img {
   border: 0;
   margin: 0;
   padding: 0;
}
ul, li {
   list-style: none;
   border: 0;
   margin: 0;
   padding: 0;
}
.clear {
   clear: both;
}
.page{
   width:960px;
   margin:30px auto;
   padding:20px;
   overflow:hidden;
   background-color:rgba(255,255,255,0.8);
   border-radius:10px;
   box-shadow:0 0 10px 5px #333;
}
.nav{
   width:750px;
   margin:20px auto;
   overflow:hidden;
}
.nav li{
   float:left;
   width:100px;
   margin:0 24px;
   font-size:14px;
   text-align:center;
   line-height:35px;
   border:solid #000 1px;
   transition-property:color,background-color;
   transition-duration:0.5s;
}
.nav li:hover{
   color:#FFF;
   background-color:#000;
}
.mid{
   width:100%;
   padding:35px 0;
   overflow:hidden;
}
.foot{
   text-align:center;
   font-size:14px;
   color:#333;
   line-height:35px;
   margin-top:10px;
}
h1{
   text-align:center;
   font-size:38px;
   margin:50px 0;
}
h2{
   text-indent:1em;
   margin:40px 0;
}
.wz{
   width:96%;
   padding:2%;
   text-align:center;
   overflow:hidden;
}
.wz p{
   line-height:35px;
   text-indent:2em;
   font-size:12px;
   margin:20px 0;
   text-align:left;
}
.wz h3{
   text-align:left;
   font-size:18px;
   font-weight:normal;
   margin-bottom:20px;
}