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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.mzph.cn/diannao/15510.shtml

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

相关文章

em,rem,vw,vh,px,rpx,%的用法

单位特性注意事项em相对于父元素的字体大小与rem相比&#xff0c;em的值会随着父元素字体大小的变化而变化&#xff0c;这可能导致嵌套元素的大小难以预测。rem相对于根元素&#xff08;通常是html元素&#xff09;的字体大小与em相比&#xff0c;rem的值不会受到父元素字体大小…

下载CentOS系统或者下载Ubuntu系统去哪下?

因为Centos官网是挂在国外的服务器上&#xff0c;下载镜像时相比于国内的下载速度会慢很多&#xff0c;分享国内的镜像站去阿里巴巴下载Centos镜像。 首先分享两种下载方式&#xff0c;如果只想下载Centos那么就访问方式一的下载地址即可&#xff0c;如果还想下载其他的系统&a…

关于Broken pipe异常的一点学习记录

什么是Broken pipe? pipe&#xff0c;管道&#xff0c;管道里面自然就是数据&#xff0c;通过指从文件或网络套接字读取的数据。当一个进程试图向一个已关闭的管道&#xff08;pipe&#xff09;写数据或者从一个已关闭的通道读数据时就会出现中断&#xff0c;也就是Broken pi…

【算法设计与分析】基于Go语言实现动态规划法解决TSP问题

本文针对于最近正在学习的Go语言&#xff0c;以及算法课实验所需内容进行Coding&#xff0c;一举两得&#xff01; 一、前言 由于这个实验不要求向之前的实验一样做到那种连线的可视化&#xff0c;故可以用图形界面不那么好实现的语言进行编写&#xff0c;考虑到Go语言的…

v-if 和 v-for 为什么不建议一起使用 ?

在 Vue.js 中&#xff0c;通常不建议在同一个元素上同时使用 v-if 和 v-for 指令&#xff0c;原因主要有以下几点&#xff1a; 优先级问题&#xff1a; 在 Vue 2.x 中&#xff0c;v-if 和 v-for 在同一个元素上使用时&#xff0c;v-if 的优先级会比 v-for 高。这意味着 v-if 会…

C# 结合 JS 暴改腾讯 IM SDK Demo

目录 关于腾讯 IM SDK Demo 范例运行环境 设计思路 服务端生成地址 IM 服务端接收 IM 客户端程序 小结 关于腾讯 IM SDK Demo 腾讯云即时通信 IM SDK 提供了单聊、群聊、关系链、消息漫游、群组管理、资料管理、直播弹幕等功能&#xff0c;并提供完备的 App 接入及管…

数据可视化第9天(利用wordcloud和jieba分析蝙蝠侠评论的关键字)

数据可以在这里下载 https://github.com/harkbox/DataAnalyseStudy WordCloud wordcloud可以很方便的生成词云图&#xff0c;方便的提供可视化可以直接使用pip install wordcloud进行安装如果使用的是Anaconda,可以使用conda install进行安装 下面看一个简单的例子 txt &qu…

【游戏引擎】Unity动画系统详解

持续更新。。。。。。。。。。。。。。。 【游戏引擎】Unity动画系统详解 Unity动画系统详解简介关键帧动画创建关键帧动画的步骤&#xff1a; Mecanim动画系统Mecanim的关键组件&#xff1a;使用Mecanim创建动画的步骤&#xff1a; 动画控制器动画控制器的高级功能&#xff1a…

Linux文件操作——实现cp指令以及模拟修改配置文件

cp指令格式 cp [原文件] [目标文件] cp 1.c 2.c 功能是将原文件1.c复制后并改名成2.c(内容相同,实现拷贝) 这里需要引入main函数的参数解读: 我们在定义函数时许多都带有参数,输入参数后便可进行定义函数内的功能执行,而main函数也不例外,其函数定义和参数格式如下:…

【STM32CubeIDE】软件硬件SPI+六针OLED使用

前言 本文将介绍STM32 6针OLED的使用&#xff0c;分别使用软件和硬件两种SPI驱动方式&#xff0c;最终实现OLED显示TEST-ok字符和数字累加刷新显示 软件平台&#xff1a;STM32CubeIDEHAL库 硬件&#xff1a;STM32F103ZET6(正点原子战舰V3)六针OLED 题外话&#xff1a; 最…

