🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
T10JP 花店 6页 无js 表单动画
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>素馨花卉</title>
<link rel="stylesheet" href="css/suxin.css">
</head>
<body>
<!--素馨首页导航开始-->
<div class="picture">
<header class="hua-header">
<div class="container">
<div class="header-box">
<div class="header-logo">
<div class="logo">
<img src="picture/sx.png" alt="">
</div>
</div>
<ul class="header-nav">
<li class="one">
<a href="">网站首页</a>
</li>
<li class="header-item">
<a href="huayanhuayu.html">花言花语</a>
</li>
<li class="header-item">
<a href="suxindongtai.html">素馨动态</a>
</li>
<li class="header-item">
<a href="suxinhuayi.html">素馨花艺</a>
</li>
<li class="header-item">
<a href="liuyan.html">留言建议</a>
</li>
<li class="header-item">
<a href="about.html">关于素馨</a>
</li>
</ul>
</div>
</div>
</header>
<div class="left">
<div class="btn-left"></div>
</div>
<div class="right">
<div class="btn-right"></div>
</div>
<div class="dots">
<div class="dot "></div>
<div class="dot hover"></div>
</div>
</div>
<!--素馨首页导航结束-->
<!-- 素馨花艺开始-->
<div class="flower">
<div class="flower-container">
<div class="flower-left"><i class="iconfont icon-xiangzuo"></i></div>
<div class="flower-right"><i class="iconfont icon-xiangyou3fill"></i></div>
<h3 class="flower-content">
素馨花艺
<a href="" class="btn">More</a>
</h3>
<p class="desc">花艺师与您一同分享素馨花卉给您的生活带去的花香世界。</p>
<div class="tu">
<div class="chahua">
<a href="" class="tu1"><img src="picture/sx.jpg" alt=""></a>
<a href="" class="tu1"><img src="picture/sx2.jpg" alt=""></a>
<a href="" class="tu1"><img src="picture/sx3.jpg" alt=""></a>
<div class="tu-big">
<div class="tu-content">
<h4>桌花瓶插花</h4>
<p>这些争鲜斗艳的花朵如冬日深夜火焰般温暖，浓烈。火红色多头玫瑰、香橙色郁金香与紫罗兰.</p>
<div class="btn-block">
<a href="" class="detail">
<i class="iconfont icon-shipin luyin"></i>
查看详情
</a>
</div>
</div>
<div class="tu-content">
<h4>迷你花束</h4>
<p>迷你花束，简洁时尚，选择一束鲜花表达自己的情感，小小花束，大大心意。</p>
<div class="btn-block">
<a href="" class="detail">
<i class="iconfont icon-shipin "></i>
查看详情
</a>
</div>
</div>
<div class="tu-content">
<h4>小彩瓷随心插</h4>
<p>小彩瓷随意搭配小菊、康乃馨，即便不需要专业的花艺师，也能做出清新脱俗的感觉。</p>
<div class="btn-block">
<a href="" class="detail">
<i class="iconfont icon-shipin "></i>
查看详情
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 素馨花艺结束-->
<!--素馨花语开始-->
<div class="language">
<div class="flower-container">
<h3 class="language-content">
素馨花语
<a href="" class="btn">More</a>
</h3>
<ul class="language-big">
<li class="language-item">
<div class="language-left">
<img src="picture/1.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
多肉入新家
</a>
</h4>
<p class="dec">多肉必须经过一段时间适应期，也就是安全度过缓苗期，就说明她入盆成功，真正进入新家了。首先我们需要晾根.....</p>
<p class="info">
<span>2022-07-15</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>900</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/2.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
爱莲说
</a>
</h4>
<p class="dec">六月份的尾巴，气候似乎比往年又燥热了些许。花卉市场的鲜切花生的愈发绚丽多姿，不过最夺目的当属那“出淤.....</p>
<p class="info">
<span>2022-06-30</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>229</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/3.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
花在冬日
</a>
</h4>
<p class="dec">初雪悄然而至，洋洋洒洒飘了数日，难得天空放晴，这些花儿最让人心心念念了！冬日的花房比起其他季节并没有.....</p>
<p class="info">
<span>2022-01-08</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>226</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/4.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
最适合教师节的迷你花束
</a>
</h4>
<p class="dec">在诸多的传统节日中，教师节是一个既令人肃然起敬又饱含慈爱深情的节日。自古以来就有“一日为师终身为父”.....</p>
<p class="info">
<span>2022-09-08</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>230</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/5.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
秋如黑天鹅般优雅的到来
</a>
</h4>
<p class="dec">伴着街头偶尔飘落的黄叶，和着萧瑟的凉风划过脸颊的不忍，秋正如镜头中低吟的黑天鹅般优雅的到来，不声不响.....</p>
<p class="info">
<span>2022-09-06</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>101</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/6.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
那些配材花的点睛之笔
</a>
</h4>
<p class="dec">在花艺作品的制作中一般都有三个板块融合穿插而成，她们分工明确而又密切合作，她们承认重点花材不可替代的.....</p>
<p class="info">
<span>2022-08-14</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>111</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/7.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
适合家庭的摆台花
</a>
</h4>
<p class="dec">经常会有人来咨询哪些花卉适宜家庭摆台花，既能彰显花的婀娜多姿、楚楚动人，又便于养护，上班族回到家中看.....</p>
<p class="info">
<span>2022-07-16</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>204</span>
</p>
</div>
</li>
<li class="language-item">
<div class="language-left">
<img src="picture/6.jpg" alt="">
</div>
<div class="language-info">
<h4>
<a href="">
绿萝的养护
</a>
</h4>
<p class="dec">对于花友而言，绿萝可能是养在家中的第一盆绿植。她的新叶是夏日峰回路转的一簇簇清凉，而且大家似乎都看到.....</p>
<p class="info">
<span>2022-07-13</span>
<span class="margin-left"></span>
<span class="margin-left"><i class="iconfont icon-yanjing"></i>92</span>
</p>
</div>
</li>
</ul>
</div>
</div>
<!--素馨花语结束-->
<!--花卉工作室开始-->
<div class="work">
<div class="work-content">
<div class="work-title">
<h3>素馨花卉工作室</h3>
</div>
<div class="work-item">
<p class="work-all">郑州素馨花卉有限公司由优秀的花艺、花卉设计师于2022年成立。</p>
<p class="item1">经营范围：花卉、工艺品、饰品的销售；礼仪策划；花卉、苗木种植技术咨询。</p>
<p class="item">前期以鲜花、花束的包装及零售为主，逐渐过渡到花艺培训、家庭园艺等花香生活的指导，以及与花卉相关的文学创作。</p>
<p class="item">公司致力于将多彩花艺带入寻常人家，让对生活有着更高追求的人们享受温馨素雅的花香世界，力求将这种文化做到极致。</p>
<p class="item">公司地址：郑州市 中牟县 育才巷 县直一初中家属院 1单元201室</p>
<p class="item">联系电话：0371-62180519 15890062947</p>
<p class="item">电子邮箱：office@suxinhuahui</p>
<p class="item2"><img src="picture/sx4.png" alt=""> </p>
</div>
</div>
</div>
<!--花卉工作室结束-->
<!--底部开始-->
<div class="footer-box">
<div class="footer-title"></div>
<div class="footer-qq">
<i class="iconfont icon-weixin wx"></i>
<i class="iconfont icon-qq qq"></i>
<i class="iconfont icon-xiaoxixinfengnews2 qq"></i>
</div>
<p class="footer-bottom"><a href="">豫ICP备17021305号</a> <a href=""><img src="picture/aa.png" alt="">豫公网安备 41012202000160号</a></p>
<p>联系电话 0371-62180519 15890062947</p>
<p>郑州素馨花卉有限公司 版权所有 © 2022-2022</p>
</div>
<!--底部结束-->
</body>
</html>
🏠CSS样式代码
.hua-header{
width: 100%;
height:79px;
background:rgba(0,0,0,0.5);
position: fixed;
top:0;
z-index: 999;
}
.container{
width: 1170px;
height: 79px;
/* background: red;*/
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.header-box{
width: 1170px;
height: 79px;
/* background: pink;*/
margin-right: -15px;
margin-left: -15px;
}
.header-logo{
width: 150px;
height: 79px;
float: left;
/*background: #ff6700;*/
}
.logo{
width: 150px;
height: 50px;
position: absolute;
top:0;
bottom: 0;
margin: auto 0;
}
.logo img{
width: 150px;
height: 50px;
}
.logo img:hover{
cursor: pointer;
}
.header-nav{
width: 602px;
height: 79px;
float: right;
overflow: visible!important;
/* background: green;*/
}
.header-item{
padding-top: 0px;
padding-bottom: 0px;
height: 79px;
line-height: 79px;
float: left;
padding-right: 22px;
}
.header-item a{
color:#fff;
}
.header-item a:hover{
cursor: pointer;
color:#16B0DE;
}
.one{
padding-top: 0px;
padding-bottom: 0px;
height: 79px;
line-height: 79px;
float: left;
padding-right: 22px;
}
.one a{
color:#16B0DE;
}
.one a:hover{
cursor: pointer;
}
.picture{
width: 100%;
height: 758.81px;
position: relative;
background-image: url("../image/t1.jpg");
}
.picture1{
width: 100%;
height: 351.3px;
position: relative;
background-image: url("http://www.ylcp.shop/files/files/1654311962308/img/g1.jpg");
}
.dots{
width:100px;
height:10px;
position:absolute;
right:580px;
bottom:20px;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
更多推荐
学生鲜花网页设计模板下载 网上鲜花大学生HTML网页制作作品 简单植物鲜花网页设计成品 dreamweaver学生网站模板
发布评论