【HTML】HTML网页设计---海贼王动漫网页设计

已于 2023-02-20 21:22:49 修改
阅读量8.4k 收藏 140
点赞数 15
分类专栏： web前端作业 Html+Css+JavaScript期末大作业 文章标签： html 前端 javascript
于 2022-08-25 16:33:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandas23/article/details/126527398
版权

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

海贼王网页采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 

海贼王网页采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--海贼王网页设计

3.1、首页

相关代码：

 <div class="container">
    <div class="header_box">
      <!--<div class="logo"><a href="#">Resume</a></div>-->
	  <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
	    <div id="main-nav" class="collapse navbar-collapse navStyle">
			<ul class="nav navbar-nav" id="mainNav">
			  <li class="active"><a href="#carousel" class="scroll-link">首页</a></li>
			  <li><a href="#aboutUs" class="scroll-link">介绍</a></li>
			  <li><a href="#service" class="scroll-link">人物简介</a></li>
			  <li><a href="#Portfolio" class="scroll-link">人物集</a></li> 
			  <li><a href="#experience" class="scroll-link">时间线</a></li> 
			  <li><a href="#contact" class="scroll-link">待续……</a></li>
			</ul>
      </div>
	 </nav>
    </div>
  </div>

 3.2、导航页

相关代码：

  <div class="container">
    <h2>《海贼王》 ”かいぞくおう“</h2>
	<h6>尾田荣一郎创作的漫画作品</h6>
    <div class="inner_section">
 <div class="row">
      <div class="col-md-6"> <img class="img-responsive" src="img/316040.gif" align=""> </div>
      <div class="col-md-6">
        <h3>作品简介</h3>
        <p>故事讲述了想成为海贼王的路飞，误食了海贼


香克斯收藏的橡胶恶魔果实，而变成橡胶人，恶魔果实的副作用却使他永远不能游泳。不过他的理想仍然没有改变——成为海贼王，并且找到传说中哥尔·D·罗杰的秘宝－One Piece，冒险就此开始了。</p> 
         
        <p>误食“橡胶果实”的路飞怀揣着对这个世界的憧憬和对自己成为海贼王梦想的执著，路飞出海了。
