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.hqwc.cn/news/526994.html

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

相关文章

网络协议常见问题

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

NeRF模型NeRF模型

参考视频&#xff1a;https://www.youtube.com/watch?vHfJpQCBTqZs&ab_channelVision%26GraphicsSeminaratMIT NeRF模型的输入输出: 输入: (x, y, z): 一个三维空间坐标,代表场景中的一个位置点(θ, φ): 视线方向,θ表示与y轴的夹角,φ表示与x轴的夹角,用两个角度可以…

win11家庭版docker和milvus

docker 1、官网下载docker文件Get Started | Docker&#xff0c;选择download for windows下载。 2、双击打开下载好的文件Docker Desktop Installer.exe&#xff0c;add shortcut to desktop选择√代表同意添加快捷键到桌面&#xff0c;如果不勾选就说明不创建快捷键&#x…

理解JavaScript中的WeakSet和WeakMap

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

活动图高阶讲解-01

14 00:00:36,200 --> 00:00:42,960 下面我们就来进入学习 15 00:00:42,960 --> 00:00:49,640 首先我们先花点时间 16 00:00:49,640 --> 00:00:54,560 从面上把活动图的历史等等 17 00:00:54,560 --> 00:00:56,640 概述的一些内容过一下 18 00:00:57,840 -->…

掌握重排和重绘,让你的网页飞得更高!

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

【Pytorch】新手入门:基于sklearn实现鸢尾花数据集的加载

【Pytorch】新手入门&#xff1a;基于sklearn实现鸢尾花数据集的加载 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…

《探索自动驾驶技术的前景与挑战》

自动驾驶技术,作为现代科技的一大突破,正逐渐改变着我们的交通方式、生活方式以及整个社会结构。本文将围绕自动驾驶技术的现状、优势、局限性以及未来发展趋势展开探讨。 自动驾驶技术的现状概述 自动驾驶技术作为当今科技领域的一项前沿技术,已经取得了巨大的进展并在不同…

So you think you understand IP fragmentation?

文章目录 前言一、Why care?二、Prevention三、Well-understood?四、Introducing fragquiz五、A novel (?) algorithm六、Reader challenge七、traceroute八、ICMP参考资料 前言 本文来自&#xff1a;https://lwn.net/Articles/960913/ February 7, 2024This article was …

人工智能(AI)领域最流行的八大算法概括

人工智能&#xff08;AI&#xff09;领域最流行的八大算法概括&#xff01; 1. 卷积神经网络&#xff08;CNN&#xff0c;Convolutional Neural Network&#xff09; 2. 图神经网络&#xff08;GNN&#xff0c;Graph Neural Network&#xff09; 3. 循环神经网络&#xff08;RN…

计算两帧雷达数据之间的变换矩阵

文章目录 package.xmlCMakeLists.txtpoint_cloud_registration.cc运行结果 package.xml <?xml version"1.0"?> <package format"2"><name>point_cloud_registration</name><version>0.0.0</version><descriptio…

mysql的trace追踪SQL工具,进行sql优化

trace是MySQL5.6版本后提供的SQL跟踪工具&#xff0c;通过使用trace可以让我们明白optimizer&#xff08;优化器&#xff09;如何选择执行计划。 注意&#xff1a;开启trace工具会影响mysql性能&#xff0c;所以只适合临时分析sql使用&#xff0c;用完之后请立即关闭。 测试数…