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

    1、引言

     

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

    2、作品介绍

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

    2.1、作品简介方面 

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

    2.2、作品二次开发工具

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

    2.3、作品技术介绍

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

    3、作品演示

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

    相关代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<link href="css/style.css" rel="stylesheet" />
    6. 	<title>海贼王title>
    7. head>
    8.  
    9. <style>
    10. 	li{ margin:0px; padding:0px;}
    11. style>
    12.  
    13. <body>
    14. 	<div class="con">
    15. 		<div class="head">
    16.     		<div class="logo">
    17.     			<h1>海贼王h1>
    18.     		div>
    19.     		<div style="width:145px; float:left;">
    20. 				<marquee direction="left" scrollamount="1">ONE PIECE 海贼王  ONE PIECE 海贼王 ONE PIECE 海贼王marquee>
    21. 			div>
    22. 			<div style="clear:both;">div>
    23.     		<div class="nav">
    24.       			<ul>
    25.         			<li><a href="index.html">首页a>li>
    26.         			<li><a href="brief.html">海贼王简介a>li>
    27.         			<li onmouseover="javascript:document.getElementById('list3').style.display='block'" onmouseout="javascript:document.getElementById('list3').style.display='none'">
    28.         				<a href="member.html">人物介绍a>
    29.         				<ul style="position:absolute; display:none; background-color:#000; width:100px; margin-left:-20px; padding:0px;" id="list3">
    30.             				  <li><a href="member/Luffy.html">路飞a>li>
    31.                 			<li><a href="member/Zoro.html">索隆a>li>
    32.                 			<li><a href="member/Nami.html">娜美a>li>
    33.                 			<li><a href="member/Usopp.html">乌鲁索a>li>
    34.                 			<li><a href="member/Sanji.html">山治a>li>
    35.                 			<li><a href="member/Chopper.html">乔巴a>li>
    36.                 			<li><a href="member/Robin.html">罗宾a>li>
    37.                 			<li><a href="member/Franky.html">弗朗奇a>li>
    38.                 			<li><a href="member/Brook.html">布鲁克a>li>  
    39.             			ul>
    40.        			 	li>
    41.         			<li><a href="picture.html">图片欣赏a>li>
    42.        				<li><a href="author.html">作者a>li>
    43.       			ul>
    44.        
    45.     		div>
    46.     		<div class="clear">div>
    47.   		div>
    48.  		<div class="clear">div>
    49.   		<div class="lunbo"><a href="#"><img src="images/2.png"  width="1024"/>a>div>
    50.   		<div class="clear">div>
    51.   		<div class="main">
    52.     		<h2>海贼王h2>
    53.     		<p>《ONE PIECE》（海贼王、航海王）动画，在《周刊少年Jump》1997年34号开始连载，于1999年10月20日在日本富士电视台开始播放，至今仍在播放中。中国搜狐视频网站拥有该片中国大陆地区独家版权，每周日10:00更新一集（中午12:00更新字幕），截止至2015年5月，点阅率已超过50亿次。截止至2013年11月，发行量在全世界突破3.45亿册，是全世界发行量最高的日本漫画。漫画单行本的翻译版本在日本以外有30个以上的国家和地区出版发行。相关商品在2012年度的市场规模约达1000亿日元。2012年在第41回日本漫画家协会上获得大赏。2015年6月15日，《ONE PIECE》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。p>
    54. 			<h2>故事内容h2>
    55. 			<p>拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。 
    56. 			时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。一个叫路飞的少年为了与因救他而断臂的香克斯的约定而出海，在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大冒险旅程。p>
    57. 		div>
    58.   		<div class="fr"><img src="images/0.jpg" width="962"  height="330"/>div>
    59.    		<div class="clear">div>
    60.   		<div class="foot">
    61.     		<p>版权所有：海贼王p>
    62.     		<p> p>
    63.   		div>
    64.   	div>
    65.   	<div class="clear">div>
    66. 	<audio src="music/music.mp3" controls="controls" loop="loop">
    67. 		<embed src="music/music.mp3"/>
    68. 		<bgsound src="music/music.mp3"/>
    69. 	audio>
    70. body>
    71. html>

  • 相关阅读:
    Maven项目构建工具
    猫头虎分享从Python到JavaScript传参数：多面手的数据传递术
    一个三年女软件测试的成长之路
    iptables防火墙
    8位和32位单片机基本数据类型所占大小
    C++中cin输入空格
    LeetCode中等题之旋转图像
    面渣逆袭：RocketMQ二十三问
    javascript 赋值运算符、一元运算符、运算优先级详细解析与代码实例
    通过Pyecharts绘制可视化地球竟 然如此简单
  • 原文地址：https://blog.csdn.net/pandas23/article/details/127119212