HTML静态网页成品作业(HTML+CSS)——宠物狗介绍网页(3个页面)

news2025/3/15 4:22:11

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

文章目录

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


一、作品介绍

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

二、作品演示

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

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/css.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="header"><img src="images/top0.jpg" width="1000" /></div>
		<div id="nav">
			<a href="index.html">首页</a>
			<a href="pinzhong.html">品种介绍</a>
			<a href="register.html">我要注册</a>
		</div>
		<div class="cont">
			<h2>宠物狗简介</h2>
			<p>宠物狗是人们为了消除孤寂或出于娱乐目的而豢养的犬类动物,或者出于非经济目的而豢养的犬类。狗是一种有灵性的动物,已被人类驯化了几千年,其嗅觉灵敏,动作敏捷,善解人意,忠于主人。在很多国家,各种体形优美的狗早已成为最受喜爱的家庭宠物。 比较著名的宠物狗有:中华田园犬、哈士奇、京巴、藏獒、松狮、金毛、德国牧羊犬、雪纳瑞、大麦町犬、博美犬、吉娃娃、苏格兰牧羊犬、萨摩耶、可卡、拉布拉多、比熊、贵宾犬、马尔济斯、比利时猎犬、泰迪熊犬、边境牧羊犬、阿拉斯加,猎狐梗等等。</p>
			<img src="./images/g1.png" alt="" width="100%">
			<h2>饲养好处</h2>
			<p>
				在这个高速度的压力山大的社会中,想要减轻自己的压力,从而提高自己的工作效率的话,建议您不妨试试养宠物狗狗,它会给你带来很多的乐趣,有的还会达到治疗疾病的效果,当然也是因人而异,当你把宠物狗狗视为自己最亲密的朋友的时候,你就会有这种感觉。对于一些子女在外,家里没有人相伴的孤单老人,可以喂养宠物狗狗,因为这样可以使你的生活更加的充实,解除生活的孤寂感。让自己的小孩子饲养动物,可以培养他的责任感、和要对动物有爱心。当自家的宠物狗狗与你有了很多年感情之后,你会把它当做亲人看待,舍不得它,宠物狗狗可以促进人与人之间更好的交流与沟通。
			</p>
			<h2>狗狗相册相册</h2>
			<table width="100%" border="0" cellspacing="10" cellpadding="0">
				<tr>
					<td><img src="images/gg01.jpeg" width="220" height="200" /></td>
					<td><img src="images/gg02.jpeg" width="220" height="200" /></td>
					<td><img src="images/gg03.jpg" width="220" height="200" /></td>
					<td><img src="images/gg04.jpeg" width="220" height="200" /></td>
				</tr>
			</table>
		</div>
		<div id="bottom">
			<p>宠物狗</p>
		</div>
	</body>
</html>

五、源码获取

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

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

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

相关文章

轻松调用其他工程的Python文件,提升编程效率

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 一、前言 在Python开发过程中&#xff0c;经常会遇到需要在一个工程中调用另一个工程的Python文件的情况。这种情况通常发生在需要复用已有代码或者进行模块化开发时。那么&#xff0c;如何实现这一目标呢&#xff…

JVM(三)

在上一篇中&#xff0c;介绍了JVM组件中的类加载器&#xff0c;以及相关的双亲委派机制。这一篇主要介绍运行时的数据区域 JVM架构图&#xff1a; JDK1.8后的内存结构&#xff1a; (图片来源&#xff1a;https://github.com/Seazean/JavaNote) 而在运行时数据区域中&#…

SpringBoot+Vue开发记录(五)-- 数据库设计

我去&#xff0c;时隔这么久又开始了QAQ。主要是还是自己太懒了。 本篇文章的主要内容是数据库设计。 先简单创建个数据库&#xff1a; 这是创建好了的&#xff1a; 一、数据库设计 先就做一个很简单的设计&#xff0c;里面就只有用户和题。 大概就这样&#xff1a; 二、创…

【学习笔记】Windows GDI绘图目录

题外话 不知几时开始&#xff0c;觉得学习过程中将内容记录下来&#xff0c;有助于加强记忆&#xff0c;还方便后续查找&#xff0c;顺便帮助有需要的人&#xff0c;更有来自您阅读、点赞、收藏和评论时给我带来的动力与兴奋。 目录 【学习笔记】Windows GDI绘图(一)图形概述…

如何从U盘恢复误删除的文件

在许多情况下&#xff0c;用户可能会发现其U盘上的数据误删&#xff0c;并且无法访问或恢复它。在这篇文章中&#xff0c;我们将看到如何使用命令提示符尝试从U盘恢复损坏的文件和数据。我们还将列出一些免费的U盘恢复软件及其独特的功能&#xff0c;以便在前一种方法无法产生所…

PVE 虚拟机环境下删除 local-lvm分区

1、删除逻辑卷 lvremote pve/data 2、扩展逻辑卷 lvextend -l 100%FREE -r pve/root 3、 修改存储目录内容 点击 Datacenter - Storage &#xff08;1&#xff09;删除local-lvm分区 &#xff08;2&#xff09;编辑local分区&#xff0c;在内容一项中勾选所有可选项。

unity开发Hololens,使用unity自带的UGUI

