HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)

news2024/9/23 3:12:21

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

文章目录

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


一、作品介绍

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

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
<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>大耳朵图图</title>
	<link rel="stylesheet" href="./css/css.css">
</head>
<body>
	
	<div id="con">
		
		<div id="header">
			<ul>
				<li style="background-color: #17b1a8;"><a href="index.html">动漫首页</a></li>
				<li><a href="jianjie.html">动漫简介</a></li>
				<li><a href="juji.html">动漫剧集</a></li>
				<li><a href="zuopin.html">动漫作品</a></li>
			</ul>
		</div>
		
		<div id="banner" class="mt20">
			<img src="./img/banner.jpg" alt="">
		</div>
		
		
		<div id="main" class="mt20 main">
			<h3>动漫</h3>
			<p>《大耳朵图图》是由速达执导,叮当编剧,上海美术电影制片厂制作的电视动画片。该剧主要讲述了胡图图和小伙伴的成长故事。作品于200461日在中央电视台少儿频道首播,共计130集,每集12分钟左右。</p>
			<table class="mt20">
				<tr>
					<td>
						<img src="./img/1.png" alt="">
						<div>胡图图(图图)</div>
					</td>
					<td>
						<img src="./img/2.jpeg" alt="">
						<div>图图妈(张小丽)</div>
					</td>
					<td>
						<img src="./img/3.png" alt="">
						<div>图图爸(胡英俊)</div>
					</td>
					<td>
						<img src="./img/4.png" alt="">
						<div>小怪</div>
					</td>
				</tr>
				<tr>
					<td>
						<img src="./img/5.png" alt="">
						<div>图图爷爷</div>
					</td>
					<td>
						<img src="./img/6.png" alt="">
						<div>小美(于小美)</div>
					</td>
					<td>
						<img src="./img/7.png" alt="">
						<div>刷子(张帅子)</div>
					</td>
					<td>
						<img src="./img/8.png" alt="">
						<div>壮壮(丁大壮)</div>
					</td>
				</tr>
			</table>
		</div>
		
		
		<div id="footer">
			欢迎来到大耳朵图图乐园
		</div>
	</div>
	
</body>
</html>

五、源码获取

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

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

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

相关文章

智能化的知识管理:大模型在知识图谱构建中的突破性应用

转自&#xff1a;大模型奇点说 知识图谱是一种以图形结构组织数据的知识表示形式&#xff0c;其中&#xff0c;概念、事件、实体等知识单元通过节点呈现&#xff0c;而它们之间的各种关系则通过边来描述。知识图谱的显著特点在于&#xff0c;通过关系的定义&#xff0c;为节点提…

EmguCV学习笔记 VB.Net 9.3 移动检测类

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

第十一课,多分支判断

一&#xff0c;多分支结构 某些场景下&#xff0c;判断条件不止一个&#xff0c;可能有多个。 语法格式&#xff08;下图左&#xff09;&#xff1a; *需要注意&#xff1a;这里仅是以5种选择作为例子&#xff0c; 可以根据自己的需要&#xff0c;在if...else的中间插入任意…

OrangePi AIpro 香橙派 昇腾 Ascend C 算子开发 与 调用 - Tiling实现

OrangePi AIpro 香橙派 昇腾 Ascend C 算子开发 与 调用 - Tiling实现 flyfish 前置知识 基于Kernel直调工程的算子开发流程图 其中有一个Tiling实现 什么是Tiling、Tiling实现 计算API&#xff0c;包括标量计算API、向量计算API、矩阵计算API&#xff0c;分别实现调用S…

51单片机-串口通信(电脑向串口助手发送数据不接收)

80C52中的串口通过SCON寄存器配置波特率位可变的&#xff0c;因此&#xff0c;需要通过计算定时器1的参与&#xff0c;在定时器配置过程中选择定时器的相关寄存器TMOD来配置定时器的模式为模式2&#xff08;8位自动重装定时器&#xff0c;如上图&#xff0c;TL1为计数器&#x…

SpringBoot动态配置Nacos

重要知识点 Nacos属性的简单使用 将SpringBoot中的所有配置全部放入到Nacos中 开发人创建单独的命名空间,修改互不影响 Nacos经常变动的配置抽离到外部文件中 将项目中的所有配置全部放到到 1. 首先引入包 <!-- nacos 接入--><!-- https://mvnrepository.com/artifact…

网络安全服务基础Windows--第14节-数字签名

散列函数&#xff08;Hash Function&#xff09;&#xff0c;也称为哈希函数&#xff0c;是密码学中⼀个重要的⼯具。它能够将任意⻓度的输⼊数据转换为固定⻓度的输出&#xff08;散列值或哈希值&#xff09;。这种转换过程具有单向性&#xff0c;即很难从输出推断出输⼊&…

