游戏网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

article/2025/9/25 7:21:35

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示

H33JP- 开心消消乐 5页

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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>

🏠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;
}
dl{width:50%;float:left;margin-top:20px;
}
dl dt{float:left;font-weight:bolder;color:#666;width:100px;text-align:center;line-height:35px;border-bottom:dashed #000 1px;
}
dl dd{line-height:35px;border-bottom:dashed #000 1px;
}
table{border-top:solid #333 1px;border-left:solid #333 1px;
}
th,td{border-bottom:solid #333 1px;border-right:solid #333 1px;
}
th{background-color:#CCC;line-height:30px;
}