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

news2024/10/3 4:35:26

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

文章目录

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

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

相关文章

数据科学中的Python:NumPy和Pandas入门指南【第121篇—NumPy和Pandas】

数据科学中的Python&#xff1a;NumPy和Pandas入门指南 数据科学是当今数字时代中的一个重要领域&#xff0c;而Python是数据科学家们最喜爱的编程语言之一。在这篇博客中&#xff0c;我们将介绍Python中两个强大的库——NumPy和Pandas&#xff0c;它们在数据处理和分析中发挥…

mysql | 查询数据的过程|优化-->索引 |存储引擎

查询的过程 首先确认mysql 服务器是否启动 systemctl mysqld status 登录连接 mysql -h i p − u ip -u ip−uuser -p (-h 指定服务器ip -u 指定用户名 -p 指定密码) mysql 数据包 经过抓包分析&#xff08;mysql包其实就是基于tcp协议 3306端口) 传输采用mysql 协议&#xff0…

【探索C++容器:set和map的使用】

[本节目标] 1. 关联式容器 2. 键值对 3. 树形结构的关联式容器 1. 关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为…

【Tauri】(4):整合Tauri和actix-web做本地大模型应用开发,可以实现session 登陆接口,完成页面展示,进入聊天界面

1&#xff0c;视频地址 https://www.bilibili.com/video/BV1GJ4m1Y7Aj/ 【Tauri】&#xff08;4&#xff09;&#xff1a;整合Tauri和actix-web做本地大模型应用开发&#xff0c;可以实现session 登陆接口&#xff0c;完成页面展示&#xff0c;进入聊天界面 使用国内代理进行加…

农场管理小程序|基于微信小程序的农场管理系统设计与实现(源码+数据库+文档)

农场管理小程序目录 目录 基于微信小程序的农场管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、用户信息管理 2、农场信息管理 3、公告信息管理 4、论坛信息管理 四、数据库设计 五、核心代码 七、最新计算机毕设选题推荐 八、源码获取&#x…

族群争霸休闲养成小游戏

​游戏概述&#xff1a; 在一个由自然力量支配的幻想世界中&#xff0c;狼族与羊族的战争永无止境。 人族在两者之间寻求和平&#xff0c;建立起坚固的城墙&#xff0c;同时捕捉狼与羊来增强自身实力。 神族则在幕后观察&#xff0c;偶尔以神技介入战场&#xff0c;影响战局…

如何通过隐藏服务器真实IP来防御DDOS攻击

我们知道&#xff0c;服务器对外提供服务&#xff0c;基本上都是放置在公网上的。所以说服务器放置在公网上会面临很多攻击&#xff0c;如果不做好必要的防护措施&#xff0c;服务器被人攻击只是时间上的问题。 而我们面临的众多攻击中&#xff0c;DDoS攻击是最常见同时也是影响…

CSS顶部与JS后写:网页渲染的奥秘

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【linux】01 :虚拟机,Linux系统,远程连接Linux系统

导入&#xff1a;常见操作系统有哪些&#xff1f; PC端&#xff1a;Windows,Linux,MacOS 移动端&#xff1a;Android、IOS、鸿蒙系统 一、Linux 系统的组成 由Linux 系统内核和系统级应用程序两部分组成。 内核提供系统最核心的功能&#xff0c;如&#xff1a;调度 CPU 、调度…

Android Studio在导入项目后编译出现java版本错误解决方法

打开新项目时出现一下错误&#xff1a; Unsupported Java&#xff0c;Your build is currently configured to use Java 17.0.9 and Gradle 5.6.4. 这说明使用的java版本过高&#xff0c;而 gradle5.6.4对应的是java8&#xff0c;最新安装的编译器java版本是17 解决方法是为项…

C语言————字符函数与字符串函数

在编程的过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;为了⽅便操作字符和字符串&#xff0c;C语⾔标准库中提供了⼀系列库函数&#xff0c;如追加&#xff0c;拷贝&#xff0c;替换等等接下来我们就学习⼀下这些函数&#xff0c;并且自实现。 gets 这个指令大家…

IntelliJ IDEA 2020.2.4试用方法

打开idea&#xff0c;准备好ide-eval-resetter压缩包。 将准备好的压缩包拖入idea中 选中弹窗中的自动重置选项&#xff0c;并点击重置 查看免费试用时长

【Docker安装教程】Docker安装Redis详解

安装Redis前我们必须要保证Docker运行OK&#xff0c;如何安装Docker参考《CentOS 7 上的 Docker 安装与配置》 步骤 1: 拉取 Redis 镜像 首先&#xff0c;确保你已经安装了 Docker。然后&#xff0c;使用以下命令拉取最新的 Redis 镜像&#xff1a; docker pull redis](http…

【Pytorch】进阶学习:深入解析 sklearn.metrics 中的 classification_report 函数---分类性能评估的利器

【Pytorch】进阶学习&#xff1a;深入解析 sklearn.metrics 中的 classification_report 函数—分类性能评估的利器 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合…

《互联网的世界》第五讲-信任和安全(第一趴:物理世界的非对称加密装置)

信任和安全的话题过于庞大&#xff0c;涉及很多数学知识&#xff0c;直接涉及 “正事” 反而不利于理解问题的本质&#xff0c;因此需要先讲一个前置作为 part 1。 part 1 主要描述物理世界的信任和安全&#xff0c;千万不要觉得数字世界是脱离物理世界的另一天堂&#xff0c;…

【C语言】字符指针

在指针的类型中我们知道有一种指针类型为字符指针char* 一般使用&#xff1a; int main() { char ch w; char *pc &ch; *pc w; return 0; } 还有一种使用方式&#xff0c;如下&#xff1a; int main() { const char* pstr "hello bit.";//这⾥是把⼀个字…

基于决策树实现葡萄酒分类

基于决策树实现葡萄酒分类 将葡萄酒数据集拆分成训练集和测试集&#xff0c;搭建tree_1和tree_2两个决策树模型&#xff0c;tree_1使用信息增益作为特征选择指标&#xff0c;B树使用基尼指数作为特征选择指标&#xff0c;各自对训练集进行训练&#xff0c;然后分别对训练集和测…

基于Java的在线课程教学系统(Vue.js+SpringBoot)

目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2.3 课时管理模块2.4 课程交互模块2.5 系统基础模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示4.1 管理后台4.2 用户网页 五、样例代码5.1 新增课程类型5.2 网站登录5.3 课…

企业AI转型之路:策略与实践

目录 前言1 试点项目&#xff1a;积累AI经验1.1 选择有实际价值的项目1.2 创新氛围的激发1.3 员工对新技术的接受度提升 2 建立高效的内部AI团队2.1 团队独立性与高层直报2.2 初期资金支持与资源整合 3 提供全面的AI培训计划3.1 针对不同层次的培训3.2 多样化培训形式3.3 内部人…

【Linux】线程同步与生产消费者问题

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb;CP问题&#x1f449;&#x1f3fb;互斥…