期末前端web大作业:用DIV+CSS技术设计的动漫网站——火影忍者6页 带报告

news2025/2/23 18:16:42

源码获取 文末联系

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

  1. HTML:结构

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

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

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

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

网页基本结构

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

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


网页演示

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

HTML结构代码



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


学的反而越迷茫

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

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

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

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


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/28814.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习第四课——卷积神经网络(week 1)

目录 一、前言 1.1 卷积 1.2 其他滤波器 1.3 Padding 1.3.1 解释 1.3.2 填充多少像素的选择 1.4 卷积步长 1.5 三维卷积 1.6 单层卷积网络 1.7 深度卷积神经网络的一个示例 1.8 池化层 1.8.1 最大池化 1.8.2 平均池化 1.8.3 总结 1.9 卷积神经网络示例 1.10 为…

23种设计模式

1.创建型模式 ① 创建型模式的作用就是创建对象&#xff0c;说到创建一个对象&#xff0c;最熟悉的就是 new 一个对象&#xff0c;然后 set 相关属性 ② 但是很多场景下&#xff0c;需要给客户端提供更加友好的创建对象的方式&#xff0c;尤其是那种我们定义了类&#xff0c;但…

leetcode:644. 子数组最大平均数 II【浮点数二分 + 子数组最大平均值技巧】

目录题目截图题目分析ac code总结题目截图 题目分析 枚举铁超时&#xff0c; 10 ** -5考虑二分平均值需要同时考虑总和和长度能否只考虑一个考虑每个数num’ num - avg这样可以忽略长度猜一个guess_avg是否可能达到num’ -> num - avg_guess区间sum(num’) > 0说明其真…

Linux 开机运行sh 脚本 三种方法

一、修改开机启动文件​​​​​​​ /etc/rc.local&#xff08;或者/etc/rc.d/rc.local&#xff09; 1、编辑rc.local文件&#xff08;命令后面让得加&号&#xff0c;表示后台运行&#xff09; 2、最后修改rc.local文件的执行权限&#xff1a; chmod x /etc/rc.local二…

实践历练的力量

要让你的屁股和椅子建立起深刻的友谊来&#xff0c;要坚持下来。 掌握知识离不开实践和做&#xff0c;只有经历了这样的过程才能将知识转换为自己的。也才能真正明白在什么环境下需要什么样的知识。 解决问题。 真正的学习一定包括实践&#xff0c;而实践是更重要的学习。学…

【sfu】接收侧拼装H264 帧后的回调流程

sfu 基于webrtc协议栈,【sfu】rtc 入口 预先分配了资源,并创建了adpter模块和call模块。【webrtc】rtp包组帧 :涉及到收到rtp包到组帧、传递给Frame处理直到解码器的流程。帧就是从解码器导出的。我们只需要注册1个外部解码器就可以拿到编码后的H264 帧,给到其他流程处理。接…

【JVS低代码开发平台】支持纯手工配置的数据加工、处理、展现的数据仓库

数据智仓英文名称为Smart Data Warehouse&#xff0c;可简写为SDW。数据智仓是JVS整体企业数字化解决方案的核心能力&#xff0c;与JVS的低代码开发套件平级&#xff0c;如下图所示&#xff1a; 数据仓库的目的是构建面向分析的集成化数据环境&#xff0c;为企业提供基于数据的…

SOLIDWORKS 2023新功能揭秘!升级版轻松找到材料明细表修改

SOLIDWORKS 2023版本已经与大家见面&#xff0c;今天众联亿诚继续和大家分享SOLIDWORKS 2023 工程图的亮点新功能之一&#xff1a;材料明细表的覆盖。 材料明细表的覆盖 SOLIDWORKS工程图是我们常用的功能之一。当采用断开链接模式修改材料明细表的内容时&#xff0c;修改的内容…

【强化学习论文合集】AAAI-2022 强化学习论文 | 2022年合集(二)

