HTML+CSS鲜花静态网页设计

web学生网页设计

于 2024-06-15 12:23:26 发布

阅读量720

点赞数 26

分类专栏： web前端文章标签： css dreamweaver html html5期末作业

本文链接：https://blog.csdn.net/m0_73081085/article/details/127480830

版权

web前端专栏收录该内容

2220 篇文章 144 订阅

订阅专栏

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

一、👨‍🎓网站题目

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

二、✍️网站描述

🏷️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>&nbsp;&nbsp;<a href=""><img src="picture/aa.png" alt="">豫公网安备 41012202000160号</a></p>
       <p>联系电话 0371-62180519  15890062947</p>
       <p>郑州素馨花卉有限公司 版权所有 © 2022-2022</p>
   </div>

   <!--底部结束-->
</body>
</html>

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