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期末大作业(成品下载)


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

二、代码目录


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

三、代码实现 


<!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="images/phone.png">
<span class="call">0851-84418118</span>
</div>
<div class="clearfix"></div>
<hr/>
</div>
<div>
<img id="logo" src="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="images/5-1.jpg">
<img src="images/banner.jpg">
<img src="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="images/about_1.png">
<a href="about.html"><img src="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="images/f_1.png">
<div class="black"></div>
<div class="des">酸汤鱼</div>
</a>
<a href="pro_del.html">
<img src="images/f_2.png">
<div class="black"></div>
<div class="des">尖椒肉丝</div>
</a>
<a href="pro_del.html">
<img src="images/f_3.png">
<div class="black"></div>
<div class="des">炝炒牛肉</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_4.png">
<div class="black"></div>
<div class="des">糯米丸子</div>
</a>
<div class="clearfix"></div>
<a href="pro_del.html">
<img src="images/f_5.png">
<div class="black"></div>
<div class="des">牛油火锅</div>
</a>
<a href="pro_del.html">
<img src="images/5-1_26.gif">
<div class="black"></div>
<div class="des">绿茶酥</div>
</a>
<a href="pro_del.html">
<img src="images/f_7.png">
<div class="black"></div>
<div class="des">特色糕点</div>
</a>
<a class="no_margin" href="#">
<img src="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="images/f_5.png">
<div class="black"></div>
<div class="des">酸汤鱼1</div>
</a>
<a href="pro_del.html">
<img src="images/f_2.png">
<div class="black"></div>
<div class="des">尖椒肉丝</div>
</a>
<a href="pro_del.html">
<img src="images/f_4.png">
<div class="black"></div>
<div class="des">炝炒牛肉</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_3.png">
<div class="black"></div>
<div class="des">糯米丸子</div>
</a>
<div class="clearfix"></div>
<a href="pro_del.html">
<img src="images/f_1.png">
<div class="black"></div>
<div class="des">牛油火锅</div>
</a>
<a href="pro_del.html">
<img src="images/5-1_26.gif">
<div class="black"></div>
<div class="des">绿茶酥</div>
</a>
<a href="pro_del.html">
<img src="images/f_7.png">
<div class="black"></div>
<div class="des">特色糕点</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="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="images/f_4.png">
<div class="black"></div>
<div class="des">酸汤鱼2</div>
</a>
<a href="pro_del.html">
<img src="images/f_3.png">
<div class="black"></div>
<div class="des">尖椒肉丝</div>
</a>
<a href="pro_del.html">
<img src="images/f_2.png">
<div class="black"></div>
<div class="des">炝炒牛肉</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_1.png">
<div class="black"></div>
<div class="des">糯米丸子</div>
</a>
<div class="clearfix"></div>
<a href="pro_del.html">
<img src="images/f_5.png">
<div class="black"></div>
<div class="des">牛油火锅</div>
</a>
<a href="pro_del.html">
<img src="images/5-1_26.gif">
<div class="black"></div>
<div class="des">绿茶酥</div>
</a>
<a href="pro_del.html">
<img src="images/f_7.png">
<div class="black"></div>
<div class="des">特色糕点</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="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="images/f_2.png">
<div class="black"></div>
<div class="des">酸汤鱼3</div>
</a>
<a href="pro_del.html">
<img src="images/f_4.png">
<div class="black"></div>
<div class="des">尖椒肉丝</div>
</a>
<a href="pro_del.html">
<img src="images/f_1.png">
<div class="black"></div>
<div class="des">炝炒牛肉</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_3.png">
<div class="black"></div>
<div class="des">糯米丸子</div>
</a>
<div class="clearfix"></div>
<a href="pro_del.html">
<img src="images/f_5.png">
<div class="black"></div>
<div class="des">牛油火锅</div>
</a>
<a href="pro_del.html">
<img src="images/5-1_26.gif">
<div class="black"></div>
<div class="des">绿茶酥</div>
</a>
<a href="pro_del.html">
<img src="images/f_7.png">
<div class="black"></div>
<div class="des">特色糕点</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="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="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="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="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="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="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="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="images/s_1.png">
<div class="name">浪漫樱花林</div>
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_2.png">
<div class="name">浪漫樱花林</div>
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_3.png">
<div class="name">浪漫樱花林</div>
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_4.png">
<div class="name">浪漫樱花林</div>
</a>
</li>
<li class="poster-item">
<a href="">
<img src="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="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="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>


四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)


​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​​web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript..._web开发_03



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

六、更多HTML期末大作业(成品下载)


200多例 ​​HTML5期末考核大作业源码​​ 包含 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript..._html5_05web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript..._web_06