鲜花绿植学生网页设计模板 静态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="#">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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