HTML静态网页成品作业(HTML+CSS)——动漫哆啦A梦网页(3个页面)

🎉不定期分享源码,关注不丢失哦


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有3个页面

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div class="wrapper">
		<!-- 头部 -->
		<div class="header">
			
			<div class="logo">
				<img src="./images/logo.png">
			</div>
			<div class="nav">
				<a href="index.html" class="active">首页</a>
				<a href="juzhao.html" >精彩剧照</a>
				<a href="wenjuan.html">问卷调查</a>
			</div>
		</div>

		<div class="banner">
			<img src="./images/banner.jpg">
		</div>
		<div class="main">
			
			<h2>故事内容</h2>
			<p>
				大雄有一天打开自己的课桌,一只猫型机器人突然从抽屉里跳了出来,而这就是哆啦A梦。它是由大雄的后代从22世纪里给送来的,目的是帮助大雄解决许多他暂时无法解决的问题,并且尽可能地满足大雄的愿望。
			</p>
			<h2>主要人物</h2>
			<table>
				<tr>
					<td><img src="./images/1.jpg"></td>
					<td>
						<h4>哆啦A梦(ドラえもん)</h4>
						<p>
							名字的意思是铜锣卫门(日文:ドラえもん)。心肠好,乐于助人,做事很拼命,但却心肠软。每次大雄遇到困难,他总会帮大雄。但有时会用愚蠢的方法来帮助大雄。当它吃不到铜锣烧或人们叫他狸猫时,脾气会非常暴躁。
						</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/2.jpg"></td>
					<td>
						<h4>野比大雄(野比のび太)</h4>
						<p>
							单纯天真的个乐天派,成天吊儿郎当地混日子。性格懒惰,天生迟钝,什么时候都慢半拍,迟到纪录和罚站纪录等等屡次创造新纪录。是个倒霉蛋。学习成绩很糟糕(平时考试5次中就有1次得零分,偶尔得过一次100分,每次都是倒数第二名),运动神经迟钝(却是射击和翻花绳的天才)</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/3.jpg"></td>
					<td>
						<h4>源静香</h4>
						<p>
							大雄的青梅竹马,也是大雄未来的妻子。聪明乖巧、成绩优秀、心地善良,很受大家的欢迎。因为非常爱干净,所以很喜欢洗澡,一天不洗澡就觉得不舒服。最喜欢吃烤白薯。梦想长大后成为国际航班的空中小姐、幼儿园教师。
						</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/4.jpg"></td>
					<td>
						<h4>刚田武</h4>
						<p>
							大雄的同班同学,大家都叫他“胖虎”。任性,蛮横,又贪婪。因为块头大,经常仗势欺人,总是把别人的东西占为己有,借给他的东西从来没还过。虽然是个粗暴的孩子王,不过很重视友情。在外面总是耀武扬威,但一回到家里却对妈妈没有丝毫抵抗能力,对妹妹胖妹则是疼爱有加。
						</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/5.jpg"></td>
					<td>
						<h4>骨川小夫</h4>
						<p>
							大雄的同班同学,富家子弟。长得像只狐狸,却对自己的长相十分自恋,自我感觉过分良好,唯独对自己的身高太矮小感到苦恼。梦想是成为一名服装设计师。喜欢追求流行,兴趣相当多样。收藏品也很丰富。他常常炫耀家里很有钱,邀请大家到家里或别墅去玩,但总是把大雄排除在外。
						</p>
					</td>
				</tr>
			</table>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div>
				© 2012-2023 哆啦A梦
			</div>
			<div>
				联系方式:1529999999
			</div>
		</div>

	</div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-14 12:36:06       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-14 12:36:06       97 阅读
  3. 在Django里面运行非项目文件

    2024-05-14 12:36:06       78 阅读
  4. Python语言-面向对象

    2024-05-14 12:36:06       88 阅读

热门阅读

  1. DAY5-----同源策略是什么?怎么解决跨域问题?

    2024-05-14 12:36:06       21 阅读
  2. 【实践】给proto的message添加自定义tag

    2024-05-14 12:36:06       30 阅读
  3. MySQL创建存储过程函数

    2024-05-14 12:36:06       33 阅读
  4. abb电源模块3BHB006338R0101 UNS0881A-P

    2024-05-14 12:36:06       30 阅读
  5. 五分钟说完中国历史(干货满满)

    2024-05-14 12:36:06       32 阅读
  6. Vue中v-if与v-for的优先级和注意事项

    2024-05-14 12:36:06       37 阅读
  7. 使用Springboot整合Elasticsearch

    2024-05-14 12:36:06       32 阅读
  8. 机器学习概念:决策树的一些概念

    2024-05-14 12:36:06       25 阅读