pg下载通道 关于游戏介绍的HTML网页设计 【html网页设计】 HTML静态游戏网页作业 web前端开发技术 web课程设计 网页规划与设计

频道：游戏专题 日期： 浏览：1

【作者主页——获取更多优质源码】

【学习资料/简历模板/面试资料/ 网站设计与制作】

# 一、网站题目，涉及游戏官网，还有游戏网站以及电竞游戏之游戏介绍等方面网站的设计与建设。二、网站描述。

页面里有，Div 加之 CSS，鼠标滑过时的特效，Table，导航栏呈现出的效果，banner，表单，二级以及三级页面等，视频音频方面的元素，与此同时设计出品了 logo（源文件），基本把期末作业所需要的知识点全部覆盖了。

一套A+的网页应该包含 (具体可根据个人要求而定)

要将页面划分成四大部分，分别是页头，菜单导航栏，最好是那种可以进行下拉操作的，中间内容板块，以及页脚。所有这些页面之间相互存在超链接，能够直达三级页面，由5至10个页面共同组成。页面的样式风格要保持统一，布局呈现正常状态，不会出现错乱情况，运用Div+Css技术来达成。菜单要具备美观且醒目的特点pg下载官方版打开即玩v1022.速装上线体验.中国，二级菜单能够正常弹出并且实现跳转。还需要有JS特效，像是定时切换以及手动切换图片轮播。页面当中包含多媒体元素，比如说gif，视频，音乐，同时运用表单技术。页面要做到清爽，美观pg下载，大方，彼此之间不会雷同。而且不能只是单纯地将用户所要求的那些内容给呈现出来，并且还得去满足布局方面良好，界面方面美观，配色方面优雅，表现形式方面多样等一系列要求，三、网站介绍。

布局于网站方面pg下载麻将胡了A.旗舰厅进体育.cc，计划采用当下主流的，可兼容各大主流浏览器的，使之显示效果稳定的浮动网页布局结构。

于网站程序这一方面，打算运用当下最新的网页编程语言，也就是 HTML5 还有 CSS3 以及 JS 程序语言，去达成网站的功能设计。并且要保证网站代码能够兼容当前市面上全部主流浏览器，以此来实现打开之后就能够立刻看到网站的效果。

对于网站素材而言，有着这样的规划，要去收集出自各大平台的，具备好看特质的图片素材，接着要精心筛选出契合网页风格的图片，随后运用PS制作出符合网页尺寸的图片。

于网站文件相关情况而言，网站系统文件所涵盖的种类有，html层面的网页结构文件，以及css方面的网页样式文件，还有js范畴的网页特效文件，另外包含images领域的网页图片文件。

关于网页编辑这块儿，网页作品的代码是简单的，能够运用随便哪一款HTML编辑软件，像是Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等随便哪一款html编辑软件去开展运行以及修改编辑等相关操作。

其中：

其中，index.html属于首页，被包含在html文件里，其他html作为二级页面，同样被包含在html文件里。

（2）css文件所涵盖的有，全流程的css用于页面样式呈现、包含文本滚动的样式、以及涉及图片放大的样式等。

（3）js文件涵盖，js对动态轮播特效的实现，表单提交功能，点击事件等等，在个别网页当中运用到了js代码。

四、网站效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

五、 网站代码 HTML结构代码


DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>主页title>
   <link rel="stylesheet" href="css/index.css">
   <script src="js/index.js" charset="gb2312">script>
   <script src="js/comment.js" >script>
 head>
 <body>
 <embed src="audios/attack.mp3" width=0 height=0 type=audio/mpeg loop="true" autostart="true" volume="0">embed>		
 <div id="container">				
		<div id="header">			
		<div id="logo">div>		
		<div id="select_search">	
			<table height="80px" align="right" >
				<tr align="right">
					<td colspan="4">
						<select id="sel">
							<option selected>简体中文option>
							<option >繁体中文option>
							<option >Englishoption>
						select>
					td>
				tr>
				<tr align="right">
					<td><font size="2">关键词:font>td>
					<td><input type="text" size="25">td>
					<td><input type="image" src="images/搜索.png">td>
				tr>
			table>
		div>
	div>
	<div id="nav">		
		<table>
			<td ><a href="index.html">首页a>td>
			<td ><a href="game_introduction.html">游戏介绍a>td>
			<td ><a href="game_tips.html">游戏攻略a>td>
			<td ><a href="toy.html">手办商城a>td>
			<td ><a href="survey.html">问卷调查a>td>
			<td ><a href="join.html">加入我们a>td>
			
		table>
	div>
		<div id="bao">		
		<div id="photo">
			<img src="images/a.png" >
			<img src="images/b.png" >
			<img src="images/c.png" >
			<img src="images/e.png" >
			<img src="images/f.png" >
		div>
	div >
	
	<div id="main">		
		<div id="left">		<
			<img src="images/游戏资料.png" width="262ox" height="50px">
			<ul>
				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=518558">打野位置能拿MVP的不传之秘！<a> 2021-05-09li>
				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519143">新版梦奇铭文出装玩法全解析<a> 2021-05-09li>
				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519427">如何理解斩杀线与控血概念？<a> 2021-05-09li>
				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=512793">李白刮痧，操作太难,试试兰陵王<a> 2021-05-09li>
				<li><a href="https://pvp.qq.com/v/detail.shtml?G_Biz=18&tid=719852&e_code=pvpweb.dpvlist.r4">“红烧流”庄周<a> 2021-05-09li>
				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=362130">你强任你强，墨子东皇加张良<a> 2021-05-09li>
			ul>
		div>
		<div id="center">	
			<marquee onmouseover="this.stop()" onmouseout="this.start()">
				<img src="images/滚1.png" border="0" width="400px" height="230px">
				<img src="images/滚2.jpg" border="0" width="400px" height="230px">
				<img src="images/滚3.jpg" border="0" width="400px" height="230px">
				<img src="images/滚4.jpg" border="0" width="400px" height="230px">
				<img src="images/滚5.png" border="0" width="400px" height="230px">
			marquee>
		div>
		<div id="right">		
			<img id="ri" src="images/欢迎登录.png" width="250" height="50px"><br/>
			<form action="" id="fo">
				<table align="center" class="register">
					<tr>
						<td>用户名td>
						<td><input type="text" id="user01" maxlength="11" placeholder="请输入您的用户名" required/>td>
						<td ><input type="submit" value="登录">td>
					tr>
					<tr id="fot">
						<td>密码td>
						<td><input type="password" id="password01" maxlength="16" placeholder="请输入密码......" required/>td>	<td><input  type="reset">td>
					tr>
				table>
			form> 
			<div class="wjmmzczh">
				<a href="#" >忘记密码a>
				<a href="register.html" id="zc">注册账号a>
			div>
		div>
	div>	
	<div id="comment">		
		<h2 >留言板h2>
		<hr size="2px" color="#b5b5b5" width="990px" align="left">
		<form>
			<table align="center">
				<tr>
					<td>用户名：td>
					<td><input type="text" id="n"/>td>
					<td>Wechat：td>
					<td><input type="text" id="x"/>td>
					<td>留言时间：td>
					<td><input type="text" id="t" placeholder=""/>td>
				tr>
				<tr>
					<td >留言内容：td>
					<td colspan="5"><textarea id="txt" cols="100" rows="3" placeholder="评论的时候，请遵纪守法并注意语言文明">textarea>td>
              
				tr>
				<tr >
					<td colspan="2"><input type="submit" value="提交留言" onclick="check()">th>
					<td colspan="2"><input type="reset" value="重置内容">th>
				tr>
			table>
		form>
	div>
	<div id="footer" >
		<p class="p1">太原科技大学 ©  <span> 经济与管理学院span> 电子商务02班 p>
		<p class="p2">2021.11.20 李一鸣 201816010205p>
	div>
 div>
  
 body>
html>

CSS样式代码


