Web大学生网页作业成品——游戏永劫无间网页网站设计与实现(HTML+CSS)(3个页面)

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。🎉🎉🎉


一、作品介绍 🔥

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有3个页面

二、作品演示 ☁️

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

三、代码目录 🏠

在这里插入图片描述

四、网站代码 👿

HTML部分代码

<div id="app" class="wrapper">
			<!-- 头部 -->
			<div class="header">

				<div class="logo">
					<img src="./images/logo.png">
				</div>
				<div class="nav">
					<a href="index.html" class="active">游戏首页</a>
					<a href="tupian.html">精彩图片</a>
					<a href="form.html">问卷表单</a>
				</div>
			</div>

			<div class="banner">
				<img src="./images/banner.jpeg">
			</div>
			<div class="main">

				<h2>游戏背景</h2>
				<p>
					世界本是一团混沌,后来从混沌的中心萌生了一个种子。随着种子的长大,混沌双分,产生了阴阳二气,世界被阴阳二气重构。阴阳二气中孕育了太初时期的两个古神,“阳极真神”金乌和“阴极真神”烛龙。在聚窟洲——世界的中心,原初之种长成了一株连通天地的巨树,名为扶桑,阳神金乌就栖息在它的树冠上,而阴神烛龙则盘踞在巨树的根部。两位古神因为力量本质的不同而不断地交战。每一次的交战都会导致两个古神同归于尽。神战波及下,除被扶桑庇护的聚窟洲外,世界上的所有生命都会灭亡。每次神战后,两个古神消散的肉身也会回归世界,滋养着万物的重生。当阴阳二神再一次的魂魄凝聚、肉身复原后,它们又会重复之前的战争,导致世界一直在永劫之中。
				</p>
				<h2>游戏角色</h2>
				<table border="1">
					<tr>
						<td><img src="./images/1.jpg"></td>
						<td>
							<h4>季沧海</h4>
							<p>
								举杯痛饮,人生尽欢。烈豪这称号的背后,是他洒脱不羁的脾性,也是他遇强则强的豪情。纵然命运之路沉重难行,但他将依旧挥刀向前。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/2.jpg"></td>
						<td>
							<h4>迦南</h4>
							<p>
								风沙淬炼,让她迅捷如沙漠的黑鹰;古教秘传,又使其虚幻如古城的鬼魅。她是曼妙的刺客,也是权贵的梦魇。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/3.jpg"></td>
						<td>
							<h4>特木尔</h4>
							<p>
								苍狼的血脉再度长啸之时,草原上的风暴便会肆虐。先祖的传说刻在脑海,伟大的荣光就在眼前。来自草原上的狼,将再度狂奔。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/4.jpg"></td>
						<td>
							<h4>赤练无明·宁红夜</h4>
							<p>
								西出昆仑的盲剑客,美丽危险的赤练蛇。对于宁红夜这样的强者而言,剧毒早已刻入血脉,利刃则永不离身边。而被遮蔽的双眼,将在宿命来临时再次凝视世界。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/5.jpg"></td>
						<td>
							<h4>土御门胡桃</h4>
							<p>
								日轮之花,天才阴阳师,继承古老传承的大小姐。为了探寻天地秘密,掌握阴阳术的终极,胡桃离家出走,踏上了她新的旅程。
							</p>
						</td>
					</tr>
				</table>
			</div>
			<!-- 底部 -->
			<div class="footer">
				<div>
					永劫无间 版权所有
				</div>
			</div>
		</div>


五、如何学习网页制作 ❤️

🙋很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深印象,不知道如何提升自己,可以去看一些视频教程,跟着视频一起学习代码,切记一定要自己手动敲一遍代码,不然就算当时看视频学会也会很容易忘记。

六、源码获取 🏫

🥇1、 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁2、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0188

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我可以帮你生成一个介绍永劫无间英雄的网页。以下是基本的 HTMLCSS 代码: HTML 代码: ```html <!DOCTYPE html> <html> <head> <title>永劫无间英雄介绍</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>永劫无间英雄介绍</h1> </header> <main> <section> <h2>游戏背景</h2> <p>永劫无间英雄是一款多人在线战斗竞技游戏,背景设定在一个古老的世界中,玩家可以选择不同的英雄角色,与其他玩家进行激烈的战斗。</p> </section> <section> <h2>游戏特点</h2> <ul> <li>多种英雄角色可供选择,每个角色都有独特的技能和属性。</li> <li>游戏地图多样化,包括城镇、森林、沙漠等等。</li> <li>游戏画面精美,音效逼真。</li> <li>支持多人在线游戏,可与其他玩家进行实时对战。</li> </ul> </section> <section> <h2>游戏截图</h2> <img src="game-screenshot.jpg" alt="永劫无间英雄游戏截图"> </section> </main> <footer> <p>版权所有 © 2021 永劫无间英雄</p> </footer> </body> </html> ``` CSS 代码: ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } h1 { margin: 0; font-size: 36px; } main { max-width: 800px; margin: 0 auto; padding: 20px; } section { margin-bottom: 30px; } h2 { font-size: 24px; margin-bottom: 10px; } ul { margin: 0; padding: 0; list-style: none; } li { margin-bottom: 10px; } img { max-width: 100%; height: auto; display: block; margin: 0 auto; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 以上代码会生成一个简单的介绍永劫无间英雄的网页,包括游戏背景、游戏特点和游戏截图。你可以将代码保存为 HTMLCSS 文件,然后在浏览器中打开 HTML 文件来查看效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱码网页

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值