期末前端web大作业：用DIV+CSS技术设计的动漫网站 ...

故事仍在南海 · 发表于 2022-12-28 13:54:34

> ⛵ 源码获取文末联系 ✈

Web前端开发技术 描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫网页设计成品模板 | 简单漫画网页设计成品 | HTML期末大学生网页设计作业

HTML：结构
CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

@TOC
<hr/>前端学习路线

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

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　 (2)二级页面：从首页点击进入之后的页面叫做二级页面 (3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的 首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名 导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用. 网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
<hr/>网页演示

在这里插入图片描述

在这里插入图片描述

HTML结构代码

<!DOCTYPE html>
<html lang=&#34;en&#34;>
<head>
<meta charset=&#34;UTF-8&#34;>
<meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;>
<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;>
<title>Document</title>
<link rel=&#34;stylesheet&#34; href=&#34;css/home.css&#34;>
</head>
<body>
<div>
   <div class=&#34;top&#34;>
      <div class=&#34;p-top1&#34;>欢迎来到火影忍者的世界</div>
      <div class=&#34;p-top2&#34;>NARUTO -ナルト-</div>
      <div class=&#34;box1&#34;><input type=&#34;text&#34; placeholder=&#34;漩涡鸣人&#34;><button>搜索</button></div>
      <div class=&#34;tu-top&#34;></div>
      <div class=&#34;box2&#34;><a href=&#34;zhuce.html&#34;>注册</a>|<a href=&#34;denglu.html&#34;>登录</a></div>
   </div>
   <div class=&#34;two-box&#34;>
      <div class=&#34;a1&#34;><a href=&#34;home.html&#34;>首&nbsp;页</a></div>
      <div class=&#34;a2&#34;><a href=&#34;zuozhe.html&#34;>作者介绍</a></div>
      <div class=&#34;a3&#34;><a href=&#34;renwu.html&#34;>人物介绍</a></div>
      <div class=&#34;a4&#34;><a href=&#34;boren.html&#34;>博人传</a></div>
   </div>
   <p class=&#34;p-xihuan&#34;>猜你喜欢-------------------------------------------------------------------------------------------------------- </p>
   <div class=&#34;xia-xian&#34;></div>
   <div class=&#34;three-box&#34;>
      <div class=&#34;zilaiye&#34;>
            <div class=&#34;three-tu1&#34;></div>
            <div class=&#34;zlaiy-zi&#34;><a href=&#34;&#34;>自来也</a></div>
      </div>
      <div class=&#34;kakaxi&#34;>
            <div><div class=&#34;three-tu2&#34;></div>
            <div class=&#34;kakaxi-zi&#34;><a href=&#34;&#34;>卡卡西</a></div>
      </div>
      <div class=&#34;minren&#34;>
            <div class=&#34;three-tu3&#34;></div>
            <div class=&#34;minren-zi&#34;><a href=&#34;&#34;>旋涡鸣人</a></div>
      </div>
      <div class=&#34;zuozhu&#34;>
            <div class=&#34;three-tu4&#34;></div>
            <div class=&#34;zuozhu-zi&#34;><a href=&#34;&#34;>宇智波佐助</a></div>
      </div>
</div>
<div class=&#34;four-box&#34;>
      <div class=&#34;blue1&#34;></div>
      <p class=&#34;biao1&#34;>剧情介绍--------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
</div>
<div class=&#34;juqing&#34;>
   <div class=&#34;shipin&#34;><video src=&#34;video/huoying.mp4&#34; controls autoplay=&#34;autoplay&#34; ></video></div>
   <div class=&#34;tou&#34;>带你们走进火影的世界</div>
   <div class=&#34;jieshao&#34;>《火影忍者》讲述的是：一个被四代封印九尾的小孩，遭受村子里人们的排斥，在自己的好老师伊鲁卡和一个爱迟到的卡卡西老师，还有两个小伙伴，一个背负着宇智波家族血债的天才――宇智波佐助，一个可爱的女孩春野樱的陪伴下他们一起踏上了自己的路程……
      我只看了一点，就被吸引了。那个被木叶村排斥的小孩――漩涡鸣人，他不怕别人的排斥，他一心想得到村子里人们的认同，为自己的火影梦想而奋斗着。那些同鸣人在一个忍者学校的人都瞧不起他，说他是“吊尾车”，鸣人非常愤怒，他要让人们知道，他会成为火影的。我明白了，他要认定目标努力攀登，他有那种执着的精神，在我们生活中有多少人能自己认定目标坚持不懈的人呢？
      人们做事时遇到一点困难就半途而废，不然就是哭哭啼啼，没有一中坚持不懈的精神，我们应该学习鸣人那种坚持不懈的精神。
      鸣人他也是一个非常珍惜友谊的人。
      记得动漫中卡卡西不是说过这样一句话吗：“为完成任务而不惜牺牲自己的伙伴的人是废物！”在鸣人他们那个小组就有一个为复仇而得到力量不惜离开自己的同伴的人――佐助。鸣人为了找会佐助想尽一切办法，有一点希望和线索都不会放过，所以，小樱也开始一点一点认同鸣人了。
      在我们身边有许多人都不珍惜友谊，为一点小事就吵翻了天，破碎了两人之间的友谊，想挽回时已经晚了，我们要维护两人之间的友谊，珍惜两人之间的友谊，也许他（她）会是你一生中最好的友人。
      《火影忍者》这部动漫的确有一种深沉的含义，我想，这就是岸本的写作技巧，你们也可以多看看哦！</div>
</div>
<div class=&#34;blue1&#34;></div>
<p class=&#34;biao1&#34;>角色形象--------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
      <div class=&#34;shui&#34;><p class=&#34;w2&#34;>
         <span class=&#34;w1&#34;>波风水门</span>----------------------（日本漫画《火影忍者》中的角色）</p>
         <div class=&#34;sidai&#34;></div>
         <div class=&#34;h-zi&#34;>
         <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;波风水门，日本漫画《火影忍者》系列及衍生作品中的角色。火之国木叶隐村的第四代火影，木叶三忍之一自来也的弟子，<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主角漩涡鸣人的父亲。实力强大，开发了螺旋丸，为保护村子使用尸鬼封尽封印九尾而牺牲。</p>
         <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在第四次忍界大战中一度被大蛇丸以秽土转生的形式复活，与同被复活的三位火影一起前往战场支援忍者联军。</p>
         <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用之前封印的阴九尾查克拉变身的九喇嘛模式帮助鸣人，与十尾人柱力带土和斑的对战中不幸被求道玉与六道禅杖切断双臂导致无法恢复。</p>
         <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后因鸣人被抽走尾兽将剩余的九尾查克拉传输给鸣人，但在传输过程中不幸被黑绝将阴性九尾查克拉吸收，大战结束后，灵魂回归净土。</p>
         </div>
         <div class=&#34;xx&#34;>
            <p><span class=&#34;w1&#34;>&nbsp;身份背景</span>----------------------波风水门（火影热门人物）</p>
            <div class=&#34;four-right&#34;>
                  <div class=&#34;baoliao&#34;>火影爆料--<br/>&nbsp;&nbsp;&nbsp;带你了解很多火影知识 </div>
                  <div><a href=&#34;&#34;><img src=&#34;images/touxiang.jpg&#34; class=&#34;zuozhe1&#34;><p class=&#34;zuozhe2&#34;>小熊一家&nbsp;动漫领域优秀作者</p></a></div>
                  <div><a href=&#34;&#34;><img src=&#34;images/baoliao.jpeg&#34; class=&#34;baoliao-tu&#34;><p class=&#34;bl1&#34;>想知道水门实力如何?<br/>来这里让我们一探究竟...</p></a></div>
            </div>
            <div class=&#34;bj&#34;>
                  <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;木叶隐村的第四代火影，在第三次忍界大战结束后不久继任。由于在战斗中常以速度取胜，而有着“黄色闪光”的称号，亦以此在忍界中扬名，
                  是第三次忍界大战中木叶的功臣之一。在以生命为代价封印九尾拯救村子后，被称之为守护木叶的英雄。</p>
                  <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有着宽容温厚的个性，是个阳光、帅气、温柔的男人。性格腼腆，但对待敌人时也会有严肃谨慎的一面。有点天然呆，
                     喜欢给招式起特别长的名字，因此在第四次忍界大战中，搞得二代火影千手扉间被水门所取名的忍术逗笑。</p>
                  <p class=&#34;w3&#34;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：“ミナト”通常对应的汉字为“港”、“凑”，
                     台湾东立及大陆中少动漫代理的正式译名为“凑”。香港地区以及部分大陆发行译制的动画与漫画当中则译为“皆人”。</p>
                  <p><span>相貌衣着:</span><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黄发蓝瞳，平时经常身穿写有“第四代火影”字样的白色火影袍、内衬上忍绿色马甲、蓝色紧身衣。</p>
            </div>
         </div>
   </div>
</div>
   <div class=&#34;wei&#34;>
      <p>版权所有&copy;xxx&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p>地址：xxx&nbsp;&nbsp;&nbsp;&nbsp;邮编：xxx&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p><a href=&#34;&#34;>联系客服</a></p>
   </div>
</body>
</html><hr/>学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光 —————————————————
<hr/>学习更多

关注我 | 点赞博文 | 每天带你涨知识
<hr/>

在这里插入图片描述

		自动登录	找回密码
密码			立即注册