首页 分享 静态网页课程设计——十二花信(花朵科普)(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
具体的代码也在该链接下。

相关知识

HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
七夕情人节送花告白动画(HTML+CSS+JavaScript)
HTML5期末大作业:网上花店/鲜花网站设计——大气的鲜花预订商城(6页) HTML+CSS+JavaScript
HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
HTML5期末大作业:鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品
冬至节气花信 茅友花卉群
HTML+CSS鲜花静态网页设计
web课程设计网页规划与设计:鲜花网站设计——基于HTML+CSS+JavaScript制作网上鲜花网页设计(5页)
大学生网页设计作业——HTML+CSS鲜花静态网页设计
HTML+CSS网页设计期末课程大作——篮球网页设计(6页) 学校篮球网页制作模板 学生简单体育运动网站设计成品

网址: 静态网页课程设计——十二花信(花朵科普)(HTML+CSS+JavaScript) https://www.huajiangbk.com/newsview495113.html

所属分类:花卉
上一篇: 我国柑桔主产区规模概况:广东 广
下一篇: 美国林业有害生物的生物防治近况

推荐分享