HTML静态网页成品作业(HTML+CSS)——宠物狗店网页(1个页面)

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div class="mm1"><div class="base"><div class="logo"><img src="./img/logo.png"></div><ul><li><a href="">首页</a></li><li><a href="">关于CFA</a></li><li><a href="">服务项目</a></li><li><a href="">新闻中心</a></li><li><a href="">联系方式</a></li></ul></div></div><div class="mm2"><div class="bb"><img src="./img/b1.png"></div><div class="mm2_top"><div><img src="./img/ii1.png"></div><div><img src="./img/ii2.png"></div><div><img src="./img/ii3.png"></div></div><div class="mm2_link"><a href="">了解更多</a></div></div><div class="mm3"><div class="mm3_top">宠物领养 pet daoption</div><div class="base"><div class="mm3_left"></div><div class="mm3_cc"><div class="mm3_it"><div class="mm3_img"><img src="./img/mm6.png"></div><div class="mm3_n"><div class="mm3_x">01</div><div class="mm3_nn">小狗宝宝寻求领养</div></div><div class="mm3_d">小公狗,听话粘人喜欢玩,因为家庭原因希望有爱他的主人能灵验.</div><div class="mm3_more"><a href="">了解更多</a>	</div></div><div class="mm3_it"><div class="mm3_img"><img src="./img/mm5.png"></div><div class="mm3_n"><div class="mm3_x">02</div><div class="mm3_nn">流浪花猫咪求抱走</div></div><div class="mm3_d">小花猫七个月了,是从宠物市场买回来的,猫咪有四分之一的波斯猫血统,对吃的百无禁忌,害怕吹风机,每次洗完澡都要取暖......</div><div class="mm3_more"><a href="">了解更多</a>	</div></div><div class="mm3_it"><div class="mm3_img"><img src="./img/mm4.png"></div><div class="mm3_n"><div class="mm3_x">03</div><div class="mm3_nn">蠢萌小猪急寻主人</div></div><div class="mm3_d">公仔荷兰猪一枚,1岁半,附送全套装备</div><div class="mm3_more"><a href="">了解更多</a>	</div></div></div><div class="mm3_right"></div></div></div>

五、源码获取

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

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

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

相关文章

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型 生成式人工智能的采用率显着上升。 在 2022 年 OpenAI ChatGPT 推出的推动下&#xff0c;这项新技术在几个月内就积累了超过 1 亿用户&#xff0c;并推动了几乎所有行业的开发活动激增。 到 2023 年&#xff0c;开发人员…

Covalent Network(CQT)借助最大规模的历史与实时 Web3 数据集,推动人工智能的发展

人工智能在众多领域中增强了区块链的实用性&#xff0c;反之亦然&#xff0c;区块链确保了 AI 模型所使用的数据的来源和质量。人工智能带来的生产力提升&#xff0c;将与区块链系统固有的安全性和透明度融合。 Covalent Network&#xff08;CQT&#xff09;正位于这两项互补技…

HarmonyOS NEXT应用开发之Navigation实现多设备适配案例

介绍 在应用开发时&#xff0c;一个应用需要适配多终端的设备&#xff0c;使用Navigation的mode属性来实现一套代码&#xff0c;多终端适配。 效果图预览 使用说明 将程序运行在折叠屏手机或者平板上观看适配效果。 实现思路 本例涉及的关键特性和实现方案如下&#xff1a…

backtrader回测股票:突破20日均线买入,跌破20日均线卖出

数据源&#xff1a;akshare 回测工具&#xff1a;backtrader 策略&#xff1a;突破20日均线买入&#xff0c;跌破20日均线卖出 代码&#xff1a; from datetime import datetime import backtrader as bt #1.9.78.123 import matplotlib.pyplot as plt #3.8.3 import aks…

数据库只追求性能是不够的!

那些成功的数据库公司没有一家是通过性能比竞争对手更快而成功的。 作者&#xff1a;JORDAN TIGANI&#xff0c;DuckDB 公司 MotherDuck 联合创始人&CEO 本文和封面来源&#xff1a;https://motherduck.com/&#xff0c;爱可生开源社区翻译。 本文约 4500 字&#xff0c;预…

论文阅读之AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE

文章目录 原文链接主要内容模型图技术细节实验结果 原文链接 AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 主要内容 这篇文章的主要内容是介绍了一种新的计算机视觉模型——Vision Transformer&#xff08;ViT&#xff09;&#xff0c;这是…

自然语言处理学习总结

目录 1、词表示 2、语言模型&#xff08;LM&#xff09; 3、常用学习网址 自然语言处理 1、词表示 词表示&#xff1a;自然语言中最基本的语言单位表示成机器理解的方式 方式一&#xff1a;词与词之间的相似度 方式二&#xff1a;词与词之间的关系 词义的表示方法&…