这一路上还真让他找到了许多身怀绝技的朋友：目标成为世界第一剑客的索隆，想绘画出世界地图的航海士娜美，想找到all blue的海上厨师香吉士，特别善于说大话但想成为狙击王的乌索普，想成为最强医生的萌萌哒的船医乔巴，成熟富有女人味的考古学家罗宾，以及顶级的船匠改造人弗兰奇，和立志与鲸鱼拉布重逢的骷髅音乐家布鲁克。
路飞一伙一路千辛万苦地努力着，而由此开始One Piece的故事将要完全展开了
									</p>

									<ul class="about-us-list">
										<li class="points">海军军队及世界政府——绝对正义</li> 
                                        <li class="points">王下七武海——世界政府公认的七位大海贼</li>
										<li class="points">四皇——海上皇帝</li>
									</ul><!-- /.about-us-list -->
								 
      </div>
    </div>
	     </div>
  </div>

 3.3、时间线介绍

 相关代码：

  <div class="isotope fadeInLeft animated wow grid" style="position: relative; overflow: hidden; height: 480px;" id="portfolio_wrapper">  
      <!-- Portfolio Item -->
      <figure style="position: absolute; left:0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 400px; opacity: 1;" class="portfolio-item one-four   animals isotope-item effect-oscar">
	  
        <div class="portfolio_img"> 
		<img src="img/2323.jpg"  alt="Portfolio 1"> </div> 
			<figcaption>		
				<div>
				  <a href="img/2323.jpg" class="fancybox"> 
				  <h2>革命军</h2>
							<p>龙、萨博、贝洛·贝蒂、莫里卡拉斯……</p>
				  </a>
				</div>
			</figcaption>
        </figure>
      <!--/Portfolio Item --> 
      
      <!-- Portfolio Item-->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1); width: 400px; opacity: 1;" class="portfolio-item one-four  wildlife isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic2.jpg" alt="Portfolio 1"> </div>
        	<figcaption>		
				<div>
				  <a href="img/portfolio_pic2.jpg" class="fancybox"> 
					<h2>草帽海贼团</h2>
							<p>路飞、索隆、山治、乌索普、娜美、乔巴、罗宾、弗兰奇、布鲁克、甚平</p>
				  </a>
				</div>
			</figcaption>
        </figure>
      <!--/Portfolio Item --> 
      
      <!-- Portfolio Item -->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  wildlife  isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic3.jpg" alt="Portfolio 1"> </div>
       <figcaption>		
				<div>
				  <a href="img/portfolio_pic3.jpg" class="fancybox"> 
					<h2>白胡子海贼</h2>
							<p>白胡子、艾斯、马尔科、乔兹、比斯塔……</p>
				  </a>
				</div>
			</figcaption>
        </figure>
      <!--/Portfolio Item--> 
      
      <!-- Portfolio Item-->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  citylife  nature web isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic4.jpg" alt="Portfolio 1"> </div>
         <figcaption>		
				<div>
				  <a href="img/portfolio_pic4.jpg" class="fancybox"> 
					<h2>海军 大将</h2>
							<p> 黄猿、青雉、赤犬</p>
				  </a>
				</div>
			</figcaption>
      </figure>
      <!-- Portfolio Item --> 
      
      <!-- Portfolio Item -->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  wildlife isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic5.jpg" alt="Portfolio 1"> </div>
       <figcaption>		
				<div>
				  <a href="img/portfolio_pic5.jpg" class="fancybox"> 
					<h2>黑胡子海贼</h2>
							<p>马歇尔·D·蒂奇、拉菲特、范·奥卡、希留……</p>
				  </a>
				</div>
			</figcaption>
      </figure>
      <!--/Portfolio Item --> 
      
      <!-- Portfolio Item -->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  web isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic6.jpg" alt="Portfolio 1"> </div>
       <figcaption>		
				<div>
				  <a href="img/portfolio_pic6.jpg" class="fancybox"> 
					<h2>超新星</h2>
							<p>路飞、索隆、基德、罗、霍金斯、贝基……</p>
				  </a>
				</div>
			</figcaption>
      </figure>
      <!--/Portfolio Item --> 
      
      <!-- Portfolio Item  -->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  wildlife web isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic7.jpg" alt="Portfolio 1"> </div>       
       <figcaption>		
				<div>
				  <a href="img/portfolio_pic7.jpg" class="fancybox"> 
					<h2>红发海贼团</h2>
							<p>香克斯、贝克曼、耶稣布……</p>
				  </a>
				</div>
			</figcaption>
       </figure>
      <!--/Portfolio Item --> 
     
		     <!-- Portfolio Item-->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1); width: 400px; opacity: 1;" class="portfolio-item one-four  wildlife isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/portfolio_pic1.jpg" alt="Portfolio 1"> </div>
        	<figcaption>		
				<div>
				  <a href="img/portfolio_pic1.jpg" class="fancybox"> 
					<h2>四皇海贼团</h2>
							<p>香克斯、凯多、BIG MOM、黑胡子</p>
				  </a>
				</div>
			</figcaption>
        </figure>
      <!--/Portfolio Item --> 
      
      <!-- Portfolio Item -->
      <figure style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  wildlife  isotope-item effect-oscar">
        <div class="portfolio_img"> <img src="img/1212.jpg" alt="Portfolio 1"> </div>
       <figcaption>		
				<div>
				  <a href="img/1212.jpg" class="fancybox"> 
					<h2>BIG MAM </h2>
							<p>夏洛特·玲玲、蛋蛋男爵、波克慕斯、波斌……</p>
				  </a>
				</div>
			</figcaption>
        </figure>
      <!--/Portfolio Item--> 
 

		<!--/Portfolio Item --> 

      
    </div>

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站，获取

