大学生网页设计作业 html+css+js网上鲜花售卖网站(期末网页设计作业)

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

---

---

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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.视频演示

T14XY 鲜花售卖16页

🧩 2.图片演示

---

四、💒 网站代码

🧱HTML结构代码

     <!--header-->
        <header class="header">
            <section class="container naver clearfix">
                <div class="logo pull-left"><a href="" title="某某科技有限公司" alt="某某科技有限公司">MOU MOU</a></div>
                <nav class="nav pull-left">
                    <ul>
                        <li class="active"><a href="">首页</a></li>
                        <li><a href="brand.html">品牌简介</a>
                            <ul>
                                <li><a href="brand.html">品牌简介</a></li>
                                <li><a href="#">企业文化</a></li>
                                <li><a href="honor.html">荣誉资质</a></li>
                            </ul>
                        </li>
                        <li><a href="product.html">产品中心</a>
                            <ul>
                                <li><a href="product.html">婚礼花艺</a></li>
                                <li><a href="product.html">爱情鲜花</a></li>
                                <li><a href="product.html">长辈鲜花</a></li>
                            </ul>
                        </li>
                        <li><a href="case.html">经典案例</a>
                            <ul>
                                <li><a href="case.html">经典案例</a></li>
                                <li><a href="#">新增分类</a></li>
                            </ul>
                        </li>
                        <li><a href="flower.html">花之物语</a>
                            <ul>
                                <li><a href="flower.html">花之物语</a></li>
                                <li><a href="#">养花知识</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">联系我们</a>
                            <ul>
                                <li><a href="contact.html">联系我们</a></li>
                                <li><a href="message.html">在线留言</a></li>
                                <li><a href="job.html">人才招聘</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <div class="search pull-left">
                    <img src="picture/search.png">
                    <input type="text" class="top_search" value="">
                    <input type="submit" class="top_sub" value="搜索">
                </div>
                <div class="language pull-right clearfix">
                    <div class="language_wrap">
                        <a href="#">EN</a>
                        <a href="#">CN</a>
                    </div>
                    <span>XXX</span>
                </div>
            </section>
        </header>

        <section class="container">
            <a href="#mmenu" class="phone-nav glyphicon glyphicon-list"></a>
        </section>

        <!--banner-->
        <section class="banner">
            <div>
                <a href=""><img src="picture/banner.jpg" alt=""></a>
            </div>
            <div>
                <a href=""><img src="picture/banner.jpg" alt=""></a>
            </div>
            <div>
                <a href=""><img src="picture/banner.jpg" alt=""></a>
            </div>
        </section>




        <!--移动端  Mmenu-->
        <nav id="mmenu">
            <ul>
                <li><a href="">English</a></li>
                <li><a href="">首 页</a></li>
                <li><a href="brand.html">品牌简介</a>
                    <ul>
                        <li><a href="brand.html">品牌简介</a></li>
                        <li><a href="">企业文化</a></li>
                        <li><a href="honor.html">荣誉资质</a></li>
                    </ul>
                </li>
                <li><a href="product.html">产品中心</a>
                    <ul>
                        <li><a href="">婚礼花艺</a>
                            <ul>
                                <li><a href="">求婚必备</a></li>
                                <li><a href="">情人节专属</a></li>
                                <li><a href="">其他鲜花</a></li>
                            </ul>
                        </li>
                        <li><a href="product.html">爱情鲜花</a>
                            <ul>
                                <li><a href="">求婚必备</a></li>
                                <li><a href="product.html">情人节专属</a></li>
                                <li><a href="">其他鲜花</a></li>
                            </ul>
                        </li>
                        <li><a href="">长辈鲜花</a>
                            <ul>
                                <li><a href="">求婚必备</a></li>
                                <li><a href="">情人节专属</a></li>
                                <li><a href="">其他鲜花</a></li>
                            </ul>
                        </li>

                    </ul>
                </li>
                <li><a href="case.html">经典案例</a>
                    <ul>
                        <li><a href="case.html">经典案例</a></li>
                        <li><a href="">新增分类</a></li>
                    </ul>
                </li>
                <li><a href="flower.html">花之物语</a>
                    <ul>
                        <li><a href="flower.html">花之物语</a></li>
                        <li><a href="">养花知识</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">联系我们</a>
                    <ul>
                        <li><a href="contact.html">联系我们</a></li>
                        <li><a href="message.html">在线留言</a></li>
                        <li><a href="job.html">人才招聘</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>

🏠CSS样式代码

.home-top-grid3 {
  background: rgba(11, 100, 143, 0.4);
  transition: 0.5s all;
}
* {
  margin: 0;
  padding: 0;
}
.iconfont {
  font-family: 'iconfont';
}
body {
  font-family: "微软雅黑";
  overflow-x: hidden;
}
i,
em {
  font-style: normal;
}
img {
  max-width: 100%;
}
ul li {
  list-style: none;
}
.vcenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  vertical-align: middle;
  margin: auto;
}
.tHide {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.blockFull {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.relative {
  position: relative;
}
a {
  color: #666;
}
a:hover {
  color: #dd0505;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
}
@media (min-width: 1600px) {
  .container {
    width: 1600px;
  }
}
.container {
  width: 1600px;
  padding: 0;
}
.container .nav {
  margin-left: 130px;
}
.container .nav a {
  padding: 0 40px;
}

---

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