Commons-Collections篇-CC1链小白基础分析学习

1.介绍 Apache Commons工具包中有⼀个组件叫做 Apache Commons Collections &#xff0c;其封装了Java 的 Collection(集合) 相关类对象&#xff0c;它提供了很多强有⼒的数据结构类型并且实现了各种集合工具类&#xff0c;Commons Collections被⼴泛应⽤于各种Java应⽤的开发&…

Windows安装VMware(Broadcom)

1.安装前提 1.检查BIOS中是否开启了虚拟化技术。1.1 打开任务管理器&#xff0c;查看性能&#xff0c;CPU部分&#xff0c;虚拟化处于“已启用”状态。1.2 如果没有开启&#xff0c;则需要进入BIOS系统&#xff0c;将 Intel Virtualization Technology改为Enalble。2.下载VMwa…

linux下删除nginx进程

centos 环境 nginx占用80端口&#xff0c;正常情况无法停止、删除。 使用netstat ,ps等命令一旦查到80端口 nginx进程号&#xff0c;使用kill -9 删除后发现nginx进程号还是存在&#xff0c;只是变了个号码。 使用如下命令 lsof -iTCP -sTCP:LISTEN -P | grep :80 然后再 ki…

卷积神经网络CNN动态演示和输出特征图计算公式

目录 一、卷积运算 1、卷积&#xff08;Convolution&#xff09; 2、填充&#xff08;Padding&#xff09; &#xff08;1&#xff09;Valid Padding &#xff08;2&#xff09;Same Padding 3、步长 4、卷积核大小为什么一般为奇数奇数&#xff1f; 5、卷积核kernel和…

React Native 之 Alert()和prompt()(十三)

在 React Native 中&#xff0c;Alert 是一个全局的 API&#xff0c;用于显示原生系统的对话框。与 Web 浏览器中的 alert() 函数类似&#xff0c;但它提供了更多的功能和更好的用户体验&#xff0c;因为它是基于原生系统的对话框&#xff0c;而不是基于 Web 的弹出框。 alert(…

笔记88:LeetCode_134_加油站

前言&#xff1a; 前言1&#xff1a;这个题的题目条件给的不太严谨&#xff0c;题目描述中说“如果存在解&#xff0c;则保证它是唯一的”&#xff0c;通过我的实践&#xff0c;我发现这句话的意思其实是本题的所有样例只有两种情况&#xff0c;无解/有唯一解&#xff1b;而不可…

迅睿 CMS 中开启【ionCube 扩展】的方法

有时候我们想要某种功能时会到迅睿 CMS 插件市场中找现有的插件&#xff0c;但会有些担心插件是否适合自己的需求。于是迅睿 CMS 考虑到这一层推出了【申请试用】&#xff0c;可以让用户申请试用 30 天&#xff0c;不过试用是有条件的&#xff0c;条件如下&#xff1a; php 版…

Python入门第三课——Python 数据类型(详细)

文章回顾 Python入门第一课——Python起步安装、Sublime Text安装教程&#xff0c;环境配置Python入门第二课——Python的变量和简单数据类型 目录 文章回顾前言一、Python的详细数据类型二、各种数据类型和使用方法1.Number&#xff08;数字&#xff09;2、String&#xff08…

Midjourney是一个基于GPT-3.5系列接口开发的免费AI机器人

Midjourney是一个基于GPT-3.5系列接口开发的免费AI机器人&#xff0c;旨在提供多领域的智能对话服务。Midjourney在不同领域中有不同的定义和应用&#xff0c;以下是对其中两个主要领域的介绍&#xff1a; Midjourney官网&#xff1a;https://www.midjourney.com/ 一、AI绘画工…

Windows11搭建Flutter3开发环境

下载&#xff1a;https://docs.flutter.cn/get-started/install/windows/desktop?tabdownload 下载以后解压到C盘&#xff1a; 将bin目录添加到环境变量PATH&#xff1a; 打开终端&#xff0c;输入&#xff1a; flutter doctor执行下面的命令&#xff0c;同意安卓协议&am…