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

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

时间：2023-12-24 04:43:50

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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 © . 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>

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