coding加油站
关注
  • 15
    点赞
  • 踩
  • 140
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
web网页设计——海贼王
03-25
Dreamweaver编写的，有十个页面，
大二Web课程设计——动漫海贼王（可以很好的应付老师的作业）
12-26 854
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1
海贼王动漫主题网页设计 html源码 一页 html大作业
最新发布
m0_37916936的博客
04-16 157
dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。一张页面 主要分为 logo部分、大图、故事简介、人物介绍、精彩图锦、底部版权。网页比较简单，适合初学者。【html+css】海贼王一页。用到的是flex弹性布局。
HTML静态网页成品作业(HTML+CSS)——动漫千与千寻主题网页设计制作(1个页面)
weixin_42283461的博客
03-01 427
HTML静态网页成品作业(HTML+CSS)——动漫千与千寻主题网页设计制作(1个页面)
HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品
QQ_____365392777的博客
08-16 2万+
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-06 5万+
HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支
学生网页设计作业源码(HTML+CSS)——海贼王6页代码质量好
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
海贼王动漫网页设计作业 html+css网页
a13580529499的博客
01-08 793
海贼王动漫网页设计模板，代码原创简单规范，纯html+css，非网上下载的老旧杂乱代码。模板共有7个页面，包括作者简介、剧情介绍、角色介绍，登录注册页面等。不管是web期末大作业，还是自己学习网页制作，都非常值得参考！
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 6595
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML+CSS简单漫画网页设计成品--(红猪（9页）带注释)
11-19 5729
关于制作网页主题论述 web期末网站设计大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
海贼王人物介绍简单网页设计.html
05-25
海贼王人物介绍简单网页设计
海贼王HTML5模板
03-30
海贼王HTML5模板，适合很多学生，可以自觉更改。里面有jq，js，css，
静态网页课程设计-海贼王动漫电影网（HTML+CSS+JavaScript）
01-04
主要内容：对海贼王IP电影、动漫、人物进行介绍，效果炫酷。 适用人群：需要用来学习使用和提交期末作业的学生。 拿来即用，只需对课程报告学号姓名等信息稍作修改即可，代码不用做任何修改。 效果观看：...
html海贼王动漫主题源码期末大作业
02-08
html海贼王动漫主题源码期末大作业0021
大学生动漫网页设计模板下载 海贼王乔巴网页作业成品 动漫网页作品 学生网站源代码下载
11-28
大学生动漫网页设计主题内容为海贼王乔巴介绍，共5个页面，采用DIV CSS布局制作，使用CSS设置了网页背景图，栏目导航选中及鼠标经过效果灯。压缩包内含CSS、html源代码及图片素材文件。
5个页面（适合初学者学习）海贼王基地学生网页设计作业.rar
06-22
html+css+js实现我大学html期末作业漫画作品——日本超人气漫画《海贼王》。作者是尾田荣一郎 主页分为 剧情简介、作者介绍、角色介绍、最近新闻、漫画欣赏这几个主要部分。其中剧情简介主要介绍的是这部漫画发生的...
基于HTML电商项目的设计与实现——html静态网站基于数码类电商购物网站网页设计与实现共计30个页面...
qq_365392777
10-23 3233
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作...
海贼王网页设计html css
05-28
非常感谢您的提问。海贼王是一部非常受欢迎的动漫，如果您想为其设计一个网页，以下是一些可以帮助您的HTML和CSS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>海贼王网页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>海贼王</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">剧情</a></li> <li><a href="#">人物介绍</a></li> <li><a href="#">视频</a></li> </ul> </nav> </header> <main> <section> <h2>介绍</h2> <p>海贼王是一部由尾田栄一郎创作的日本漫画，于1997年开始连载。故事描述了主人公蒙其·D·路飞成为一名海贼，并与他的船员一起寻找传说中的One Piece宝藏。</p> </section> <section> <h2>图片</h2> <img src="https://i.imgur.com/7jJ4eJN.jpg" alt="海贼王海报"> </section> </main> <footer> <p>版权所有 © 2021 海贼王</p> </footer> </body> </html> ``` CSS代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px; } nav ul { display: flex; list-style-type: none; padding: 0; margin: 0; } nav ul li { margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; } main { max-width: 800px; margin: 0 auto; padding: 20px; } section { margin-bottom: 30px; } h2 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } img { max-width: 100%; height: auto; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` 上述代码会创建一个基本的海贼王网页，包括一个带有导航栏的页眉、主要内容区域和一个页脚。您可以根据需要修改样式和内容，以创建您自己的海贼王网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值