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

news2024/9/21 4:29:34

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1527845.html

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

相关文章

vue元素声明之后未使用的解决方法

错误情况&#xff1a;类似的这种元素声明未使用的情况 解决方法 方法一 将lintOnSave :false 改为lintOnSave:true 方法二 在项目中找到package.json........① 使用快捷键Ctrl F 搜索eslintconfig........② 找到eslintconfig..........③ 找到rules .........④ 添…

python农产品农药商城溯源系统vue+Django_flask

后端&#xff1a;python 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask Python版本&#xff1a;python3.7 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;PyCharm 使用Navicat或者其它工具&#xff0c;在mysql中创建对应名称…

嵌入式学习第二十九天!(数据结构的概念、单向链表)

数据结构&#xff1a; 1. 定义&#xff1a; 一组用来保存一种或者多种特定关系的数据的集合&#xff08;组织和存储数据&#xff09; 1. 程序设计&#xff1a; 将现实中大量而复杂的问题以特定的数据类型和特定的数据结构存储在内存中&#xff0c;并在此基础上实现某个特定的功…

CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记

CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记 文章目录 CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记前记获取键值或下标的方式获取属性的方式 Level 1 no wafLevel 2 bl[\{\{]Level 3 no waf and blindLevel 4 bl[[, ]]获取键值或下标 Level 5 bl[\, "]Level 6 bl[_]Level …

高通 8255 基本通信(QUP)Android侧控制方法说明

一&#xff1a;整体说明 高通8255芯片中&#xff0c;SPI IIC UART核心统一由QUP V3 进行控制 QUP V3为可编程模块&#xff0c;可以将不同通道配置为SPI IIC UART通路&#xff0c;此部分配置在QNX侧 QUP 资源可以直接被QNX使用&#xff0c;Android侧可以通过两种方法使用QUP资源…

一次完整的 HTTP 请求所经历的步骤

1&#xff1a; DNS 解析(通过访问的域名找出其 IP 地址&#xff0c;递归搜索)。 2&#xff1a; HTTP 请求&#xff0c;当输入一个请求时&#xff0c;建立一个 Socket 连接发起 TCP的 3 次握手。如果是 HTTPS 请求&#xff0c;会略微有不同。 3&#xff1a; 客户端向服务器发…

B树B+树,字典树详解,哈夫曼树博弈树

目录 B树&#xff1a;B-Tree B树 字典树&#xff1a;Trie Tree 哈夫曼树 博弈树 B树&#xff1a;B-Tree 多路平衡搜索树 1.M阶B树&#xff0c;就是M叉&#xff08;M个指针&#xff09;。 2.每个节点内记录个数<M-1。 3.根节点记录个数>1。 4.其余节点内记录个数&…

JavaScript之继承

继承 父类与子类 子类是父类的一个子集 比如&#xff1a;人类和医生类&#xff0c;医生类是人类的子集&#xff1b;人类是父类&#xff0c;医生类是子集 父类与子类在特性&#xff08;属性和方法&#xff09;上有什么关系 方法&#xff1a;子类对象可以调用父类原型上的方…

Nadaraya-Watson核回归

目录 基本原理 ​编辑 核函数的选择 带宽的选择 特点 应用 与注意力机制的关系 参考内容 在统计学中&#xff0c;核回归是一种估计随机变量的条件期望的非参数技术。目标是找到一对随机变量 X 和 Y 之间的非线性关系。 在任何非参数回归中&#xff0c;变量 Y 相对于变量…

Jenkins 一个进程存在多个实例问题排查

Jenkins 一个进程存在多个实例问题排查 最近Jenkins升级到2.440.1​版本后&#xff0c;使用tomcat​服务部署&#xff0c;发现每次定时任务总会有3-4个请求到我的机器人上&#xff0c;导致出现奇奇怪怪的问题。 问题发现 机器人运行异常&#xff0c;总有好几个同时请求的服务。…

Selenium 自动化 —— 使用WebDriverManager自动下载驱动

上一篇文章 入门和 Hello World 实例 中&#xff0c;我们提供了一个最简单的 Selenium 上手的例子。 但是某一天&#xff0c;突然发现相同的代码居然运行报错了。这是怎么回事呢&#xff1f; 日志排查 日志中其实提示的很明显了&#xff1a;Chrome浏览器和Chrome WebDriver的…

python中如何解析Html

在最近需要的需求中&#xff0c;需要 python 获取网页内容&#xff0c;并从html中获取到想要的内容。这里记录一下两个比较常用的python库对html的解析。 1. BeautifulSoup 它是一个非常流行的python脚本库&#xff0c;用于解析HTML和XML文档。如果你对 java 很熟悉&#xff…

软件测试教程 自动化测试之Junit框架

文章目录 1. 什么是 Junit &#xff1f;2. 常见的注解2.1 Test2.2 BeforeAll&#xff0c;AfterAll2.3 BeforeEach&#xff0c;AfterEach 3. 测试用例顺序指定4. 参数化4.1 单个参数4.2 多个参数4.3 通过方法生成 5. 测试套件6. 断言6.1 断言相等6.2 断言不相等6.3 断言为空6.4 …

医疗器械经营许可证办理流程及申请流程有哪些?

1、证书内容差异&#xff1a; 1.医疗器械经营许可证应当载明许可证号码、法定代表人、负责人、住所、经营范围、仓库地址、发证部门、日期及有效期、公司名称等事项。 2.医疗器械生产经营管理注册证书应当载明编号、公司产品名称、法定代表人、住所、经营活动场所、业务发展方…

小程序云开发(十六):JavaScript基础

&#x1f517; 运行环境&#xff1a;小程序云开发 &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 &#x1f510;#### 防伪水印——左手の明天 ####&#x1f510; &#x1f497…

计算机网络:TCP篇

计网tcp部分面试总结 tcp报文格式&#xff1a; 序列号&#xff1a;通过SYN传给接收端&#xff0c;当SYN为1&#xff0c;表示请求建立连接&#xff0c;且设置序列号初值&#xff0c;后面没法送一次数据&#xff0c;就累加数据大小&#xff0c;保证包有序。 确认应答号&#x…

基于C/C++的easyx图形库教程

文章目录: 一&#xff1a;前言 二&#xff1a;窗口&#xff08;宽高 背景颜色 窗口标题 弹出对话框&#xff09; 三&#xff1a;图形绘制&#xff08;点 线 矩形 圆 椭圆&#xff09; 四&#xff1a;文字&#xff08;颜色 大小 背景 位置 打印 文字居中&#xff09; 五&a…

动态规划(算法竞赛、蓝桥杯)--单调队列优化绿色通道

1、B站视频链接&#xff1a;E45 单调队列优化DP 绿色通道_哔哩哔哩_bilibili #include <bits/stdc.h> using namespace std; const int N5e410; int n,tim,w[N],f[N],q[N];bool check(int m){int h1,t0;for(int i1; i<n; i){while(h<t && f[q[t]]>f[i-…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Line)

直线绘制组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Line(value?: {width?: string | number, height?: string | number}) 从API version 9开始&#xff0c;该接…

巧用眼精星一键批量识别营业执照为结构化Excel

在现代社会&#xff0c;数字化办公已成为企业管理的重要方式之一。而在处理营业执照等票证文件时&#xff0c;如何高效准确地进行识别和管理也显得尤为重要。眼精星票据识别系统作为一款优秀的OCR识别软件&#xff0c;为用户提供了便捷快速的解决方案。接下来&#xff0c;我们将…