强化学习(Reinforcement Learning, RL),又称再励学习、评价学习或增强学习,是机器学习的范式和方法论之一,用于描述和解决智能体(agent)在与环境的交互过程中通过学习策略以达成回报最大化或实现特定目标的问题。 本专栏整理了近几年国际顶级会议中,涉及强化学习(Rein…

【web前端期末大作业】HTML+CSS宠物狗静态网页设计

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

2.18 小红书的表情文案一键生成,原来这么简单【玩赚小红书】

想知道小红书的表情文案是怎么生成的&#xff0c;比如这种&#xff1a; 情人节走心 高调仪式感浪漫小 机&#xff01; 式秀恩爱&#xff0c;不如比比谁更走心&#xff01;❤️ EVERYDAY7️⃣彩⭐期裤 高浓度释放爱意讯号~ 今年情 节&#xff0c;大胆直接的爱意让他抱个 怀&…

【爬虫】Python爬取世界杯球员榜单并保存到excel经验分享

大家好 我是Yhen 今天给大家分享一下 如何爬取卡塔尔世界杯球员榜 数据来源&#xff1a;百度体育 https://tiyu.baidu.com/match/%E4%B8%96%E7%95%8C%E6%9D%AF/tab/%E7%90%83%E5%91%98%E6%A6%9C/current/0 文章目录一.需求分析二.思路分析三.代码实战四.源码获取一.需求分析…

XSS game -xss学习

网址 https://xss-game.appspot.com/level1Level 1: Hello, world of XSS payload: <script> alert(1); </script>漏洞产生处: message "Sorry, no results were found for <b>" query "</b>."Level 2: Persistence is key…

基于 urlimport 进行瘦身,提升编译效率

1. 基于 urlimport 进行瘦身&#xff0c;提升编译效率urlImport 是 NextJS 提供的一个实验特性&#xff0c;支持加载远程 esmodule NextJS 会在本地对所加载的远程模块进行缓存&#xff0c;减少了我们所需构建的模块数&#xff0c;缺点是它会影响 treeShaking 的一个效果&…

【强化学习论文合集】ICLR-2022 强化学习论文 | 2022年合集(四)

强化学习(Reinforcement Learning, RL),又称再励学习、评价学习或增强学习,是机器学习的范式和方法论之一,用于描述和解决智能体(agent)在与环境的交互过程中通过学习策略以达成回报最大化或实现特定目标的问题。 本专栏整理了近几年国际顶级会议中,涉及强化学习(Rein…

Redis学习(二)之 Redis Cluster集群

redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态&#xff0c;如果master节点异常&#xff0c;则会做主从切换&#xff0c;将某一台slave作为master&#xff0c;哨兵的配置略微复杂&#xff0c;并且性能和高可用等方面变现一般&#xff0c;特别是…

使用html+css实现一个静态页面【传统文化茶带音乐6页】HTML学生个人网站作业设计

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

【MySQL篇】第四篇——数据类型

数值类型 整数类型 TINYINT类型 小数类型 FLOAT DECIMAL 日期和时间类型 字符串类型 CHAR VARCHAR 二进制类型 BIT 数据类型是指系统中所允许的数据类型。MySQL数据类型定义了列中可以存储什么数据以及该数据怎么样存储的规则。 数据库中的每个列都应该有适当的数据…

新手如何从零开始搭建配置Windows云服务器?

新手如何从零开始搭建配置Windows云服务器&#xff1f;本文是搭建 Windows 云服务器入门教程&#xff0c;主要介绍如何从零开始&#xff0c;以最简单的方式搭建和配置你的Windows 云服务器。如果您之前没有搭建云服务器的经验&#xff0c;建议您按照本文介绍的方式来购买和配置…

云小课|云小课带您快速了解LTS可视化查看

阅识风云是华为云信息大咖&#xff0c;擅长将复杂信息多元化呈现&#xff0c;其出品的一张图(云图说)、深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云。更多精彩内容请单击此处。 摘要&#xff1a; 可视化查看是日志分析的关键&#xff0c;通过可视化可…