uniapp scroll-view滚动页面

页面滚动固定距离&#xff08;scrollTop&#xff09; <template><view><button click"Test">测试</button><scroll-view style"height: 100px;" :scroll-top"scrollTop" scroll-y"true" class"scrol…

大数据-116 - Flink DataStream Sink 原理、概念、常见Sink类型 配置与使用 附带案例1:消费Kafka写到Redis

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Cadence Virtuoso添加工艺库、转换工艺库格式

系统环境&#xff1a;Red Hat 操作软件&#xff1a;Virtuoso 工艺库&#xff1a;tsmc18rf 1、准备好工艺库文件&#xff0c;放在任意文件夹内&#xff0c;记住文件路径&#xff1a; 2、打开Virtuoso软件&#xff1a; 在桌面右键打开终端&#xff0c;输入&#xff1a; virtuo…

Web3D 技术发展瓶颈在哪里?

Web3D 技术的发展瓶颈主要集中在以下几个方面&#xff1a; 1、性能和优化&#xff1a;尽管现代浏览器和硬件逐步提高了性能&#xff0c;但高质量的3D渲染仍可能导致性能瓶颈。特别是在移动设备上&#xff0c;图形渲染和计算可能会受到限制。建议合理控制好项目资源量&#xff…

DataGridView用法合集【精品】

1.当前的单元格属性取得、变更 [VB.NET] Console.WriteLine(DataGridView1.CurrentCell.Value) Console.WriteLine(DataGridView1.CurrentCell.ColumnIndex) Console.WriteLine(DataGridView1.CurrentCell.RowIndex) DataGridView1.CurrentCell DataGridView1(0, 0) [C#] Con…

毕业设计选题系统

一、项目概述 Hi&#xff0c;大家好&#xff0c;今天分享的项目是《毕业设计选题系统》。 毕业论文选题是大学教学管理中的重要环节&#xff0c;关系到高校的教学质量。传统的手工管理方式工作效率低下、管理繁琐&#xff0c;浪费教师和学生的时间与精力的问题。本系统以提高…

鸿蒙HarmonyOS使用地图服务

1. 生成签名证书指纹 按照步骤生成签名证书指纹 步骤1&#xff1a; 步骤2&#xff1a; 步骤3&#xff1a;Key store file为生成的*.p12文件的存储路径&#xff0c;可以自己选择路径并自定义文件名&#xff0c;输入并确认密码后&#xff0c;点击确认 步骤4&#xff1a;Key s…

代码随想录算法day28 | 动态规划算法part01 | 理论基础、509. 斐波那契数、70. 爬楼梯、 746. 使用最小花费爬楼梯

理论基础 什么是动态规划 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的&#xff0c;这一点就区分于贪…

关于位结构体及位操作总结

#include <stdio.h> #pragma pack(1) struct stu{char a:4; // a占用char的低4位 char b:4; // b占用char的高4位&#xff08;注意&#xff0c;这里实际上是与a共享同一个char的空间&#xff09; }; #pragma pack(4) int main() {struct stu s{.a2, //a:0010.b3, …

如何对单片机程序进行加密(防止别人破解)

单片机程序的破解无非就是非法途径获得源代码或者可执行文件&#xff08;hex文件&#xff09;。本文主要介绍两个方法防止别人从单片机fash中获取可执行文件&#xff08;hex文件&#xff09;。一方面保证别人不能获取你的hex文件&#xff0c;另一面就算别人非法获取你的hex文件…

Windows下的Redis启动报错Redis service failed to start

报错原因&#xff1a;Redis服务没有找到log文件 解决方案&#xff1a; 1、在Redis目录下打开redis.windows-service.conf文件 2、找到logfile存放目录&#xff0c;一般默认为Logs/redis_log.txt 3、在Redis目录创建Logs文件夹&#xff0c;在Logs文件夹下创建redis_log.txt文件…

工业图像输出卡设计原理图:FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡

FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡 一、板卡概述   基于FMC兼容1.8V IO的Full Camera Link 输出子卡支持Base、Middle、Full Camera link信号输出&#xff0c;兼容1.8V、2.5V、3.3V IO FPGA信号输出。适配xilinx不同型号开发板和公司内部各FMC载板。板…

Flutter修改Android包名

一、前言 我在将Android打包上传到google商店的时候提示我“com.example”已受到限制&#xff0c;请换一个软件包名称。“的错误。因此我们需要去修改flutter的Android包名。 二、操作流程 1.修改路径 android ——> app ——> src ——> debug ——> AndroidMa…