HTML5期末考核大作业,足球网站制作——守望先锋(html+css)

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

K18JP-守望先锋带表单页(5页)

🧩 2.图片演示

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


四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>守望先锋</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-----头部开始------->
<div class="top">
<a href="index.html"><img  src="images/logo.jpg" /></a> 
</div>
<!---nav开始---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">守望简介</a></li>
<li><a href="yingxiong.html">经典英雄</a></li>
<li><a href="lianxi.html">联系我们</a></li>
<li><a href="huiyuan.html">会员登录</a></li>
</ul>
</div>
</div>
<!---nav结束---->
<!-----banner------->
<div class="banner">
<img  src="images/banner.jpg" alt="">
</div>


<!-----头部结束------->
<!-----main开始------->
<div class="main">
<div class="sleft">
<div class="stitle">

<p>守望先锋简介</p>
</div>
<img src="images/left-img.jpg" />
</div>
<div class="sright">
<div class="sbox1">
<div class="wen">
<h1>游戏背景</h1>
<p>&nbsp;&nbsp;21世纪20年代初,人类设计了由人工智能创造的智能机械(简称为智械),其旨在加强生产和创造世界经济繁荣。然而,令人难以置信的事情发生了,智械变得充满恶意,并开始大量生产军用机器人试图毁灭人类。各国政府未能阻止智能机械的进攻,因此联合国创建了一个国际维和组织,以反抗智能机械。汇集全世界最优秀最精英的组织被命名为"守望先锋",其将围绕机器人军队展开一场实力不对称的战争。</p>
</div>
<img src="images/ri01.jpg" />
</div>
<div class="sbox2">
<img src="images/ri02.jpg" />
<div class="wen">
<h1>物品道具</h1>
<p>随着玩家不断完成一场又一场的比赛 ,无论输赢玩家都会获得经验值并升级。每次升级之后,玩家都将获得一份补给,其中包括最多4件外观装饰物品或游戏内货币,物品品质被分为白色、蓝色、紫色和金色四种。当玩家完成了一些特殊成就后将获得成就点数以及特殊的成就徽章。玩家可以在成就页面查看玩家的成就以及徽章信息,同时也可以了解玩家自己的玩法和技能水平。玩家可以通过主菜单的浏览生涯概况选项和玩家的朋友分享这些成就,特殊的成就用于解锁特定的物品。</p>
</div>
</div>

</div>

</div>

<!-----main结束------->
<!-----bottom开始------->
<div class="bottom">
<div class=" daoh">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">守望简介</a></li>
<li><a href="yingxiong.html">经典英雄</a></li>
<li><a href="lianxi.html">联系我们</a></li>
<li><a href="huiyuan.html">会员登录</a></li>
</ul>
</div>
<img src="images/logo2.jpg" />
</div>

<!-----bottom结束------->
</body>
</html>




🏠CSS样式代码


@charset "utf-8";
/* CSS Document */

body {
	margin: 0 auto;
	font-size: 12px;
	font-family: "宋体",arial;
	line-height: 22px;
}


.lianxi p {
	color: #141414;
	height: 40px;
	line-height: 40px;
}

.content {
	width: 100%;
	text-align: center;
	height: auto;
	overflow: hidden;
	margin: 10px 0px;
}

.zhuce {
	width: 590px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}

.one {
	margin: 10px 0
}

.one label {
	width: 100px;
	float: left;
	text-align: right;
	height: 20px;
	line-height: 40px
}

.one input {
	border: 1px solid #ccc;
	height: 20px
}

.two {
	padding-left: 100px
}

.reda {
	color: red
}

.a2 {
	width: 100px;
	margin-left: 5px;
	padding: 2px;
	background: #ccc
}

.error {
	background: #ccc url(../images/error.gif) no-repeat;
	padding-left: 25px;
	padding-right: 3px
}

.righta {
	background: #ccc url(../images/righta.gif) no-repeat;
	padding-left: 25px;
	padding-right: 3px
}

.btn {
	background: #ffb72f;
	width: 50px;
	border: none;
	padding: 3px;
	color: #fff;
}
/*---bottom结束-----*/
.bottom {
	width: 1366px;
	margin: 0 auto;
	margin-top: 20px;
	height: 143px;
	background: #000000;
}

.bottom img {
	float: right;
	margin-right: 20px;
	margin-top: 20px;
}

.bottom .daoh {
	color: #111111;
	width: 700px;
	float: left;
	height: 50px;
	margin-top: 50px;
}

.bottom .daoh ul {
	padding:0px;
}

.bottom .daoh ul li {
	width: 100px;
	height: 50px;
	float: left;
	font-size: 18px;
	line-height: 50px;
	background: url(../images/jiange.png) right no-repeat;
	text-align: center;
}

.bottom .daoh ul li a {
	color: #ebba20;
}
/*---bottom结束-----*/







五、🎁更多源码

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

STU学生网页设计

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

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

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

打赏作者

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

抵扣说明:

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

余额充值