*{
	font-family:楷体;
}
#container{
	width:990px;
	margin:0 auto;			
	padding:0 auto;font-size:12px;
}
#header{			
	width:990px;
	height:80px;
}
#logo{
	width:690px;
	height:80px;
	float:left;
	background:#FFFFFF url("../images/背景头.jfif") no-repeat left bottom;
	background-size: auto;
	
	
}
#select_search{
	width:300px;
	height:80px;
	font-size:20px
	background:#FFFFFF;
	float:left;
}
#nav{				
	clear:both;
	width:990px;
	height:40px;
	font-size:18px;
	background-image:url("../images/导航背景.png")
}
#nav a:hover{
	color:#Bf0000;
	text-decoration:none;
}
#nav td{
	width:165px;
	height:40px;
	text-align:center;
	vertical-align:middle; 
}
table{
	line-height:1.5em
}
#bao{					
	width: 990px;
	height: 500px;
	overflow: hidden;
}
#photo {			
	width: 5940px;
	animation: switch 15s ease-out infinite;
}
#photo > img {
	float: left;
	width: 990px;
	height: 500px;
}
@keyframes switch {
	0%, 5% {
		margin-left: 0;
	}
	20%, 30% {
		margin-left: -990px;
	}
	40%, 55% {
		margin-left: -1980px;
	}
	60%, 75% {
		margin-left: -2970px;
	}
	85%, 100% {
		margin-left: -3960px;
	}
}
#main{			
	width:990px;
	height:230px;
	border-bottom:5px ridge #DEDEDE;
	float:left;
	clear:both
}
#left{		
	width:260px;
	height:230px;
	background:#EEFFDD;
	float:left;
	background-image:url("../images/left背景.png")
	
}
a:link,a:visited,a:active{
	text-decoration:none;
}
a:link,a:visited,a:active{
	color:#828282;
}
ul{
	list-style:none;
	padding-left:10px;
	line-height:1.8em
}
#left li{
	border-bottom:1px dotted #009900;
}
#left a:hover{
	color:#Bf0000;
	text-decoration:underline
}
#center{		
	width:480px;
	height:230px;
	float:left;
	
	background-image:url("../images/滚底.png")
}
#right{		
	width:250px;
	height:230px;
	background:#EEFFDD;
	float:left;
	background-image:url("../images/right背景.png")
}
.register{	
	flex: 40%;
	padding-top: 20px; 
}
.wjmmzczh{
	padding-left: 50px;
	padding-top: 20px;
}
#zczh{
	padding-left: 50px;
}
#biaodan{
	padding-top: 20px;
}
h2{
	font-size:30px;
	font-family:宋体;
	font-style:bolder;
	color:#ffff00;
	margin:0
}
#comment{		
	clear:both;
	width:990px;
	height:210px;
	background-image:url("../images/留言底.jpg");
	float:left
}
input{ 
	vertical-align: middle;
} 
#footer{			
	clear:both;
	width:990px;
	height: 60px;
	background: #330033;
	text-align: center;
	line-height: 10px;
	float:left
}
#footer p{ 
	color: #ffff00;
	font-size: 15px;
	opacity: 0.7; 
}
.p1{ 
	margin: 0;
	padding: 15px 0 5px 0;
}
.p2{ 
	margin: 0;
	padding: 5px 0;
}
#footer span{
	color: #aaffff;
}

六、 如何让学习不再盲目

不少才刚开始接触编程的新手小白，虽说学了基础语法，然而却不清楚语法的用途所在，不晓得怎样去加深脑海中的印象，也不知道该如何提高自身水平 ，在这样的时候，每天自己主动去刷一些题目就显得极为重要（百炼成神），能够前往牛客网上的编程初学者入门训练。这个专题处于编程入门范畴，适合刚刚学完语法的小白去做练习 ，题目涵盖编程基础语法，基本结构等等 ，每一道题目都配备练习模式和考试模式 ，既能够还原考试模式来进行模拟 ，又可以经由练习模式来展开练习。

网友留言（0）

评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。