首页分享静态网页课程设计——十二花信（花朵科普）（HTML+CSS+JavaScript）

静态网页课程设计——十二花信（花朵科普）（HTML+CSS+JavaScript）

来源：花匠小妙招时间：2024-11-11 21:34

前言

使用技术：HTML+CSS+JS
主要内容：对十二个月每个月的适应季节的花朵进行科普。

主要内容 1、首页

首页顶部由标题栏和一张花朵的图片组成。
在这里插入图片描述

下半部分对十二花信进行了简单的科普介绍，分别为一月梅花、二月杏花、三月桃花等等。。
在这里插入图片描述

部分代码：

<div class="title"> <br /> <h1><font size="+3" color="#FF0099">十二花信，绽放四季</font></h1> <h2><font color="#0066FF">十二花信科普网站</font></h2> <br /><br /><br /><br /><br /> </div> <img src="图片/花信标题.png"> <div class="body"> <h3><font size="+2" color="#FF3399">科普：十二花信</font></h3> <p><font color="#FF0000">一年十二个月中，人们挑选一种花期最准确的花为代表,即为十二种应候而来的花</font></p> <hr align="center" color="#FF3333" width="750px"/> <h4>我们一起看看，这十二种气质非凡形态各异的花吧</h4> <p>温馨提示：点击花名即可查看详细介绍哦</p> <h5><font size="+4" color="#66CCFF"><strong>冬</strong></font></h5> <br /> 123456789101112131415 2、花朵详细介绍界面

我们点击对应的花朵名称，可以跳转到该花朵的详细介绍界面。
在这里插入图片描述

花朵详细介绍界面如下：
在这里插入图片描述

上半部分是关于花朵的文字介绍，下半部分是三张该花朵的图片展示。

上面是梅花的，除此之外，还有另外是一种花朵，这里不在一一介绍了。

部分代码如下：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>凤仙花介绍</title> <link rel="stylesheet" href="../css/凤仙花介绍.css"> </head> <body> <div class="all" style="text-align:center"> <div class="picture" style="text-align:center"> <img src="../图片/凤仙花.jpg" width="600" height="350"> </div> <div class="box1" style="text-align:left"> <h1><font size="+2" color="#CC66CC">七月：凤仙花</font></h1> <br/> <p><font color="#CC66CC">花语：别碰我、怀念过去</font></p> <br /> <p>凤仙花，别名：指甲花，急性子，凤仙透骨草，拉丁文名：Impatiens balsamina L.，为双子叶植物纲、牻牛儿苗目、凤仙花科、凤仙花属一年生草本花卉， [1] 全株分根、茎、叶子、花、果实和种子六个部分。因其花头、翅、尾、足俱翘然如凤状，故又名金凤花。凤仙花的身体有根、茎、叶子、花、果实和种子六个部分。花颜色多样，有粉红，大红，紫色，粉紫等多种颜色，花瓣或者叶子捣碎，用树叶包在指甲上，能染上鲜艳的红色，非常漂亮，很受女孩子的喜爱。</p> <br /> <p>民间常用其花及叶染指甲。茎及种子入药。茎有祛风湿、活血、止痛之效，用于治风湿性关节痛、屈伸不利；种子称“急性子”，有软坚、消积之效，用于治噎膈、骨鲠咽喉、腹部肿块、闭经。</p> <br /> <p>凤仙花如鹤顶、似彩凤，姿态优美，妩媚悦人。香艳的红色凤仙和娇嫩的碧色凤仙都是早晨开放，是欣赏凤仙花的最佳时机。凤仙花因其花色、品种极为丰富，是美化花坛、花境的常用材料，可丛植、群植和盆栽，也可作切花水养。</p> </div> <div class="box2"> <img src="../图片/f凤仙花2.jpg" width="300" height="300px"> </div> <div class="box3"> <img src="../图片/凤仙花3.jpg" width="300" height="300px"> </div> <div class="box4"> <img src="../图片/凤仙花4.jpg" width="300" height="300px"> </div> </div> </body> </html>

12345678910111213141516171819202122232425262728293031323334353637 总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1L5411q76h/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。