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

news2024/11/22 16:29:38

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用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.想要获取本文源码,点击前往吧

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

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

相关文章

等保2.0的全面解读与实施策略

《网络安全等级保护基本要求》&#xff08;等保2.0&#xff09;是中华人民共和国国家安全部于2019年6月发布的网络安全等级保护标准。该标准规定了我国关键信息基础设施的网络安全等级保护要求和评估标准&#xff0c;对于保障我国网络安全具有重要的意义。下面是对等保2.0的全面…

功能安全如何在公司顺利开展?-亚远景科技

亚远景功能安全主题线上会议报名开启&#xff01; 随着汽车技术的不断发展&#xff0c;汽车系统的复杂性和交互性大幅增加&#xff0c;功能安全成为确保驾驶员、乘客及行人安全的关键。 本场功能安全线上会议&#xff0c;亚远景为汽车行业的相关人员准备了以下内容&#xff1a…

保姆级AI绘画入门教程,从此找图不求人、风格还统一(入门篇)

安装流程 安装包使用的是b站大佬“秋葉aaaki”制作的整合程序。他还会讲授一些lora训练的方法&#xff08;对于大多数人来说可能一生都用不上的功能&#xff0c;跟着月仔学学基础操作就成了&#xff0c;哈哈。&#xff09; 首先要下载安装包&#xff0c;最新的安装包大小已经…

vant showNotify样式修改

main.ts直接引入根css会影响已经修改好的其他vant样式,直接添加一个新的my-vant.scss文件引入 //vant showNotify样式修改 .van-popup.van-popup--top.van-notify {width: 343px !important;height: 40px !important;border-radius: 12px !important;margin: 0 auto !importan…

黑马点评项目总结及个人优化

怎么根据前端代码实现自己的后端业务,实现不同接口 查阅文档:如果有完善的接口文档,可以直接查阅文档来了解后端所有接口的业务逻辑和功能。 阅读后端代码:通过阅读后端代码,特别是控制器(Controller)层和服务(Service)层的代码,可以了解后端所有接口的具体实现逻辑。…

FPGA verilog LVDS通信协议笔记

一幅图胜过千言万语 直接开始挫代码&#xff0c;先写top.v。 module top();reg clk; // 生成时钟的寄存器 reg rst; // 生成复位信号的寄存器initial clk 1; // 初始值取1 always #1 clk ~clk; //1ns取反一次initial begin // 复位信号&#xff0c;先0&#xff0c;过段时间赋…

飞书深诺沈菁:智能化是企业增长的助推器

刚刚结束的ChinaJoy&#xff0c;既是游戏行业的盛会&#xff0c;也是出海企业的盛会。活动期间&#xff0c;飞书深诺旗下专注于游戏出海的平台Meetgames举办「进无止境」Meetgames升级发布会&#xff0c;推出全新升级的Meetgames平台&#xff0c;并与合作伙伴和嘉宾共同探讨成长…

HBuilder简单实现打包

这里使用HBuilder的原生云打包来进行打包APP&#xff0c; 首先需要登录HBuilder开发者中心 确认无误后&#xff0c;回到HBuilder,点击发行&#xff0c; 填写好对应信息后即可进行下一步操作&#xff0c;其他选择默认就可以了&#xff0c; 选择无视风险&#xff0c;继续打包 到…

GO—web程序中的请求缓存设置

背景 假设用户数据存在数据库&#xff0c;现在需要一个函数&#xff0c;通过用户名称返回用户信息。 期望&#xff1a;在一次web请求中&#xff0c;不过调用多少次这个函数&#xff0c;只请求一次数据库。 基本信息 type User struct {Name stringAge int }func GetALLUser…

K8s源码分析(一)-K8s调度框架及调度器初始化介绍

本文首发在个人博客上&#xff0c;欢迎来踩&#xff01; 文章目录 调度框架介绍K8s scheduler 介绍K8s scheduler的初始化Cobra介绍K8s scheduler中初始化的源代码解析 调度框架介绍 这是官方对于v1.27调度框架的介绍文档&#xff1a;https://v1-27.docs.kubernetes.io/docs/…

开源模型应用落地-CodeQwen模型小试-集成langchain(四)

一、前言 通过学习代码专家模型&#xff0c;开发人员可以获得高效、准确和个性化的代码支持。这不仅可以提高工作效率&#xff0c;还可以在不同的技术环境中简化软件开发工作流程。代码专家模型的引入将为开发人员带来更多的机会去关注创造性的编程任务&#xff0c;从而推动软件…

kubernetes1.27.3版本单主机部署详细教程

本次kubernetes单主机部署是基于AnolisOS-7.9操作系统进行部署的&#xff0c;当然也适用于Centos7的操作系统&#xff0c;根据个人情况&#xff0c;选择适合自己的版本! 本次部署的kubernetes版本是1.27.3版本&#xff0c;系统架构是etcd&#xff0c;API Server&#xff0c;Con…

【Jenkins】Pipeline流水线语法解析全集 -- 声明式流水线

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

嵌入式学习<2>:EXTI、ADC、NVIC和AFIO

嵌入式学习_part2 本部分笔记用于学习记录&#xff0c;笔记源头 >>b站江科大_STM32入门教程_EXTI EXTI、ADC、NVIC和AFIO 开发环境&#xff1a;keil MDK、STM32F103C8T6 1 &#xff09;EXTI STM32F10xxx参考手册&#xff08;中文&#xff09;-> 中断与事件 ->…

死锁调试技巧:工作线程和用户界面线程

有人碰到了一个死锁问题&#xff0c;找到我们想请我们看看&#xff0c;这个是关于应用程序用户界面相关的死锁问题。 我也不清楚他为什么会找上我们&#xff0c;可能是因为我们经常会和窗口管理器打交道吧。 下面&#xff0c;我们来看看死锁的两个线程。 >> 请移步至 …

【SpringSecurity源码】过滤器链加载流程

theme: smartblue highlight: a11y-dark 一、前言及准备 1.1 SpringSecurity过滤器链简单介绍 在Spring Security中&#xff0c;过滤器链&#xff08;Filter Chain&#xff09;是由多个过滤器&#xff08;Filter&#xff09;组成的&#xff0c;这些过滤器按照一定的顺序对进…

LeetCode算法题:49. 字母异位词分组(Java)

给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", "nat", …

试试这四个AI论文工具和降重技术,低成本高回报

在科研领域&#xff0c;AI写作工具如同新一代的科研利器&#xff0c;它们能够极大提高文献查阅、思路整理和表达优化的效率&#xff0c;本质上促进了科研工作的进步。AI写作工具不仅快速获取并整理海量信息&#xff0c;还帮助我们精确提炼中心思想&#xff0c;显著提升论文写作…

Windows系统安装MongoDB数据库

MongoDB是一个基于分布式文件存储的NoSQL数据库&#xff0c;由C语言编写的。MongoDB的数据存储基本单元是文档&#xff0c;它是由多个键值对有序组合的数据单元&#xff0c;类似于关系数据库中的数据记录。适合存储JSON形式的数据&#xff0c;数据格式自由&#xff0c;不固定。…

自制无感无刷电机驱动板

自制无感无刷电机驱动板 分别测试了基于C251的STC32G单片机、Arduino AVR的ATmega328PB、以及ARM的ST32F103单片机。 &#x1f9f2;测试转动效果 ✒目前市面上开源的有关无刷电机的项目数不胜数&#xff0c;其控制原理都大同小异&#xff0c;在没有领透其技术要领情况下&#x…