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

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

前言

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