鲜花绿植学生网页设计模板静态HTML鲜花学生网页作业成品 DIV CSS网上鲜花植物主题静态网页

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示

T13JP 鲜花商城网站 10页

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=7">
    <title>鲜花title>
    <link href="css/css_whir.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.min.js">script>
    <script type="text/javascript" src="js/nav.js">script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js">script>
head>

<body>
    
    <div id="header">
        <div class="top_bg">
            <div class="logo">
                <a href="#"><img src="picture/logo.jpg" width="150" height="126">a>
            div>
            <div class="top">
                
                <div class="guide">
                    <div class="welcom">Welcome to HuafangStory !　div>
                    <div class="login"><a href="huiyuanzhongxin.html">登录a>　|　<a href="login.html">注册a>div>
                    <div class="shopcart">购物车（<a href="#">0a>）div>
                    <div class="searchbox">
                        <input type="text" value="" name="" class="input">
                        <input type="image" src="picture/sbtn.jpg" class="btn">
                    div>
                div>
                
                <div class="nav">
                    <ul id="navul" class="cl">
                        <li><a href="">首页a>li>
                        <li class="navmenu"><a href="product_list.html">鲜花订购a>
                            <div class="subnav">
                                <ul>
                                    <li><a href="news_list.html">花房新闻a>li>
                                    <li><a href="news_list.html">最新通告a>li>
                                    <li><a href="news_list.html">图片新闻a>li>
                                ul>
                            div>
                        li>
                        <li><a href="yuyue.html">用餐预约a>li>
                        <li><a href="coffee.html">花漾咖啡花屋a>li>
                        <li><a href="about.html">关于花房a>li>
                    ul>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            //	$('.hyinfo li ').hover(function(){$(this).find('.subbox').stop(true,true).slideToggle(); });
                            $('.navmenu').mouseenter(function() {

                                $(this).find('.subnav').css("display", "block"); //you can give it a speed

                            });
                            $('.navmenu').mouseleave(function() {
                                $(this).find('.subnav').css("display", "none");


                                //jQuery(this).css("background-image", "none");


                            });

                        });
                    script>
                div>
            div>
        div>
    div>
    <div class="clear">div>
    
    <div class="fullSlide">
        <div class="bd">
            <ul>
                <li _src="url(picture/banner.jpg)" style="background:#fff center 0 no-repeat;">li>
                <li _src="url(picture/banner.jpg)" style="background:#fff center 0 no-repeat;">li>
                <li _src="url(picture/banner.jpg)" style="background:#fff center 0 no-repeat;">li>
                <li _src="url(picture/banner.jpg)" style="background:#fff center 0 no-repeat;">li>
            ul>
        div>
        <div class="hd">
            <ul>
            ul>
        div>
    div>
    <script type="text/javascript">
        jQuery(".fullSlide").hover(function() {
                jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 1.2)
            },
            function() {
                jQuery(this).find(".prev,.next").fadeOut()
            });
        jQuery(".fullSlide").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "fold",
            autoPlay: true,
            autoPage: true,
            trigger: "click",
            startFun: function(i) {
                var curLi = jQuery(".fullSlide .bd li").eq(i);
                if (!!curLi.attr("_src")) {
                    curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
                }
            }
        });
    script>
    
    <div id="container">
        
        <div class="hours">
            <div class="time">
                <h1>营业时间<br> time
                h1>
                <h2>10:00-22:00h2>
            div>
        div>
        
        <div class="picshow">
            <ul class="list">
                <li class="li1">
                    <a href="product_detail.html"><img src="picture/pic.jpg" width="568" height="700">a>
                li>
                <li class="li2">
                    <a href="product_detail.html"><img src="picture/pic1.jpg" width="226" height="226">a>
                li>
                <li class="li3">
                    <a href="product_detail.html"><img src="picture/pic2.jpg" width="226" height="226">a>
                li>
                <li class="li4">
                    <a href="product_detail.html"><img src="picture/pic3.jpg" width="463" height="465">a>
                li>
                <li class="li5">
                    <a href="product_detail.html"><img src="picture/pic4.jpg" width="463" height="226">a>
                li>
            ul>
        div>
        
        <div class="picshow1">
            <a href="product_detail.html"><img src="picture/pic5.jpg" width="1280" height="865">a>
        div>
        <div class="clear">div>
        
        <div class="picshow2">
            <ul class="list1">
                <li class="pic1">
                    <a href="product_detail.html"><img src="picture/pic6.jpg">a>
                li>
                <li class="pic2">
                    <a href="product_detail.html"><img src="picture/pic7.jpg">a>
                li>
                <li class="pic3">
                    <a href="product_detail.html"><img src="picture/pic8.jpg">a>
                li>
                <li class="pic4">
                    <a href="product_detail.html"><img src="picture/pic9.jpg">a>
                li>
            ul>
        div>
        <div class="clear">div>
        
        <div class="picshow1">
            <a href="product_detail.html"><img src="picture/pic10.jpg" width="1280" height="445">a>
        div>
    div>
    
    <div id="footer">
        <div class="f_nav">
            <div class="item">
                <dl>
                    <dt>servicedt>
                    <dd><a href="#">联系客服a>dd>
                    <dd><a href="#">退换货说明a>dd>
                    <dd><a href="#">售后特色服务a>dd>
                    <dd><a href="#">售后服务政策a>dd>
                dl>
            div>
            <div class="item">
                <dl>
                    <dt>paymentdt>
                    <dd><a href="#">货到付款a>dd>
                    <dd><a href="#">在线支付a>dd>
                    <dd><a href="#">邮政汇款a>dd>
                    <dd><a href="#">发票说明a>dd>
                dl>
            div>
            <div class="item1">
                <div class="title">Qr codediv>
                <div class="code"><img src="picture/ewm.jpg" width="85" height="85">div>
                <div class="lxwm">邮箱：XXX<br> 电话：XXX
                    <br> 问卷调查
                    <br>
                    <a href="#">留言反馈a>div>
            div>
        div>
        
        <div class="foot">
            <div class="copyright">
                <div class="kjnav"><a href="">首页a> <a href="#">鲜花订购a> <a href="yuyue.html">用餐预约a> <a href="#">花漾咖啡花屋a> <a href="about.html">关于花房a>div>
                <div class="copy">Copyright © 2020. All rights reserved. Designed by <a href="#">Wanhua>div>
            div>
            
            <ul class="fx">
                <li>
                    <a href="#"><img src="picture/txwb.jpg">a>
                li>
                <li>
                    <a href="#"><img src="picture/xlwb.jpg">a>
                li>
                <li>
                    <a href="#"><img src="picture/fx.jpg">a>
                li>
            ul>
        div>
    div>
    
    <div id="leftsead">
        <ul>
            <li>
                <a href="javascript:;"><img src="picture/qqd.jpg" width="124" height="54" class="hides"><img src="picture/qq.jpg" width="54" height="54" class="shows">a>
            li>
            <li>
                <a class="youhui"><img src="picture/zcwx.jpg" width="54" height="54" class="shows"><img src="picture/wxd.png" width="145" height="288" class="hides">a>
            li>
            <li>
                <a href="#"><img src="picture/zcwbd.jpg" width="124" height="54" class="hides"><img src="picture/zcwb.jpg" width="54" height="54" class="shows">a>
            li>
            <li>
                <a href="#"><img src="picture/zcmapd.jpg" width="124" height="54" class="hides"><img src="picture/zcmap.jpg" width="54" height="54" class="shows">a>
            li>
            <li>
                <a id="top_btn"><img src="picture/fhtbd.jpg" width="124" height="54" class="hides"><img src="picture/fhdb.jpg" width="54" height="54" class="shows">a>
            li>
        ul>
    div>
    


    <script type="text/javascript">
        $(document).ready(function() {

            $("#leftsead a").hover(function() {
                if ($(this).prop("className") == "youhui") {
                    $(this).children("img.hides").show();
                } else {
                    $(this).children("img.hides").show();
                    $(this).children("img.shows").hide();
                    $(this).children("img.hides").animate({
                        marginLeft: '0px'
                    }, 'slow');
                }
            }, function() {
                if ($(this).prop("className") == "youhui") {
                    $(this).children("img.hides").hide('slow');
                } else {
                    $(this).children("img.hides").animate({
                        marginLeft: '-143px'
                    }, 'slow', function() {
                        $(this).hide();
                        $(this).next("img.shows").show();
                    });
                }
            });

            $("#top_btn").click(function() {
                if (scroll == "off") return;
                $("html,body").animate({
                    scrollTop: 0
                }, 600);
            });

        });
    script>