云手机在海外电商中的应用优势

随着海外市场的不断拓展&#xff0c;电商行业对于高效、安全的工具需求日益增长。在这一背景下&#xff0c;云手机作为一种新型服务&#xff0c;为海外电商提供了强大的支持和便利。云手机对传统物理手机起到了非常好的延展和补充作用&#xff0c;拓展了更广泛的应用场景&#…

RabbitMQ问题

如何实现顺序消费&#xff1f; 消息放入到同一个队列中消费 如何解决消息不丢失&#xff1f; 方案&#xff1a; 如上图&#xff1a;消息丢失有三种情况&#xff0c;解决了以上三种情况就解决了丢失的问题 1、丢失1--->消息在到达交换机的时候&#xff1b;解决&#xff1…

原生html vue3使用element plus 的树tree上移下移案例源码

上效果 html源码 <!DOCTYPE html> <html lang"en"> <!-- * Name: mallSalesReports.html * Description: * Author Lani * date 2024-02-28 18:32:36 --> <head><meta charset"UTF-8"><meta name"viewport" …

docker入门(五)—— 小练习,docker安装nginx、elasticsearch

练习 docker 安装 nginx # 搜素镜像 [rootiZbp15293q8kgzhur7n6kvZ home]# docker search nginx NAME DESCRIPTION STARS OFFICIAL nginx …

【Postrsql】postgresql的介绍、安装和使用

介绍 1.基本信息 PostgreSQL是一个功能强大的开源关系型数据库系统。经过长达15年以上的积极开发和不断改进&#xff0c;PostgreSQL已在可靠性、稳定性、数据一致性等获得了业内极高的声誉。目前PostgreSQL可以运行在所有主流操作系统上&#xff0c;包括Linux、Unix和Windows…

html5cssjs代码 024 响应式布局示例

html5&css&js代码 024 响应式布局示例 一、代码二、解释 该HTML代码重点在于构建一个带有响应式设计的两栏布局网页&#xff0c;包含页头、导航条、主要内容区&#xff08;左右两列&#xff09;和底部区域&#xff0c;并运用CSS样式设置页面元素的布局、颜色、字体、间…

【Node.js从基础到高级运用】十五、单元测试与集成测试

引言 在Node.js开发过程中&#xff0c;测试是确保代码质量和功能正确性的关键步骤。单元测试和集成测试是最常见的测试类型。下面我们将使用Jest框架来进行测试。 单元测试 单元测试是指对软件中的最小可测试单元进行检查和验证。在Node.js中&#xff0c;这通常指的是函数或者…

HarmonyOS开发:超详细介绍如何开源静态共享包,实现远程依赖

前言 当我们开发了一个独立的功能&#xff0c;想让他人进行使用&#xff0c;一般的方式就是开源出去&#xff0c;有源码的方式&#xff0c;也有文件包的形式&#xff0c;当然了也有远程依赖的方式&#xff0c;比如在Android中&#xff0c;我们可以提供源码&#xff0c;也可以打…

SQLiteC/C++接口详细介绍sqlite3_stmt类(一)

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类简介 下一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;二&#xff09; ​ 序言&#xff1a; 本文开始了SQLite的第二个类的详细介绍…

Qt 容器类控件

Group Box 使用 QGroupBox 实现一个带有标题的分组框可以把其他的控件放到里面作为一组&#xff0c;这样看起来能更好看一点. 核心属性 属性说明title分组框的标题alignment分组框内部内容的对齐方式flat是否是 “扁平” 模式checkable是否可选择. 设为 true&#xff0c;则在…

鸿蒙Harmony应用开发—ArkTS-高级组件:@ohos.advertising.AdComponent (非全屏广告展示组件))

本模块提供展示非全屏广告的能力。 说明&#xff1a; 本模块首批接口从API Version 11开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import { AdComponent } from ohos.advertising.AdComponent; AdComponent AdComponent(ads: Ar…

webpack5零基础入门-12搭建开发服务器

1.目的 每次写完代码都需要手动输入指令才能编译代码&#xff0c;太麻烦了&#xff0c;我们希望一切自动化 2.安装相关包 npm install --save-dev webpack-dev-server 3.添加配置 在webpack.config.js中添加devServer相关配置 /**开发服务器 */devServer: {host: localhos…

华为中心AP 配置入侵防御实验

配置入侵防御示例 组网图形 图1 入侵防御组网图 组网需求配置思路操作步骤中心AP的配置文件 组网需求 如图1所示&#xff0c;某企业部署了WLAN网络&#xff0c;内网用户可以访问Internet的Web服务器。现需要在中心AP上配置入侵防御功能&#xff0c;具体要求如下&#xff1a; 保…