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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

免费实时天气预报api接口

5分钟更新一次,包含基本天气信息、24小时逐小时天气、实时气象预警列表、湿度、能见度、气压、日出日落、9大生活指数、pm2.5、pm10、o3、no2、so2、是否需要带口罩、外出适宜、开窗适宜、是否需要打开净化器等,可按地名、城市编号、IP查询。 新增:优化预警字段, 返回实时预…

16、电源管理入门之驱动Runtime PM管理

目录 1. 框架介绍 1.1 为什么需要Runtime PM Framework? 1.2 系统框架图 2. Drivers 3. Runtime PM core 4. power domain framework 5. runtime pm的sysfs 6参考: Runtime PM管理也就是设备驱动里面的电源管理,即设备驱动结构体里面的struct dev_pm_ops,只控制设…

Spring Boot 配置热部署

前言 对于 Spring Boot 项目之中, 在刚开始学习的时候, 每当代码进行变动的时候, 想要生效那就必须要手动重启. 为什么要重启呢 ? 原因在于写的代码是依靠运行之后的 class 文件运行的, 当我们的代码更新以后, 如果不去手动重启, 那么就无法生成新的 class 文件, 执行的就是旧…

影响哈默纳科Harmonic减速机使用寿命的5大因素

哈默纳科HarmonicDrive减速机以其轻量、小型、传动效率高、减速范围广、精度高等特点&#xff0c;被广泛应用于各种传动系统中。然而&#xff0c;尽管哈默纳科Harmonic减速机具有诸多优势&#xff0c;但其使用寿命仍可能受到多种因素的影响。 首先&#xff0c;环境因素对哈默纳…

grid布局所有元素在同一行显示且等分列

目录 一、问题 二、实现方式 三、总结 tiips:如嫌繁琐&#xff0c;直接移步总结即可&#xff01; 一、问题 1.grid布局可以通过 grid-template-columns来指定列的宽度。且可以通过repeat来指定重复的次数。但是现在的需求是&#xff1a;grid布局中元素的数量不确定&#…

学生信息管理APP

设计内容简介 本次设计使用Android Studio实现一个学生信息管理系统,系统功能结构如下图所示: 详细设计 数据库设计SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低。…

排序算法:插入排序和希尔排序

一、插入排序 1.基本原理 插入排序&#xff08;英语&#xff1a;Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上…

27.基于springboot + vue实现的前后端分离-网上租赁交易系统(项目 + 论文)

项目介绍 本课题是根据用户的需要以及网络的优势建立的一个基于Spring Boot的网上租贸系统&#xff0c;来满足用户网络商品租赁的需求。本网上租贸系统应用Java技术&#xff0c;MYSQL数据库存储数据&#xff0c;基于Spring Boot框架开发。在网站的整个开发过程中&#xff0c;首…

学c++对Python有帮助吗?

学习C对Python编程确实有帮助&#xff0c;尽管这两种语言在许多方面有很大的不同。以下是学习C可能对Python编程产生帮助的几个方面&#xff1a; 理解底层概念&#xff1a;C是一种更接近硬件的编程语言&#xff0c;它要求程序员更深入地理解内存管理、指针、数据类型等底层概念…

linux上安装fastdfs及配置

一、基础环境准备 1、所需软件 名称说明libfastcommonfastdfs分离出的一些公用函数包fastdfsfastdas软件包fastdfs-nginx-modulefastdfst和nginx的关联模块nginxnginxl软件包 2、编辑环境 安装一些基础的支持环境 yum install git gccc gcc-c make automake autoconf libto…

个人项目介绍4:三维园区篇

个人项目介绍: 地图铁路线路篇 地球卫星篇 火车站篇 三维园区篇 项目需求&#xff1a; 1.按比例全景显示三维园区 2.精确显示园区内设备设施 3.实时显示设备报警信息 4.显示园区内摄像监控设备&#xff0c;并可点击显示监控视频流 5.显示园区内的重大危险源和风险分布 …

win 11修改通知显示时间

win11toast&#xff1a;python桌面通知工具-CSDN博客

力扣热题100_普通数组_73_矩阵置零

文章目录 题目链接解题思路解题代码 题目链接 73.矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&…

【金三银四的季节看下Java ORM的走向和性能对比】总结

写在最后 经过将近一周时间的框架收集、学习、实验、编码、测试市面上常见的ORM框架&#xff0c;过程中拜读了很多作者的博文、样例&#xff0c;学习很多收获很多。 重新梳理下整理的框架&#xff1a;mybatis-plus、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp、jpa、…

Kotlin/Java重写equals后==表现(2)

Kotlin/Java重写equals后表现&#xff08;2&#xff09; 如果不重写默认的equals方法&#xff0c;即使用Object默认的equals()方法&#xff0c;而Object默认的equals方法&#xff0c;其实比较两个对象的地址&#xff1a; fun main(args: Array<String>) {val u1 User(&…

手机app制作商用系统软件开发

手机端的用户占比已经超过了电脑端的用户量&#xff0c;企业想要发展手机端的业务就必须拥有自己的app软件&#xff0c;我们公司就是专门为企业开发手机软件的公司&#xff0c;依据我们多年的开发经验为大家提供在开发app软件的时候怎么选择开发软件的公司。 手机app制…

Java算法之动态规划

Java算法之动态规划 前言 ​ 最近这一段时间一直在刷算法题&#xff0c;基本上一有时间就会做一两道&#xff0c;这两天做了几道动态规划的问题&#xff0c;动态规划之前一直是我比较头疼的一个问题&#xff0c;感觉好复杂&#xff0c;一遇到这样的问题就想跳过&#xff0c;昨…

算法-腐烂的橘子

1、题目来源 994. 腐烂的橘子 - 力扣&#xff08;LeetCode&#xff09; 2、题目描述 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&…

图像处理与视觉感知---期末复习重点(2)

文章目录 一、空间域图像增强1.1 图像增强1.2 几种变换 二、直方图2.1 直方图定义2.2 直方图均衡化2.3 离散情况2.4 例子2.5 直方图匹配2.6 例子2.7 一道例题 三、空间滤波器3.1 定义3.2 例子 四、平滑空间滤波器4.1 作用与分类4.2 线性滤波器 五、统计排序滤波器5.1 定义与分类…

CleanMyMac X4.14.7永久免费Mac电脑清理和优化软件

CleanMyMac X 是一款功能强大的 Mac 清理和优化软件&#xff0c;适合以下几类人群使用&#xff1a; 需要定期清理和优化 Mac 的用户&#xff1a;随着时间的推移&#xff0c;Mac 设备上可能会积累大量的无用文件、缓存和垃圾&#xff0c;导致系统运行缓慢。CleanMyMac X 的智能扫…