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

最新推荐文章于 2024-04-20 14:39:06 发布

STU学生网页设计

最新推荐文章于 2024-04-20 14:39:06 发布

阅读量434

点赞数

分类专栏：网页设计文章标签： css html 前端 javascript html5

本文链接：https://blog.csdn.net/qq_38514421/article/details/127117015

版权

网页设计专栏收录该内容

1045 篇文章 53 订阅

订阅专栏

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

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="#">0</a>）</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:00</h2>
            </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>service</dt>
                    <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>payment</dt>
                    <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 code</div>
                <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="#">Wanhu</a></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>
    <!--leftsead end-->


    <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模板、等!

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

STU学生网页设计

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
鲜花绿植学生网页设计模板静态HTML鲜花学生网页作业成品 DIV CSS网上鲜花植物主题静态网页

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