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

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

来源：花匠小妙招时间：2024-11-15 02:44

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

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>  <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> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284

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;} 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455