hololens 使用UGUI 新建画布&#xff0c;添加组件&#xff0c; 画布模式改成WorldSpace&#xff0c;这样在能在3D场景里 随意的移动位置&#xff0c; 添加NearIteractionTouchaBleUnityUI、CanvasUtility组件 EaventsToReceive改成Pointer&#xff0c; 这样&#xff0c;UGUI的…

Idea中flume的Interceptor的编写教程

1.新建-项目-新建项目 注意位置是将来打包文件存放的位置&#xff0c;即我们打包好的文件在这/export/data个目录下寻找 2. 在maven项目中导入依赖 Pom.xml文件中写入 <dependencies> <dependency> <groupId>org.apache.flume</groupId> <artifa…

渲染管线——应用阶段

知识必备——CPU和GPU 应用阶段都做了什么 应用阶段为渲染准备了什么 1.把不可见的数据剔除 2.准备好模型相关数据&#xff08;顶点、法线、切线、贴图、着色器等等&#xff09; 3.将数据加载到显存中 4.设置渲染状态&#xff08;设置网格需要使用哪个着色器、材质、光源属性等…

【NumPy】NumPy性能优化与内存管理:解锁高效编程的高级策略

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

《Ai学习笔记》自然语言处理 (Natural Language Processing):常见机器阅读理解模型(上)02

Glove 词向量&#xff1a; 在机器理解中的词的表示&#xff1a; 词袋&#xff08;bow,bag of words&#xff09; one-hot 词向量 word2vec glove 目的&#xff1a;将一个词转换成一个向量 Word2vec 是一种用于生成词向量的工具包&#xff0c;由Google在2013年开源推出…

HMI设计:再谈上位机与下位机,附海量案例图

上期回顾&#xff1a;HMI界面之&#xff1a;上位机界面设计&#xff0c;一文扫盲 一、上位机负责控制和决策&#xff0c;下位机负责采集和执行 上位机和下位机是两个概念&#xff0c;通常用于描述计算机系统中不同层次的设备或组件。 上位机&#xff08;Host Computer&#x…

vue3 vite动态根据字符串加载组件

1 原理 import.meta.glob() 其实不仅能接收一个字符串&#xff0c;还可以接收一个字符串数组&#xff0c;就是匹配多个位置 let RouterModules import.meta.glob(["/src/view/*/*.vue", "/src/view/*.vue"]);这样我们就拿到了相对路劲的组件对象&#xf…

【学习笔记】Windows GDI绘图(五)图形路径GraphicsPath详解(上)

文章目录 图形路径GraphicsPath填充模式FillMode构造函数GraphicsPath()GraphicsPath(FillMode)GraphicsPath(Point[],Byte[])和GraphicsPath(PointF[], Byte[])GraphicsPath(Point[], Byte[], FillMode)和GraphicsPath(PointF[], Byte[], FillMode)PathPointType 属性FillMode…

最新版npm详解

如&#xff1a;npm中搜索 jQuery image.png image.png 接地气的描述&#xff1a;npm 类似于如下各大手机应用市场 image.png image.png 查看本地 node 和 npm 是否安装成功 image.png image.png 或 npm install -g npm image.png image.png image.png image.png image.…

Spring Boot集成Picocli快速入门Demo

1.什么是Picocli&#xff1f; Picocli是一个单文件命令行解析框架&#xff0c;它允许您创建命令行应用而几乎不需要代码。使用 Option 或 Parameters 在您的应用中注释字段&#xff0c;Picocli将分别使用命令行选项和位置参数填充这些字段。使用Picocli来编写一个功能强大的命…

16.线性回归代码实现

线性回归的实操与理解 介绍 线性回归是一种广泛应用的统计方法&#xff0c;用于建模一个或多个自变量&#xff08;特征&#xff09;与因变量&#xff08;目标&#xff09;之间的线性关系。在机器学习和数据科学中&#xff0c;线性回归是许多入门者的第一个模型&#xff0c;它…

蓝桥杯Web开发【大学组:省赛】2022年真题

1.水果拼盘 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案&#xff0c;本题可以使用 Flex 属性快速完成布局。 1.1 题目问题 建议使用 flex 相关属性完成 css/style.css 中的 TODO 部分。 禁止修改圆盘的位置和图片的大小。相同颜色的水果放在相同颜色的…

根据Depth Quality Tool的z轴误差值确认相机是否需要进行相机内参校准

下载Depth Quality Tool深度质量验证工具 网盘链接【RealSense SDK v2.55.1】 链接&#xff1a;https://pan.baidu.com/s/1NrlbwNDBUL8wpWfVwbpMwA?pwd2jl0 提取码&#xff1a;2jl0 打开Depth Quality Tool深度质量验证工具 找一面墙作为目标&#xff0c;将摄像头水平对准墙…

ISCC 2024|Misc

FunZip ISCC{xoMjL8NuYRRb} Number_is_the_key ISCC{Sanoyq6qGIPF} 精装四合一 四张图片尾部都存在多余数据&#xff0c;把多余数据分别提取出来保存成文件&#xff0c;未发现规律。根据提示&#xff0c;预计需要将四部分多余数据进行合并。提取四个部分前16个字节&#xff0…