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

最新推荐文章于 2024-06-03 11:00:00 发布

html5网页设计

最新推荐文章于 2024-06-03 11:00:00 发布

阅读量383

点赞数

分类专栏： web前端期末大作业文章标签：前端 html 游戏 css javascript

本文链接：https://blog.csdn.net/qq_38514354/article/details/127237577

版权

web前端期末大作业专栏收录该内容

1111 篇文章 81 订阅

订阅专栏

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

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;
}

五、🎁更多源码

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

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

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

html5网页设计

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
游戏网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
复制链接

扫一扫