游戏主题HTM5网页设计作业成品HTML静态网页作业

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

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

HTML结构代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/all.css" rel="stylesheet"  media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>游戏机</title>
</head>
<body>
<div class="banner"><img src="./img/banner.jpeg" width="100%" /></div>
<div class="menu">
  <ul class="center">
    <li><a href="index.html">首页</a></li>
    <li><a href="project.html">平台游戏</a></li>
    <li><a href="cellme.html">联系我们</a></li>
  </ul>
</div>
<div class="content">
  <div class="cc">
    <div class="produce" style="margin:20px;">
      <p>&ensp;&ensp;&ensp;&ensp;主机游戏,原名console game,又名电视游戏,包含掌机游戏和家用机游戏两部分。是一种用来娱乐的交互式多媒体。通常是指使用电视屏幕为显示器,在电视上执行家用主机的游戏。</p>
      <p style="height: 14px;"></p>
      <p>&ensp;&ensp;&ensp;&ensp;为了要游玩指定的游戏,你需要准备该款游戏所属的游戏主机(又称为“平台”)。主流的游戏主机还包括了任天堂的“Switch”、微软的“Xbox One”、索尼的“PlayStation 4”。
        任天堂原先代号“NX”的全新游戏机Nintendo Switch亮相,电视游戏主机与掌上游戏机“双机一体”。
        主机游戏相对于电脑游戏的特性是高配置游戏体验和独占游戏,同一时期电脑升级配置的价钱远高于一台家用游戏机的价格。另外,任天堂等游戏开发商会出品一些游戏的独占游戏以推动游戏机的销售。</p>
    </div>
	  <p align="center"><img src="img/title1.png" width="700" /></p>
  </div>
  <div class="bar">
    <h3>当前流行游戏主机</h3>
  </div>
  <div class="pics scrollleft" style="clear:both">
    <ul>
      <li>
        <div class="list-right"><img src="./img/title2.png" height="188px" alt=""></div>
        <div class="list-left">
          <h2> PlayStation 4</h2>
          <p>&ensp;&ensp;&ensp;&ensp;PlayStation 4是索尼电脑娱乐公司推出的家用游戏机。是PlayStation游戏机系列的第四代游戏主机,采用AMD Jaguar 8core处理器。2013年11月15日在北美地区开售 [1]  ,同年11月29日在欧洲、中部美洲、大洋洲、南非开始销售。2014年2月22日在日本发售。2015年03月20日在中国大陆发售。 </p>
          <p style="  margin-top: 20px;"><a class='xiangqing' href="./details1.html">查看详情</a></p>
        </div>
      </li>
      <li>
        <div class="list-right"><img src="./img/title3.png" alt=""></div>
        <div class="list-left">
          <h2>PlayStation 5</h2>
          <p>&ensp;&ensp;&ensp;&ensp;PlayStation 5(简称:PS5),指SONY推出的Playstation系列家用式游戏主机的第五代。
            2020年11月12日,索尼新主机PS5在北美、日本、澳大利亚等地上市,11月19日登陆其它市场。
            2021年2月8日,PlayStation中国宣布国行PS5将于2021年4月到6月期间上市。</p>
          <p style="  margin-top: 20px;"><a class='xiangqing' href="./details2.html">查看详情</a></p>
        </div>
      </li>
      <li>
        <div class="list-right"><img src="./img/title4.png" alt=""></div>
        <div class="list-left">
          <h2>Nintendo Switch</h2>
          <p>&ensp;&ensp;&ensp;&ensp;任天堂Switch(Nintendo Switch),简称NS,是任天堂公司于2017年3月发布的主机,采用家用机、掌机一体化设计。新机不锁区,支持1920*1080电视输出和1280*720掌上输出。港版2017年3月3日发售,台版12月1日发售,中国大陆版2019年12月4日由腾讯发售。</p>
          <p style="  margin-top: 20px;"><a class='xiangqing' href="./details3.html">查看详情</a></p>
        </div>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
</div>
</body>
</html>



学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识
相关问题可以相互学习,可关注↓公Z号


在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_65484028/article/details/127856435