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.想要获取本文源码,点击前往吧

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

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

相关文章

C语言:基于单链表实现的泊车管理系统

一、需求 &#xff08;1&#xff09;管理员方账号登录&#xff1b; &#xff08;2&#xff09;车位管理显示&#xff1a;车位状态&#xff1b; &#xff08;3&#xff09;收费管理&#xff1a;小轿车 5元/小时&#xff0c;面包车6元/小时&#xff0c;大货车或客车7元/小时&a…

node.js 下 mysql2 的 CURD 功能极简封装

此封装适合于使用 SQL 直接操作数据库的小型后端项目&#xff0c;更多功能请查阅MySQL2官网 // 代码保存到单独的 js 文件const mysql require(mysql2/promise)const debug true let conn/*** 执行 SQL 语句* param {String} sql* param {*} params* returns {Array}*/ const…

ChatGPT提示技巧——零,一和少量示例提示

ChatGPT提示技巧——零&#xff0c;一和少量示例提示 ​ 零样本(zero-shot)、少样本(few-shot)和单样本(one-shot)提示是用于在最少或没有示例的情况下从ChatGPT生成文本的技巧。这些技巧用于当某个具体任务有限定数据的时候或者任务是新的并且没有很好的定义的时候。 提示格…

JVM的各种垃圾回收器(GC)

1. Serial GC Serial GC 是用于单线程环境的垃圾回收器&#xff0c;它使用复制算法&#xff08;Copy&#xff09;进行年轻代的垃圾回收&#xff0c;而老年代则使用标记-整理&#xff08;Mark-Compact&#xff09;算法。由于它在进行垃圾回收时会暂停其他所有的工作线程&#xf…

严密的逻辑会不会影响创新

严密的逻辑可以对创新产生积极的影响&#xff0c;也可能对创新产生负面的影响。以下是两种可能的情况&#xff1a; 积极影响&#xff1a;严密的逻辑可以帮助创新者更好地理解问题&#xff0c;并找到解决问题的方法。它可以帮助人们分析和评估不同的创新想法&#xff0c;以确定哪…

设计模式之——简单工厂模式

上图为简单工厂模式的架构图。 1&#xff0c;产品&#xff08;Product&#xff09; 将会对接口进行声明。 2&#xff0c;具体产品&#xff08;Concrete Products&#xff09;是产品接口的不同实现。 3&#xff0c;创建者&#xff08;Concrete Creators&#xff09;将会重写基…

二刷代码随想录算法训练营第十五天 |层序遍历 10、 226.翻转二叉树 、101.对称二叉树 2

目录 一、102. 二叉树的层序遍历 二、226. 翻转二叉树 三、101. 对称二叉树 一、102. 二叉树的层序遍历 题目链接&#xff1a;力扣 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a; 讲透二叉树的层序遍历 | 广度优先搜索 | LeetCode&#xff1a;102.二叉树的层序遍历…

TCP传输收发

TCP通信: TCP发端: socket connect send recv close TCP收端: socket bind listen accept send recv close 1.connect int connect(int sockfd, const struct sockaddr *addr, socklen_t ad…

先缓存第二集抖音接入 ,最近加班猛,就分享简单的知识,如何使用:关于使用replace的用法正则表达式

1、需求&#xff1a;比如在cocos creator策划让你制作一个预制体&#xff0c;标题要读取配置&#xff0c;然后中间显示的内容要滚动的&#xff0c;要做成一个通用的&#xff0c;然后给到的配置表是这样子的: 配置表&#xff1a;假设字段是这样子的 content "内容标题&…

Intel 历代 CPU 型号

以下所有型号均为一整个系列&#xff0c;加上前缀、后缀啥的&#xff0c;差异化早在1970年代就被美国资本家玩明白了&#xff0c;充分地占领了市场。 CPU型号时间位数频率内存寻址地址总线说明400419714位740KHz640B4001(ROM)&#xff0c;4002(RAM)&#xff0c;4003(register)…

20个Python函数程序实例

前面介绍的函数太简单了&#xff1a; 以下是 20 个不同的 Python 函数实例 下面深入一点点&#xff1a; 以下是20个稍微深入一点的&#xff0c;使用Python语言定义并调用函数的示例程序&#xff1a; 20个函数实例 简单函数调用 def greet():print("Hello!")greet…

寻找最近的公共父视图

题目 求两个视图的最近公共父视图 暴力解法 采用的是两个 while 循环嵌套迭代来查询最近的公共父视图, 时间复杂度 O(n), 详见 Masonry 的实现&#xff1a; - (instancetype)mas_closestCommonSuperview:(MAS_VIEW *)view {MAS_VIEW *closestCommonSuperview nil;MAS_VIEW *…

css-vxe-form-item中输入框加自定义按钮(校验位置错误)

1.浮动错误效果 提示内容不对 2.不使用浮动&#xff0c;使用行内块元素 代码如下 <vxe-form-item title"yoyo:" field"assembleWorkNo" span"8"><template #default><vxe-input style"width:70%;display:inline-block;&quo…

NLP神器Transformers入门简单概述

在这篇博客中,我们将深入探索 🤗 Transformers —— 一个为 PyTorch、TensorFlow 和 JAX 设计的先进机器学习库。🤗 Transformers 提供了易于使用的 API 和工具,使得下载和训练前沿的预训练模型变得轻而易举。利用预训练模型不仅能减少计算成本和碳足迹,还能节省从头训练…

全天候购药系统(微信小程序+web后台管理)

PurchaseApplet 全天候购药系统&#xff08;微信小程序web后台管理&#xff09; 传统线下购药方式存在无法全天候向用户提供购药服务&#xff0c;无法随时提供诊疗服务等问题。为此&#xff0c;运用软件工程开发规范&#xff0c;充分调研建立需求模型&#xff0c;编写开发文档…

Java输入和输出处理

一、Java I/O 文件、内存、键盘--->程序--->文件、内存、控制台 二、文件 相关记录或放在一起的数据的集合 思考&#xff1a; Java程序如何访问文件属性&#xff1f; 解答&#xff1a; Java API:java.io.File类 三、File类 File类的常用方法 方法名称说明boole…

maven项目结构管理统一项目配置操作

一、maven分模块开发 Maven 分模块开发 1.先创建父工程&#xff0c;pom.xml文件中&#xff0c;打包方式为pom 2.然后里面有许多子工程 3.我要对父工程的maven对所有子工程进行操作 二、解读maven的结构 1.模块1 <groupId>org.TS</groupId><artifactId>TruthS…

黑马点评-分布式锁业务

分布式锁原理和实现 分布式系统部署了多个tomcat&#xff0c;每个tomcat都有一个属于自己的jvm&#xff0c;那么假设在服务器A的tomcat内部&#xff0c;有两个线程&#xff0c;这两个线程由于使用的是同一份代码&#xff0c;那么他们的锁对象是同一个&#xff0c;是可以实现互…

智能dns服务器、自建DNS服务器、自架DNS服务器、DNS分流

smart安装链接 [https://github.com/pymumu/smartdns/releases](https://github.com/pymumu/smartdns/releases)wget https://github.com/pymumu/smartdns/releases/download/all-best-ip/smartdns.1.2022.05.03-1046.x86_64-linux-all.tar.gz[rootlocalhost ~]# ls anaconda-k…

前端面试实战补丁24.3.7

1.CSS的position属性 在CSS中&#xff0c;position属性用于指定元素的定位方式。position属性有以下几个可能的值&#xff1a; static&#xff1a; 默认值。元素按照文档流进行定位&#xff0c;不会被特别地定位&#xff0c;也不会受到top、right、bottom、left或z-index属性的…