body>

html>

🏠CSS样式代码


a {text-decoration:none; color:#333333;}
a:hover {text-decoration:none;color:#8cd900;}

/***header***/
#header{ width:100%; height:126px;position:fixed;z-index:999;left:0; background:#fff;}
.top_bg{ width:1120px; height:126px; margin:0 auto; padding:0px 80px;}
#header .logo{ width:150px; height:126px; float:left;}
#header .top{ width:580px; height:126px; float:right;}
#header .guide{ width:580px; height:18px; margin-top:29px; line-height:18px;}
#header .guide .welcom{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#e9babb; float:left;}
#header .guide .login{ float:left; color:#3a2a2a; margin-left:30px; margin-right:20px;} 
#header .guide .login a{ color:#3a2a2a;} #header .guide .login a:hover{ text-decoration:underline;}
#header .guide .shopcart{ color:#3a2a2a; float:left;} #header .guide .shopcart a{ color:#3a2a2a;} .guide .shopcart a:hover{ text-decoration:underline;}
.searchbox{ width:132px; height:18px; float:right;}
.nav{ width:580px; height:79px; line-height:79px;} 
.nav li{ width:116px; float:left; font-size:14px; font-family:"微软雅黑"; text-align:center; position:relative;}
.nav li a{ color:#494a4a;} .nav li a:hover{ color:#8cd900;}
.subnav{ position:absolute; top:79px; left:0px; width:116px; background:#fff;  display:none; margin:0px; padding:0px; z-index:999;}
.subnav ul{ width:116px; text-align:center; border-top:2px solid #90c31f;}
.subnav li{ width:116px; text-align:center;  height:35px; line-height:35px; border-bottom:1px solid #e3dfd9;}
.subnav li a{ font-size:13px; color:#666666;}
.subnav li a:hover{ color:#8cd900;}

/*---------------fullSlide--------------*/
.fullSlide { margin:0px auto; width:1280px; position:relative; height:612px; text-align:center; padding-top:126px;}
.fullSlide .bd { margin:0 auto; position:relative; z-index:0; overflow:hidden;}
.fullSlide .bd ul { width:1280px !important;}
.fullSlide .bd li { width:1280px !important; height:612px; overflow:hidden; text-align:center;}
.fullSlide .bd li a { display:block; height:612px;}
.fullSlide .hd { width:100%; position:absolute; z-index:1; bottom:0; left:0; height:30px; line-height:30px;}
.fullSlide .hd ul {text-align:center;}
.fullSlide .hd ul li {cursor:pointer;display:inline-block;*display:inline;zoom:1;width:17px;height:18px;margin:5px;overflow:hidden;background:url(../image/num.png) no-repeat;
line-height:999px;}
.fullSlide .hd ul .on {background:url(../image/numh.png) no-repeat;}

#container{ width:100%; display:block; overflow:hidden; margin:55px auto 40px;}
.hours{ width:100%; height:80px; background:url(../image/line.jpg) center repeat-x;}
.time{ width:272px; height:80px; margin:0 auto; background:url(../image/time.jpg) no-repeat; line-height:20px;}
.time h1{ text-align:center; font-size:20px; font-family:"微软雅黑"; color:#333333; font-weight:normal;}
.time h2{ line-height:30px; font-size:24px; color:#90c31f; text-align:center; font-weight:normal;}

.picshow{ width:1280px; height:700px; margin:75px auto 0px; position:relative; display:block; overflow:hidden;}
.picshow a img{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}
.picshow a:hover img{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;}
.picshow1{ width:1280px; display:block; overflow:hidden; margin:75px auto 0px;}
.picshow2{ width:910px; margin:165px auto 0px; height:566px; position:relative;}

/***subbox***/
.nybanner{ width:1280px; margin:0px auto 15px; display:block; padding-top:126px;}

五、🎁更多源码

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

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

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

相关阅读:
更多了解 Python：一些有趣的知识介绍
 USB Type-C详细介绍
 SpringBoot配置https
Speedoffice（excel）如何快捷隐藏表格内所有空行
 JAVA集合04_Map接口概述、常用方法、排序、Hashtable面试题
 快收藏！！整理了100个Python小技巧！！
分享96个节日庆典PPT，总有一款适合您
 RESTFul：RESTful简介、RESTful的实现、RESTFul案例
 《痞子衡嵌入式半月刊》第 63 期
 nginx服务升级
原文地址：https://blog.csdn.net/qq_38514421/article/details/127117015

鲜花绿植学生网页设计模板 静态HTML鲜花学生网页作业成品 DIV CSS网上鲜花植物主题静态网页