当前位置: 首页 > news >正文

HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div class="box"><div class="header"><div class="header1"><img src="./img/logo_top.png"><ul><li class="first"><a href="">首页</a></li><li><a href="">发现</a></li><li><a href="">图片</a></li><li><a href="">分类</a></li></ul></div></div><div class="bb2"><div class="bb2_1">花中之王</div><div class="bb2_main"><div class="bb2_left"><img src="./img/b1.jpeg"></div><div class="bb2_hh"><div class="bb2_hhh">牡丹</div><div class="bb2_con">牡丹(学名:Paeonia × suffruticosa Andr.)是毛茛科、芍药属植物。花色泽艳丽,玉笑珠香,风流潇洒,富丽堂皇,素有“花中之王”的美誉。在栽培类型中,主要根据花的颜色,可分成上百个品种。牡丹品种繁多,色泽亦多,以黄、绿、肉红、深红、银红为上品,尤其黄、绿为贵。牡丹花大而香,故又有“国色天香”之称。</div></div></div></div><div class="bb3"><div class="bb3_1">牡丹</div><div class="bb3_main"><img src="./img/f1.jpeg"><img src="./img/f2.jpeg"><img src="./img/f3.jpeg"><img src="./img/f4.jpeg"></div></div><div class="bb4"><div class="bb4_1">花语</div><div class="bb4_main"><div class="bb4_21"><div class="bb4_21_1">荷花</div><div class="bb4_21_con">清白、高尚而谦虚(高风亮节),“出淤泥而不染,濯清涟而不妖”(周敦颐《爱莲说》),表示坚贞、纯洁、无邪、清正的品质。低调中显现出了高雅。荷花是花中品德高尚的花。</div></div><div class="bb4_21"><div class="bb4_21_1">兰花</div><div class="bb4_21_con">兰花的花语是高贵、典雅、美好、贤良、清高、淡泊。自古以来兰花就象征着淡泊名利、清高典雅,兰花还代表了兄弟情深和爱国的情感,是高尚的代名词。</div></div><div class="bb4_21"><div class="bb4_21_1">梅花</div><div class="bb4_21_con">梅花的花语是凌霜斗雪,迎春开放,坚强、高雅、风骨俊傲、不趋荣利。 象征的意义 梅花象征着高洁、坚强、美丽,有傲骨之风、不畏严寒、贫寒却有德行的人。</div></div><div class="bb4_21"><div class="bb4_21_1">菊花</div><div class="bb4_21_con">菊花的花语是悲痛哀悼、淡泊名利、高洁雅致。菊花有悲痛哀悼的意思,常用于悼念逝去的朋友或亲人,例如在葬礼或扫墓时就多用菊花;菊花有淡泊名利的意思。</div></div></div></div>

五、源码获取

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

相关文章:

HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…...

Keepalive 解决nginx 的高可用问题

一 说明 keepalived利用 VRRP Script 技术&#xff0c;可以调用外部的辅助脚本进行资源监控&#xff0c;并根据监控的结果实现优先动态调整&#xff0c;从而实现其它应用的高可用性功能 参考配置文件&#xff1a; /usr/share/doc/keepalived/keepalived.conf.vrrp.localche…...

DPN网络

DPN DPN&#xff08;Dual Path Networks&#xff09;是一种网络结构&#xff0c;它结合了DensNet和ResNetXt两种思想的优点。这种结构的目的是通过不同的路径来利用神经网络的不同特性&#xff0c;从而提高模型的效率和性能。 DenseNet 的特点是其稠密连接路径&#xff0c;使…...

循序渐进丨MogDB 数据库新特性之SQL PATCH绑定执行计划

1 SQL PATCH 熟悉 Oracle 的DBA都知道&#xff0c;生产系统出现性能问题时&#xff0c;往往是SQL走错了执行计划&#xff0c;紧急情况下&#xff0c;无法及时修改应用代码&#xff0c;DBA可以采用多种方式针对于某类SQL进行执行计划绑定&#xff0c;比如SQL Profile、SPM、SQL …...

【论文阅读随笔】RoPE/旋转编码:ROFORMER: ENHANCED TRANSFORMER WITH ROTARY POSITION EMBEDDING

文章目录 1.目的&#xff1a;通过绝对位置编码的方式实现相对位置编码2.理解RoPE&#xff0c;在我看来有几个需要注意的点&#xff1a;3.本文相关复数概念&#xff1a;3.1.复数乘法的几何意义3.2.复数内积 VS. 复数乘法 4.REF&#xff1a; 1.目的&#xff1a;通过绝对位置编码的…...

数据挖掘

一.数据仓库概述&#xff1a; 1.1数据仓库概述 1.1.1数据仓库定义 数据仓库是一个用于支持管理决策的、面向主题、集成、相对稳定且反映历史变化的数据集合。 1.1.2数据仓库四大特征 集成性&#xff08;Integration&#xff09;&#xff1a; 数据仓库集成了来自多个不同来源…...

java SSM旅游景点与公交线路查询系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM旅游景点与公交线路查询系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系…...

解决Git报错:fatal: detected dubious ownership in repository at

