web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：农家乐山庄网站模板，火锅烧烤美食网站html模板下载。包含首页、关于我们、产品列表、产品详情页、新闻列表、新闻详情页、在线留言共7个页面
相关标签

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品

一、作品演示

二、代码目录

三、代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宏源山庄</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript/jquery.js"></script>
<script type="text/javascript" src="Javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Javascript/Carousel.js"></script>
</head><body><div class="xian"></div><div class="top"><div class="header"><span class="wec">欢迎访问宏源山庄！</span><div class="call"><img src="data:images/phone.png"><span class="call">0851-84418118</span></div><div class="clearfix"></div><hr/></div><div><img id="logo" src="data:images/LOGO_big.png"><ul class="nav"><li style="color:#d7000f">首页</li><li class="dw"><a href="about.html">山庄简介</a><ul class="in_menu"><li><a href="about.html">山庄简介</a><ul class="in_menu_1"><li><a href="#">特色炒菜</a></li><li><a href="#">特色火锅</a></li><li><a href="#">爽爽凉菜</a></li><li><a href="#">迷你蒸菜</a></li><li><a href="#">风味小吃</a></li><li><a href="#">宏源烧烤</a></li></ul></li><li><a href="#">山庄荣誉</a><ul class="in_menu_1"><li><a href="news.html">宏源新闻</a></li><li><a href="#">行业新闻</a></li></ul></li></ul></li><li class="dw"><a href="news.html">新闻资讯</a><ul class="in_menu"><li><a href="news.html">宏源新闻</a></li><li><a href="#">行业新闻</a></li></ul></li><li class="dw"><a href="picture.html">特色美食</a><ul class="in_menu"><li><a href="#">特色炒菜</a></li><li><a href="#">特色火锅</a></li><li><a href="#">爽爽凉菜</a></li><li><a href="#">迷你蒸菜</a></li><li><a href="#">风味小吃</a></li><li><a href="#">宏源烧烤</a></li></ul></li><li class="dw"><a style="background:none;padding-right:0;" href="#">山庄环境</a></li><li class="dw"><a style="background:none;padding-right:0;" href="#">人才招聘</a></li><li class="dw"><a href="#">联系我们</a><ul class="in_menu"><li><a href="message.html">在线留言</a></li><li><a href="#">联系我们</a></li></ul></li><div class="clearfix"></div></ul><div class="clearfix"></div> </div></div><!--导航条--><div class="banner"><img src="data:images/5-1.jpg"><img src="data:images/banner.jpg"><img src="data:images/1516872886.jpg"><div class="clearfix"></div>        <ul><li id="red"></li><li></li><li></li></ul><div class="zuo"></div><div class="you"></div><div class="clearfix"></div></div><!--轮播图--><div class="about"><div class="title_1"><div class="kk"><h1>关于我们</h1></div></div><div class="txt">宏源山庄坐落于贵阳市白云区长坡岭国家森林公园松涛湖景区内，山庄内有、特色烤全羊、烤香猪、烤鸡烤鱼、烤兔、土灶柴火鸡等。还有各种野菜及农家饭，并为您免费提供大小会议室及各种娱乐设施。
因本山庄坐落于森林公园内，有山有水、有樱花湖、湖水清凉、湖的周围有茂密的花草树木、空气清新、吐露出十分的芳香。有森林大草坪，草坪宽广、有参天大树、可乘凉可骑马、踢球等各种娱乐。山庄紧靠森林，林内有山间小道、可爬山、摘野菜、玩CS野战、还有吸养床、做游戏等。 林内设有木制包房、每间包房可容纳十几人、包房可唱歌打麻将等。在树林里可边打麻将吸收大自然吐露的芬芳，感受大自然的魅力所在，是避暑之都爽爽贵阳的天然宝地。有得天独厚地理条件，有不可缺少的、丰富的天然养吧，是出门旅游，避暑的地方。</div><div class="image"><img src="data:images/about_1.png"><a href="about.html"><img src="data:images/more.png"></a></div><div class="clearfix"></div></div><div class="food"><div class="title_1"><div class="kk"><h1>特色美食</h1></div></div><div class="contont"><ul><li id="red">全部</li><li>宏源火锅</li><li>宏源炒菜</li><li>宏源烧烤</li><div class="clearfix"></div></ul><div class="pro"><a href="pro_del.html"><img src="data:images/f_1.png"><div class="black"></div><div class="des">酸汤鱼</div></a><a href="pro_del.html"><img src="data:images/f_2.png"><div class="black"></div><div class="des">尖椒肉丝</div></a><a href="pro_del.html"><img src="data:images/f_3.png"><div class="black"></div><div class="des">炝炒牛肉</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_4.png"><div class="black"></div><div class="des">糯米丸子</div></a><div class="clearfix"></div><a href="pro_del.html"><img src="data:images/f_5.png"><div class="black"></div><div class="des">牛油火锅</div></a><a href="pro_del.html"><img src="data:images/5-1_26.gif"><div class="black"></div><div class="des">绿茶酥</div></a><a href="pro_del.html"><img src="data:images/f_7.png"><div class="black"></div><div class="des">特色糕点</div></a><a class="no_margin" href="#"><img src="data:images/f_8.png"><div class="black"></div><div class="des">特色小炒</div></a><div class="clearfix"></div></div><div class="pro"><a href="pro_del.html"><img src="data:images/f_5.png"><div class="black"></div><div class="des">酸汤鱼1</div></a><a href="pro_del.html"><img src="data:images/f_2.png"><div class="black"></div><div class="des">尖椒肉丝</div></a><a href="pro_del.html"><img src="data:images/f_4.png"><div class="black"></div><div class="des">炝炒牛肉</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_3.png"><div class="black"></div><div class="des">糯米丸子</div></a><div class="clearfix"></div><a href="pro_del.html"><img src="data:images/f_1.png"><div class="black"></div><div class="des">牛油火锅</div></a><a href="pro_del.html"><img src="data:images/5-1_26.gif"><div class="black"></div><div class="des">绿茶酥</div></a><a href="pro_del.html"><img src="data:images/f_7.png"><div class="black"></div><div class="des">特色糕点</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_8.png"><div class="black"></div><div class="des">特色小炒</div></a><div class="clearfix"></div></div><div class="pro"><a href="pro_del.html"><img src="data:images/f_4.png"><div class="black"></div><div class="des">酸汤鱼2</div></a><a href="pro_del.html"><img src="data:images/f_3.png"><div class="black"></div><div class="des">尖椒肉丝</div></a><a href="pro_del.html"><img src="data:images/f_2.png"><div class="black"></div><div class="des">炝炒牛肉</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_1.png"><div class="black"></div><div class="des">糯米丸子</div></a><div class="clearfix"></div><a href="pro_del.html"><img src="data:images/f_5.png"><div class="black"></div><div class="des">牛油火锅</div></a><a href="pro_del.html"><img src="data:images/5-1_26.gif"><div class="black"></div><div class="des">绿茶酥</div></a><a href="pro_del.html"><img src="data:images/f_7.png"><div class="black"></div><div class="des">特色糕点</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_8.png"><div class="black"></div><div class="des">特色小炒</div></a><div class="clearfix"></div></div><div class="pro"><a href="pro_del.html"><img src="data:images/f_2.png"><div class="black"></div><div class="des">酸汤鱼3</div></a><a href="pro_del.html"><img src="data:images/f_4.png"><div class="black"></div><div class="des">尖椒肉丝</div></a><a href="pro_del.html"><img src="data:images/f_1.png"><div class="black"></div><div class="des">炝炒牛肉</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_3.png"><div class="black"></div><div class="des">糯米丸子</div></a><div class="clearfix"></div><a href="pro_del.html"><img src="data:images/f_5.png"><div class="black"></div><div class="des">牛油火锅</div></a><a href="pro_del.html"><img src="data:images/5-1_26.gif"><div class="black"></div><div class="des">绿茶酥</div></a><a href="pro_del.html"><img src="data:images/f_7.png"><div class="black"></div><div class="des">特色糕点</div></a><a class="no_margin" href="pro_del.html"><img src="data:images/f_8.png"><div class="black"></div><div class="des">特色小炒</div></a><div class="clearfix"></div></div><a href="picture.html" class="more">查看更多</a></div></div><div class="news"><div class="title_1"><div class="kk"><h1>新闻资讯</h1></div></div><div class="news_contont"><div class="box1" onClick="link()"><a href="news_details.html"><img src="data:images/n_1.png"></a><div class="xinwen"><span>2016-8-24</span><a href="news_details.html">贵阳特色山庄告诉你休闲山庄靠什么来打动消费者？</a><div class="small_font">贵阳特色山庄小编来告诉你休闲山庄靠什么来打动消费者。这是要回答市民提出的第一个问题。一提到贵阳山庄，人们立马会联想到广袤的乡村，...</div></div><div class="clearfix"></div></div><div class="box2" onClick="link()"><a href="news_details.html"><img src="data:images/n_2.png"></a><div class="xinwen"><span>2016-8-24</span><a href="news_details.html">贵阳特色山庄告诉你休闲山庄靠什么来打动消费者？</a><div class="small_font">贵阳特色山庄小编来告诉你休闲山庄靠什么来打动消费者。这是要回答市民提出的第一个问题。一提到贵阳山庄，人们立马会联想到广袤的乡村，...</div></div><div class="clearfix"></div></div><div class="clearfix"></div><div class="box1" onClick="link()"><a href="news_details.html"><img src="data:images/n_3.png"></a><div class="xinwen"><span>2016-8-24</span><a href="news_details.html">贵阳特色山庄告诉你休闲山庄靠什么来打动消费者？</a><div class="small_font">贵阳特色山庄小编来告诉你休闲山庄靠什么来打动消费者。这是要回答市民提出的第一个问题。一提到贵阳山庄，人们立马会联想到广袤的乡村，...</div></div><div class="clearfix"></div></div><div class="box2" onClick="link()"><a href="news_details.html"><img src="data:images/n_4.png"></a><div class="xinwen"><span>2016-8-24</span><a href="news_details.html">贵阳特色山庄告诉你休闲山庄靠什么来打动消费者？</a><div class="small_font">贵阳特色山庄小编来告诉你休闲山庄靠什么来打动消费者。这是要回答市民提出的第一个问题。一提到贵阳山庄，人们立马会联想到广袤的乡村，...</div></div><div class="clearfix"></div></div><div class="clearfix"></div><div class="box1" onClick="link()"><a href="news_details.html"><img src="data:images/n_5.png"></a><div class="xinwen"><span>2016-8-24</span><a href="news_details.html">贵阳特色山庄告诉你休闲山庄靠什么来打动消费者？</a><div class="small_font">贵阳特色山庄小编来告诉你休闲山庄靠什么来打动消费者。这是要回答市民提出的第一个问题。一提到贵阳山庄，人们立马会联想到广袤的乡村，...</div></div><div class="clearfix"></div></div><div class="box2" onClick="link()"><a href="news_details.html"><img src="data:images/n_6.png"></a><div class="xinwen"><span>2016-8-24</span><a href="news_details.html">贵阳特色山庄告诉你休闲山庄靠什么来打动消费者？</a><div class="small_font">贵阳特色山庄小编来告诉你休闲山庄靠什么来打动消费者。这是要回答市民提出的第一个问题。一提到贵阳山庄，人们立马会联想到广袤的乡村，...</div></div><div class="clearfix"></div></div><div class="clearfix"></div></div><a href="news.html" class="more">查看更多</a></div><div class="scenery"><div class="title_1"><div class="kk"><h1>宏源美景</h1></div></div><div class="poster-main" id="carousel" data-setting='{"width":1000,"height":350,"posterWidth":370,"posterHeight":350,"scale":0.8,"speed":1000,"autoPlay":true,"delay":3000,"verticalAlign":"middle"}'><div class="prev"></div><ul class="s_box"><li class="poster-item"><a href=""><img src="data:images/s_1.png"><div class="name">浪漫樱花林</div></a></li><li class="poster-item"><a href=""><img src="data:images/s_2.png"><div class="name">浪漫樱花林</div></a></li><li class="poster-item"><a href=""><img src="data:images/s_3.png"><div class="name">浪漫樱花林</div></a></li><li class="poster-item"><a href=""><img src="data:images/s_4.png"><div class="name">浪漫樱花林</div></a></li><li class="poster-item"><a href=""><img src="data:images/s_5.png"><div class="name">浪漫樱花林</div></a></li></ul><div class="next"></div></div></div><div class="link"><div class="link_title">友情链接/Links</div><div class="link_box"><ul class="link_link"><li><a href="#">贵阳农家乐</a></li><li><a href="#">金阳山庄</a></li><li><a href="#">贵阳娱乐山庄</a></li><li><a href="#">贵阳特色烧烤</a></li><li><a href="#">贵阳特色美食</a></li><li><a href="#">贵阳著名景区</a></li><li><a href="#">贵州驰通网络</a></li><div class="clearfix"></div></ul></div></div><div class="footer"><img src="data:images/logo.png" class="logo"><div class="copy">请记住我的ID号：1117  访问统计：浏览总量<span>15252<span>次 /今日浏览<span>117次</span> <br/>
备案号：建议(1024*768) IE8.0以上浏览器浏览本站 <a href="#">即时通管理</a> | <a href="#">后台登录</a>  Powered by WangID 驰通网络<br/>
<a href="#">触屏版</a>丨<a href="#">电脑版</a>丨<a href="#">在线留言</a></div><div class="contact"><ul><li style="background:url(images/phone_2.png) no-repeat left center">咨询电话：0851-84418118/18585801117</li><li style="padding-left:0">|</li><li style="background:url(images/map_1.png) no-repeat left center">地址：贵州省贵阳市白云区长坡岭森林公园内</li><li style="padding-left:0">|</li><li style="background:url(images/Ellipse_1.png) no-repeat left center">网址：www.gyhysz.com / http://1117.wangid.com</li><div class="clearfix"></div></ul><img src="data:images/pic.png"><h6>微信扫一扫 关注我们</h6></div></div><script type="text/javascript">$(".in_menu_1").hide();$(".in_menu li").mouseenter(function(){$(this).children(".in_menu_1").show(); })$(".in_menu li").mouseleave(function(){$(this).children(".in_menu_1").hide(); })
/*轮播图的设置*/n = 0;$(".banner img").hide().eq(0).show();/*设置轮播图的第一张总是显示，其他图片隐藏*//*设置轮播图定时切换*/setInterval(                       function(){if(n < $(".banner img").length - 1){n = n + 1;}else{n = 0;}$(".banner img").hide().eq(n).show();$(".banner li").eq(n).css("background-color","#d7000f");$(".banner li").eq(n).siblings(".banner li").css("background-color","#333");},5000    ) $(".you").click(function(){if(n < $(".banner img").length-1){n = n + 1;}else{n = 0;}$(".banner img").hide().eq(n).show();$(".banner li").eq(n).css("background-color","#d7000f");$(".banner li").eq(n).siblings(".banner li").css("background-color","#333");})$(".zuo").click(function(){if(n > 0){n = n - 1;}else{n = $(".banner img").length-1;}$(".banner img").hide().eq(n).show();$(".banner li").eq(n).css("background-color","#d7000f");$(".banner li").eq(n).siblings(".banner li").css("background-color","#333");})$(".zuo").mouseenter(function(){$(this).css("background-image","url(images/left_2.png)");  })$(".you").mouseenter(function(){$(this).css("background-image","url(images/right.png)");    })$(".zuo").mouseleave(function(){$(this).css("background-image","url(images/left.png)"); })$(".you").mouseleave(function(){$(this).css("background-image","url(images/right_2.png)");  })$(".banner li").click(function(){$(".banner img").eq($(this).index()).show()$(".banner img").eq($(this).index()).siblings("img").hide()$(".banner li").eq($(this).index()).css("background-color","#d7000f");$(".banner li").eq($(this).index()).siblings(".banner li").css("background-color","#333");})$(".pro").hide().eq(0).show()$(".contont li").click(function(){$(".pro").eq($(this).index()).show();$(".pro").eq($(this).index()).siblings(".pro").hide();$(".contont li").eq($(this).index()).css({"background-color":"#d7000f","color":"#fff"});$(".contont li").eq($(this).index()).siblings(".contont li").css({"background-color":"#fff","color":"#333"});})$(".pro a").mouseenter(function(){$(this).children(".black").hide();$(this).siblings().children(".black").show(); $(this).children(".des").addClass("red");$(this).siblings().children(".des").removeClass("red");              })$(".pro a").mouseleave(function(){$(this).children(".black").show();$(this).children(".des").removeClass("red");})$(".box1,.box2").mouseenter(function(){$(this).addClass("shadow");  $(this).find("a").css("color","#d7000f");})$(".box1,.box2").mouseleave(function(){$(this).removeClass("shadow");  $(this).find("a").css("color","#333");})function link(){  window.location.href="news_details.html";}$(function () {var datas = [{'z-index': 6, 'font-size':16, opacity: 1,   width: 370, height: 350, top: 0,  left: 0   },{'z-index': 4, 'font-size':14, opacity: 0.9, width: 307, height: 290, top: 30, left: -170},{'z-index': 3, 'font-size':12, opacity: 0.8, width: 243, height: 230, top: 60, left: -310},{'z-index': 3, 'font-size':12, opacity: 0.8, width: 243, height: 230, top: 60, left: 437 },{'z-index': 4, 'font-size':14, opacity: 0.9, width: 307, height: 290, top: 30, left: 233 },]move();function move() {for (var i = 0; i < datas.length; i++) {var data = datas[i];$('#s_box li').eq(i).css({'z-index':data['z-index'],'font-size':data['font-size']});$('#s_box li').eq(i).stop().animate(data, 1200);}}$('.prev').on('click', function () {var last = datas.pop();datas.unshift(last);move();})function nextYewu(){var first = datas.shift();datas.push(first);move();}$('.next').on('click', nextYewu);var timer = setInterval(function(){nextYewu();},5000);})$(function(){Carousel.init($("#carousel"));$("#carousel").init();});
</script></body>
</html>