首页分享 HTML+CSS鲜花静态网页设计

HTML+CSS鲜花静态网页设计

来源：花匠小妙招时间：2024-08-16 22:05

精彩专栏推荐文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
作者主页: 【主页——获取更多优质源码】
web前端期末大作业：【毕设项目精品实战案例 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】
HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程 120G干货分享】
关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。坚持原创，热衷分享，初心未改，继往开来！

文章目录一、‍网站题目二、✍️网站描述三、网站介绍四、网站演示五、⚙️ 网站代码HTML结构代码CSS样式代码六、如何让学习不再盲目七、更多干货

一、‍网站题目

鲜花网页设计、鲜花商城网页制作、在线花店网站、盆栽网、花卉网等网站的设计与制作。

二、✍️网站描述

️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> <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.com</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> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311

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; } /*底部结束*/ 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504

六、如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。没积累足够知识和经验前，你是开发不出一个完整项目的。把最新技术挂在嘴边，还不如把过时技术牢记心中。活到老学到老，只有一招半式是闯不了江湖的。看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。书读百遍其义自见，别指望读一遍就能掌握。请把教程里的例子亲手实践下，即使案例中有完整源码。把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。不要漏掉教程中任何一个习题——请全部做完并做好笔记。水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。做好保存源文件的习惯，这些都是你的知识积累。遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。