在通过 Git Bash 提交项目代码时输入 git add . 命令后&#xff0c;报错&#xff1a;fatal: detected dubious ownership in repository at 这是因为该项目的所有者与现在的用户不一致 比如说&#xff1a; 该项目的所有者是 Administrator&#xff0c;而当前用户是 YuYang, 那…...

网络协议常见问题

网络协议常见问题 OSI&#xff08;Open Systems Interconnection&#xff09;模型OSI 封装 TCP/IP协议栈IP数据报的报头TCP头格式UDP头格式TCP (3-way shake)三次握手建立连接&#xff1a;为什么三次握手才可以初始化 Socket、序列号和窗口大小并建立 TCP 连接。每次建立TCP连接…...

人工智能的迷惑行为

目录 前言1 人工智能的“幽默”瞬间1.1 语义误解1.2 逻辑错误 2 技术原理探究2.1 算法设计缺陷2.2 数据处理不当 3 社会影响分析3.1 信任度下降3.2 技术担忧 结语 前言 随着人工智能技术的迅猛发展&#xff0c;各类AI大模型如ChatGPT、文心一言、通义千问等纷纷登场&#xff0…...

XR技术:短剧制作的全新纪元

在数字技术的浪潮中&#xff0c;XR&#xff08;扩展现实&#xff09;技术以其独特的魅力&#xff0c;正在为短剧制作带来革命性的突破。这种融合了虚拟现实、增强现实和混合现实等先进技术的创新工具&#xff0c;正逐渐改变着短剧制作的传统模式&#xff0c;引领着短剧艺术走向…...

安卓 OpenGL ES 学习笔记

文章目录 OpenGL 学习笔记OpenGL 是什么&#xff1f;OpenGL ES是什么&#xff1f;怎么用&#xff1f;hello world如何实现动画效果 参考文章 OpenGL 学习笔记 OpenGL 是什么&#xff1f; OpenGL&#xff08;Open Graphics Library&#xff09;是一个跨平台的图形编程接口&…...

git分布式管理-头歌实验冲突处理、忽略文件

一、解决冲突 任务描述 在团队协作开发过程中&#xff0c;可能你和团队中的其他成员&#xff0c;都修改了某个文件的某一部分内容&#xff0c;且其他成员已将该修改推送到了远程仓库。这样当你需要合并他的代码的时候&#xff0c;可能就会在内容上出现冲突&#xff0c;这个时候…...

【实战项目】网络编程:在Linux环境下基于opencv和socket的人脸识别系统--C++实现

&#x1f31e;前言 这里我们会实现一个项目&#xff1a;在linux操作系统下基于OpenCV和Socket的人脸识别系统。 目录 &#x1f31e;前言 &#x1f31e;一、项目介绍 &#x1f31e;二、项目分工 &#x1f31e;三、项目难题 &#x1f31e;四、实现细节 &#x1f33c;4.1 关…...

零售EDI:劳氏 Lowe‘s EDI项目案例

通过 EDI&#xff0c;企业与Lowes之间可以直接交换各种商业文档&#xff0c;如订单、发票、收据等&#xff0c;从而实现信息的实时交换&#xff0c;提高了供应链的效率和准确性。在现代供应链管理中&#xff0c;EDI 已经成为了不可或缺的重要工具。 作为一家拥有多条业务线的企…...

为什么不用 index 做 key?

“在 Vue 中&#xff0c;我们在使用 v-for 渲染列表的时候&#xff0c;为什么要绑定一个 key&#xff1f;能不能用 index 做 key&#xff1f;” 在聊这个问题之前我们还得需要知道 Vue 是如何操作 DOM 结构的。 虚拟DOM 我们知道&#xff0c;Vue 不可以直接操作 DOM 结构&am…...

Linux虚拟机安装Redis

官网下载压缩包&#xff1a;官网链接&#xff0c;然后将对应的tar.gz压缩包放入虚拟机下的/opt目录下。由于redis是C语言开发的&#xff0c;因此需要安装gcc编译器来编译代码&#xff0c;我们下载的压缩包里面是源代码&#xff0c;需要编译。通过yum install gcc指令下载C语言的…...

网络安全: Kali Linux 进行 SSH 渗透与防御

目录 一、实验 1.环境 2.nmap扫描目标主机 3.Kali Linux 进行 SSH 渗透 3.Kali Linux 进行 SSH 防御 二、问题 1.SSH有哪些安全配置 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统版本IP备注Kali Linux2022.4 192.168.204.154&#xff08;动态&…...

近年来文本检测相关工作梳理

引言 场景文本检测任务&#xff0c;一直以来是OCR整个任务中最为重要的一环。虽然有一些相关工作是端对端OCR工作的&#xff0c;但是从工业界来看&#xff0c;相关落地应用较为困难。因此&#xff0c;两阶段的OCR方案一直是优先考虑的。 在两阶段中&#xff08;文本检测文本识…...

文件系统事件监听

文件系统事件和网络IO事件一样&#xff0c;也可以通过epoll或者IOCP 事件管理器统一调度&#xff0c;当所监控的文件或文件夹发生了增删改的事件时&#xff0c;就会触发事件回调&#xff0c;进行事件处理。很常见的应用&#xff0c;如配置文件立即生效功能&#xff0c;就可以通…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...