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_javascript

二、代码目录

web前端大三实训网页设计:餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript_web网页设计与开发_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>