|
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
一、👨🎓网站题目
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。
二、✍️网站描述
🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。页面清爽、美观、大方，不雷同。 。不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码）。
四、💠网站演示
     
五、⚙️ 网站代码
🧱HTML结构代码
DOCTYPE html>
素馨花卉
网站首页
花言花语
素馨动态
素馨花艺
留言建议
关于素馨
素馨花艺
More
花艺师与您一同分享素馨花卉给您的生活带去的花香世界。
桌花瓶插花
这些争鲜斗艳的花朵如冬日深夜火焰般温暖，浓烈。火红色多头玫瑰、香橙色郁金香与紫罗兰.
查看详情
迷你花束
迷你花束，简洁时尚，选择一束鲜花表达自己的情感，小小花束，大大心意。
查看详情
小彩瓷随心插
小彩瓷随意搭配小菊、康乃馨，即便不需要专业的花艺师，也能做出清新脱俗的感觉。
查看详情
素馨花语
More
多肉入新家
多肉必须经过一段时间适应期，也就是安全度过缓苗期，就说明她入盆成功，真正进入新家了。首先我们需要晾根.....
2022-07-15
900
爱莲说
六月份的尾巴，气候似乎比往年又燥热了些许。花卉市场的鲜切花生的愈发绚丽多姿，不过最夺目的当属那“出淤.....
2022-06-30
229
花在冬日
初雪悄然而至，洋洋洒洒飘了数日，难得天空放晴，这些花儿最让人心心念念了！冬日的花房比起其他季节并没有.....
2022-01-08
226
最适合教师节的迷你花束
在诸多的传统节日中，教师节是一个既令人肃然起敬又饱含慈爱深情的节日。自古以来就有“一日为师终身为父”.....
2022-09-08
230
秋如黑天鹅般优雅的到来
伴着街头偶尔飘落的黄叶，和着萧瑟的凉风划过脸颊的不忍，秋正如镜头中低吟的黑天鹅般优雅的到来，不声不响.....
2022-09-06
101
那些配材花的点睛之笔
在花艺作品的制作中一般都有三个板块融合穿插而成，她们分工明确而又密切合作，她们承认重点花材不可替代的.....
2022-08-14
111
适合家庭的摆台花
经常会有人来咨询哪些花卉适宜家庭摆台花，既能彰显花的婀娜多姿、楚楚动人，又便于养护，上班族回到家中看.....
2022-07-16
204
绿萝的养护
对于花友而言，绿萝可能是养在家中的第一盆绿植。她的新叶是夏日峰回路转的一簇簇清凉，而且大家似乎都看到.....
2022-07-13
92
素馨花卉工作室
郑州素馨花卉有限公司由优秀的花艺、花卉设计师于2022年成立。
经营范围：花卉、工艺品、饰品的销售；礼仪策划；花卉、苗木种植技术咨询。
前期以鲜花、花束的包装及零售为主，逐渐过渡到花艺培训、家庭园艺等花香生活的指导，以及与花卉相关的文学创作。
公司致力于将多彩花艺带入寻常人家，让对生活有着更高追求的人们享受温馨素雅的花香世界，力求将这种文化做到极致。
公司地址：郑州市 中牟县 育才巷 县直一初中家属院 1单元201室
联系电话：0371-62180519 15890062947
电子邮箱：[email protected]
豫ICP备17021305号;;豫公网安备 41012202000160号
联系电话 0371-62180519 15890062947
郑州素馨花卉有限公司 版权所有 © 2022-2022
💒CSS样式代码
/*清除浏览器默认样式*/
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
a{
text-decoration: none;
}
/*sx首页导航开始*/
.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;
}
.dot{
width:10px;
height:10px;
background: rgba(255,255,255,0.3);
border-radius:50%;
margin: 0 5px;
float:left;
}
.hover{
background: rgba(0,0,0,0.3);
}
.left{
width: 202px;
height: 759px;
float: left;
}
.left:hover{
background: rgba(0, 0, 0, 0.06);
}
.btn-left{
width: 41px;
height: 69px;
position:absolute;
left:150px;
top:345px;
background-image: url(../image/icon-slides.png);
background-position: 83px 0;
display: none;
}
.right{
width: 202px;
height: 759px;
float: right;
}
.right:hover{
background: rgba(0, 0, 0, 0.06);
}
.btn-right{
width: 41px;
height: 69px;
position:absolute;
right:150px;
top:345px;
background-image: url(../image/icon-slides.png);
background-position: 42px 0;
display: none;
}
.left:hover .btn-left{
display: initial;
}
.right:hover .btn-right{
display: initial;
}
/*sx首页导航结束*/
/*sx花艺开始*/
.flower{
padding: 70px 0px;
/* background: #fff;*/
position: relative;
}
.flower-container{
width: 1170px;
height: 604px;
/* background: pink;*/
margin: 0 auto;
}
.flower-content{
font-size: 36px;
margin-top: 0px;
text-align: center;
font-weight: 300;
margin-bottom: 20px;
}
.btn{
background-color: #16b0dc;
border-color: #16b0dc;
padding: 5px 13px;
margin-top: -6px;
margin-left: 15px;
font-size: 12px;
line-height: 1.5;
border-radius: 2px;
color: #fff;
position: relative;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
}
.desc{
font-size: 16px;
font-weight: 300;
text-align: center;
width: 80%;
color: #5e7387;
margin: 0px auto;
}
.tu{
width: 1140px;
height: 476px;
/*background: red;*/
margin-top: 40px;
}
.chahua{
width: 1020px;
height: 476px;
/* background: #2196f3;*/
margin: 0 auto;
}
.tu1{
width: 320px;
height: 320px;
margin-left: 12px;
}
.tu1 img{
width: 320px;
height: 320px;
border-radius: 50%;
}
.tu-big{
width: 1020px;
height: 76px;
/* background: #2196f3;*/
margin: 0 auto;
}
.tu-content{
width: 320px;
height: 76px;
/*background: black;*/
text-align: center;
float: left;
margin-right: 20px;
}
.tu-content h4{
color: #37474f;
font-size: 18px;
margin-bottom: 10px;
}
.tu-content p{
font-size: 14px;
color: #757575;
margin-left: 5px;
text-align: left;
}
.btn-block{
width: 300px;
height: 36px;
font-size: 14px;
border-radius: 3px;
margin-top: 22px;
background: #f96868;
border-color: #f96868;
text-align: center;
line-height: 36px;
float: left;
}
.btn-block a{
cursor: pointer;
color: #fff;
}
.flower-left{
float: left;
position: absolute;
left: 90px;
top: 338px;
}
.btn-block:hover{
cursor: pointer;
}
.btn-block i{
color:#9c2115;
}
.flower-left i{
color: #b0b0b0;
font-size: 28px;
}
.flower-right{
float: left;
position: absolute;
right: 90px;
top: 338px;
}
.flower-right i{
color: #b0b0b0;
font-size: 28px;
}
/*sx花艺结束*/
/*素馨花语开始*/
.language{
width: 100%;
height: 707px;
/*margin-top: -50px;*/
background: #f5f5f5;
position: relative;
}
.language-content{
/* font-size: 36px;
top:20px;
left:550px;
text-align: center;
font-weight: 300;
position: absolute;*/
font-size: 36px;
margin-top: 0px;
text-align: center;
font-weight: 300;
margin-bottom: 20px;
}
.language-big{
width: 1170px;
height: 504px;
position: absolute;
top:70px;
/* background: #ff6700;*/
}
.language-item{
width: 555px;
height: 96px;
/*background: red;*/
float: left;
margin-right: 30px;
margin-top: 30px;
}
.language-left{
width: 180px;
height: 96px;
}
.language-left img{
width: 160px;
height: 96px;
}
.language-info{
width: 375px;
height: 96px;
/* background: black;*/
float: right;
margin-top: -96px;
overflow: hidden;
}
.language-info a{
color: #2a333c;
}
.language-info a:hover{
color: #16b0dc;
text-decoration:underline;
}
.dec{
font-weight: 300;
font-size: 14px;
color: #76838f;
margin: 10px 0 11px;
margin-bottom: 5px;
}
.info{
font-weight: 300;
margin: 10px 0 11px;
font-size: 14px;
color: #76838f;
}
.margin-left{
margin-left: 10px;
}
/*素馨花语结束*/
/*花卉工作室开始*/
.work{
width: 100%;
height: 905px;
margin-top: 60px;
/*background: #2196f3;*/
border-bottom: 1px solid #b0b0b0;
}
.work-content{
width: 1170px;
height: 765px;
/* background: #ff6700;*/
margin: 0 auto;
}
.work-title{
width: 1140px;
height: 43px;
margin: 0 auto;
/*background: pink;*/
}
.work-title h3{
font-size: 36px;
font-weight: 300;
margin-top: 0;
text-align: center;
}
.work-item{
width: 1140px;
height: 672px;
margin: 0 auto;
/*background: green;*/
}
.work-all{
margin-top: 70px;
text-align: center;
font-weight: 300;
color: #222;
font-size: 18px;
}
.item1{
margin-top: 30px;
text-align: center;
font-weight: 300;
font-size: 18px;
color: #222;
}
.item{
margin-top: 10px;
text-align: center;
font-weight: 300;
font-size: 18px;
color: #222;
}
.work-item img{
width: 530px;
height: 340px;
}
.item2{
margin-top: 30px;
text-align: center;
font-weight: 300;
font-size: 18px;
color: #222;
margin-bottom: 30px;
}
/*花卉工作室结束*/
/*底部开始*/
/*底部开始*/
.footer-box{
width: 100%;
height: 182px;
padding-bottom: 20px;
background: #f5f5f5;
border-top: 1px solid #f0f2f5;
color: #aaaaaa;
text-align: center;
}
.footer-title{
width: 100%;
height: 20px;
background: #fff;
border-top: 1px solid #f0f2f5;
}
.footer-qq{
width: 100%;
height: 56px;
text-align: center;
padding-top:20px;
}
.footer-qq i{
font-size: 30px;
margin-right: 10px;
}
.wx{
color: green;
}
.qq{
color: #3cafff;
}
.footer-bottom{
width: 100%;
}
.footer-bottom a{
color: #62a8ea;
font-size: 15px;
margin-right: 10px;
cursor: pointer;
}
.footer-bottom a:hover{
color: #89bceb;
text-decoration: underline;
}
.footer-bottom img{
font-size: 15px;
}
.footer-box p{
color: #aaaaaa;
font-size: 15px;
margin-right: 10px;
margin-top: 5px;
}
/*底部结束*/
六、🥇 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。没积累足够知识和经验前，你是开发不出一个完整项目的。把最新技术挂在嘴边，还不如把过时技术牢记心中。活到老学到老，只有一招半式是闯不了江湖的。看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。书读百遍其义自见，别指望读一遍就能掌握。请把教程里的例子亲手实践下，即使案例中有完整源码。把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。不要漏掉教程中任何一个习题——请全部做完并做好笔记。水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。做好保存源文件的习惯，这些都是你的知识积累。遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
|