HTML静态网页成品作业(HTML+CSS)——动漫喜羊羊网页设计制作(4个页面)

news2024/10/5 15:23:41

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

文章目录

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


一、作品介绍

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

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="m">
		<div class="top">
			<img src="./images/top.jpg" alt="">
		</div>
		<ul class="nav">
			<li><a href="index.html">首页</a></li>
			<li><a href="juese.html">角色</a></li>
			<li><a href="tupian.html">图片</a></li>
			<li><a href="login.html">登录</a></li>
		</ul>
		<div class="con">
			<div class="conl">
				<img src="./images/i1.jpg" alt="">
			</div>
			<div class="conr">
				<p>
					《喜羊羊与灰太狼》动画以羊和狼两大族群间妙她横生的故事为主线,讲述了羊狼凭借友谊和热爱,共同保卫家园、完成梦想的励志故事。
				</p>
				<p>
					羊历3513年,青青草原上,羊羊族群十分繁荣昌密,羊羊们在这里幸福地生活着。直到灰太狼带着妻子红太狼搬到对岸的森林,羊羊们才真正在现实中见到书上记载的狼
				</p>
				<p>
					灰大狼每天想尽办法要跨越铁棚栏抓羊,但他没想到的是,他的对手是全羊族里最聪明的喜羊羊,而且喜羊羊的背后还有智慧超群、又擅长发明的村长慢羊羊,大智若愚,馋嘴爱睡的假羊羊,力大无比,勇敢无畏的沸羊羊;心地善良、气质非凡的美羊羊;以及温柔可爱,做事负责的暖羊羊。善良勇敢的小羊们,凭借着智慧和勇气,一次次识破灰大狼的诡计。但是灰太狼为了家人,也勤奋努力,百折不挠地捉羊,一次次失败,但又一次次站起。就这样,妙趣横生的狼捉羊故事,在青青草原不断上演。。
				</p>
				<p>
					截至20222月,《喜羊羊与灰太狼》共播出作品362659集,电影10部,舞台剧5部。
				</p>
			</div>
		<div style="clear: both;"></div>
		</div>
		<div class="footer">
			版权所有:喜羊羊灰太狼
		</div>
	</div>
</body>
</html>

五、源码获取

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

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

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

相关文章

​​​【收录 Hello 算法】6.2 哈希冲突

目录 6.2 哈希冲突 6.2.1 链式地址 6.2.2 开放寻址 1. 线性探测 2. 平方探测 3. 多次哈希 6.2.3 编程语言的选择 6.2 哈希冲突 上一节提到&#xff0c;通常情况下哈希函数的输入空间远大于输出空间&#xff0c;因此理论上哈希冲突是不可避免的。比如&a…

2、快速搭建Vue框架以及项目工程

本篇文章详细讲解在配置完vue2环境后如何快速搭建一个Vue框架和项目工程。&#xff08;以智慧农业云平台为例&#xff09; 2.1 Vue工程创建 2.1.1创建想要存放的Vue文件夹 找到想要存放的文件夹并在目录搜索框中&#xff0c;并用管理员的方式打开。 2.1.2创建Vue工程 2、安装…

UStaticMesh几何数据相关(UE5.2)

UStaticMesh相关类图 UStaticMesh的数据构成 UStaticMesh的FStaticMeshSourceModel UStaticMesh的Mesh几何元数据来自于FStaticMeshSourceModel&#xff0c; 一级Lod就存在一个FStaticMeshSourceModel. FStaticMeshSourceModel几何数据大致包含以下几类: Vertex(点), VertexI…

【源码】Spring Data JPA原理解析之Repository的自动注入(一)

Spring Data JPA系列 1、SpringBoot集成JPA及基本使用 2、Spring Data JPA Criteria查询、部分字段查询 3、Spring Data JPA数据批量插入、批量更新真的用对了吗 4、Spring Data JPA的一对一、LazyInitializationException异常、一对多、多对多操作 5、Spring Data JPA自定…

4种现象表明你的血糖控制良好!

如果你出现以下4种现象&#xff0c;恭喜你&#xff0c;说明你的血糖控制的不错&#xff0c;需要继续坚持。 1.饥饿感减少&#xff0c;我们的脏腑能够吸收血液中的糖分了&#xff0c;就用不着饿了。&#xff0c;血液中的糖能够得到充分的利用&#xff0c;血糖自然降下去。 2.体…

找到字符串中所有字母异位词 ---- 滑动窗口

题目链接 题目: 分析: 要找的是在s中和p是异位词的子串, 也就是说子串大小和p相同, 那么就是窗口大小固定的滑动窗口问题可以使用哈希数组来记录每个元素出现的个数, 定义hash1存放p中的各元素个数定义left 0; right 0;进窗口 让right指向的元素进窗口, 即更新hash2中的元素…

vue3自定义指令​(通过指令钩子获得dom和钩子参数)

实现文本框自动获得焦点 Index.vue: <script setup> import { ref, onMounted } from vue import ./index.cssconst vFocus {mounted: (el, binding) > {el.focus()console.log(binding)} }onMounted(() > {}) </script><template><div class&qu…

