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

发布时间：2024年01月04日

前言

使用技术：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 />
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>

总结

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

文章来源:https://blog.csdn.net/qq_47188967/article/details/135380668
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章