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,一经查实,立即删除!

相关文章

el-date-picker时间禁用问题

// 选择今天以及今天以后的日期 export const disabledDate (time) > {return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 }设置开始时间小于结束时间&#xff08;不能等于&#xff09; export const disabledDate (date) …

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;正位于这两项互补技…

设计模式(结构型设计模式——代理模式)

设计模式&#xff08;结构型设计模式——代理模式&#xff09; 代理模式 基本定义 代理模式就是给一个对象提供一个代理&#xff0c;并由代理对象控制对原对象的引用。在代理模式中&#xff0c;“第三者”代理主要是起到一个中介的作用&#xff0c;它连接客户端和目标对象。 …

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…

单片机-点亮LED灯

[2-1] 点亮一个LED_哔哩哔哩_bilibili main()程序执行结束后&#xff0c;单片机会再次执行main()。 不断执行P20xFE;&#xff08;点亮LED灯1&#xff09; #include "reg52.h"void main() {P20xFE; //1111 1110 } 只执行一次P20xFE&#xff1b; #include "r…

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

那些成功的数据库公司没有一家是通过性能比竞争对手更快而成功的。 作者&#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;这是…

【iOS ARKit】触发器与触发域

触发器 在上节的示例中&#xff0c;所有可见的物体都参与了物理模拟&#xff0c;但在一些应用中&#xff0c;我们物理模拟&#xff0c;同时又需要了解是否有物体与它们发生了碰撞。如在 AR场景中&#xff0c;当角色靠近一散门时&#xff0c;我们并不希望因为角色与门发生碰撞而…

自然语言处理学习总结

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

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

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

Kafka整理-Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)的区别是什么?

Apache Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)虽然都是处理消息和数据流的中间件,但它们在设计理念、架构、功能和使用场景方面有显著的区别。下面是Kafka与传统消息队列系统的主要区别: 1. 设计目的和使用场景 Kafka: 设计初衷是为处理大量的实时数据流。强调高…

埃隆·马斯克与OpenAI诉讼案剖析

解析马斯克与OpenAI的法律纠纷 摘要 在人工智能迅速发展的背景下&#xff0c;一场法律纠纷引起了广泛关注&#xff0c;它涉及到了理想主义与商业现实的交汇点。特斯拉创始人埃隆马斯克起诉了他共同创立的人工智能研究组织OpenAI。马斯克认为OpenAI背离了其最初的宗旨&#xf…

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 …

计算机网络——协议层次及服务模型

计算机网络中的协议层次是指将网络功能划分为不同的层次&#xff0c;每个层次负责特定的功能&#xff0c;并通过协议进行通信。 一、为什么要分层 分层是设计/讨论复杂系统的有效方法。分层使得复杂系统概念化&#xff0c;结构清晰便于标示网路组件&#xff0c;以及描述其相互…

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

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

html5cssjs代码 024 响应式布局示例

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