C#委托以及在事件驱动编程中的使用

C#中的委托&#xff08;Delegate&#xff09;是一种类型&#xff0c;它可以存储对方法的引用&#xff0c;并且可以像其他类型一样传递给方法。委托提供了一种灵活的方式来实现事件处理、回调函数和多播委托等功能。以下是关于C#委托的详细介绍&#xff1a; 定义&#xff1a; …

量化研究---A股赚钱日历,上证指数为例,提供源代码

今天把A股的全部数据导出做了一些赚钱日历分析&#xff0c;看那个月赚钱容易&#xff0c;那个月赚钱困难 导入需要的库 import pandas as pdimport matplotlib.pyplot as pltimport quantstats as qsfrom trader_tool.index_data import index_datafrom trader_tool import j…

风电功率预测 | 基于BP神经网络的风电功率预测(附matlab完整源码)

风电功率预测 风电功率预测 | 基于BP神经网络的风电功率预测(附matlab完整源码)完整代码风电功率预测 | 基于BP神经网络的风电功率预测(附matlab完整源码) 基于BP神经网络的风电功率预测是一种常见的方法,它利用BP神经网络模型来预测风电场的发电功率。下面是一个基于BP神经…

HTML常用标签-表格标签

表格标签 1 常规表格2 单元格跨行3 单元格跨行 1 常规表格 table标签 代表表格 thead标签 代表表头 可以省略不写 tbody标签 代表表体 可以省略不写 tfoot标签 代表表尾 可以省略不写 tr标签 代表一行 td标签 代表行内的一格 th标签 自带加粗和居中效果的td 代码 <h…

【启程Golang之旅】环境设置、工具安装与代码实践

欢迎来到Golang的世界&#xff01;在当今快节奏的软件开发领域&#xff0c;选择一种高效、简洁的编程语言至关重要。而在这方面&#xff0c;Golang&#xff08;又称Go&#xff09;无疑是一个备受瞩目的选择。在本文中&#xff0c;带领您探索Golang的世界&#xff0c;一步步地了…

mysql,sqlserver数据库查询表,获得表结构,结构类型说明,获得这些数据,可以拿去创建表

mysql&#xff0c;sqlserver数据库查询表&#xff0c;获得表结构&#xff0c;结构类型说明&#xff0c;获得这些数据&#xff0c;可以拿去创建表 //表名p_order select * from information_schema.COLUMNS where TABLE_NAMEp_order;1、TABLE_CATALOG &#xff0c;nvarchar(128…

C++ | Leetcode C++题解之第89题格雷编码

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> grayCode(int n) {vector<int> ret(1 << n);for (int i 0; i < ret.size(); i) {ret[i] (i >> 1) ^ i;}return ret;} };

47 tcp网络程序

网路聊天 API详解 下面用到的API&#xff0c;都在sys/socket.h中 socket (): socket() 打开一个网络通讯端口&#xff0c;如果成功的话&#xff0c;就像open() 一样返回一个文件描述符应用程序可以像读文件一样用read/write在网络上收发数据如果调用出错返回-1对于IPv4&am…

读人工智能时代与人类未来笔记03_演变

1. 演变 1.1. 每个社会都找到了属于自己的一套适应世界的方法 1.1.1. 适应的核心&#xff0c;是有关人类心智与现实之间关系的概念 1.1.2. 人类认识周围环境的能力 1.1.2.1. 这种能力通过知识获得&#xff0c;同时也受到知识…

研发管理-选择研发管理系统-研发管理系统哪个好

选择研发管理系统-研发管理系统哪个好 选择研发管理系统时&#xff0c;并没有一个绝对的“最好”的系统&#xff0c;因为每个企业的需求和情况都是独特的。然而&#xff0c;我可以向您介绍一些在市场上广受欢迎且功能强大的研发管理系统&#xff0c;供您参考&#xff1a; 1、彩…

OpenAI 推出 GPT-4o:实现多模态 AI 交互

一、前言 OpenAI 推出了其最新的 AI 模型——GPT-4o&#xff0c;此次发布的并非 GPT-4.5 或 GPT-5&#xff0c;而是一款全新的“全模态模型(Omnimodel)”。这是一个将文本、语音和视觉能力集成到单一无缝 AI 体验中的突破性发展。 GPT-4o 于 2024 年 5 月 14 日发布&#xff0…

生产消费者模型-环形队列与信号量

文章目录 前言一、怎样的环形队列&#xff1f;二、什么是信号量三、使用步骤信号量的接口函数1. sem_init2.sem_destroy3.sem_wait4.sem_post 环形队列的设计测试用例 前言 之前我们使用互斥锁和条件变量实现过一个生产者消费者模型&#xff0c;那么那个生产消费者模型具有一个…

Github20K星开源团队协作工具:Zulip

Zulip&#xff1a;让团队协作的每一次交流&#xff0c;都精准高效。- 精选真开源&#xff0c;释放新价值。 概览 随着远程工作的兴起和团队协作的需求不断增加&#xff0c;群组聊天软件成为了日常工作中不可或缺的一部分。Zulip 是github上一个开源的团队协作工具&#xff0c;…