HTML静态网页作业-餐饮美食网页(HTML+CSS+JavaScript)

本文链接：https://blog.csdn.net/ruan365392777/article/details/118485322

HTML静态网页作业-餐饮美食网页(HTML+CSS+JavaScript)

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

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

作品介绍

1.网页作品简介方面 ：简单的网站模板，餐饮美食网站模板，餐饮美食加盟网站html模板下载。，文章页支持手机PC响应式布局。总共8个页面html下载。

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

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

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

一、作品演示

1.首页

在这里插入图片描述

2.门店分布

在这里插入图片描述

3.招商加盟

在这里插入图片描述

4.在线商城

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<meta name="keyword" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.1.11.3.js"></script>
	<script src="js/SuperSlide.2.1.1.js"></script>
    <script src="js/js.js"></script>
    <link type="text/css" rel="stylesheet" href="css/skitter.styles.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">

	<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
	<script type="text/javascript" src="js/jquery.haiwon.js"></script>
	<script type="text/javascript" src="js/css.js"></script>
	<script type="text/javascript" src="js/js.js"></script>

<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/png.js"></script>
<script>
<![endif]-->
</head>
<body>
	<header class="index_header">
		<div class="style">
			<ul class="index_logo">
				<li><a href="about.html">关于我们</a></li>
				<li><a href="fendian.html">门店分布</a></li>
				<li><a href="injon.html">招商加盟</a></li>
				<div><a href=""><img src="images/index_03.png" alt="" title="首页"></a></div>
				<li><a href="">在线商城</a></li>
				<li><a href="zp.html">人才招聘</a></li>
				<li><a href="contact.html">联系我们</a></li>
			</ul>
		</div>
	</header>
	<nav class="index_nav">
		<div style="width:100%;  overflow:hidden; height:633px; position:relative;  z-index:0; ">
		  <div style=" width:1920px; height:633px; position:relative; left:50%; ">
		    <div style="position:relative;width:1920px;height:633px; z-index:1;   left:-50%;">
				<div class="banner box_skitter skitter-default" style="height:633px">
					<ul style="display: none;">
						<li><a target="_blank" href=""><img src="images/banner02.jpg"></a></li>
						<li><a target="_blank" href=""><img src="images/banner02.jpg"></a></li>
						<li><a target="_blank" href=""><img src="images/banner02.jpg"></a></li>
						<li><a target="_blank" href=""><img src="images/banner02.jpg"></a></li>
					</ul>
					<span class="info_slide_dots" style="left: 926px;">
						<span class="image_number" rel="0" id="image_n_1_0"></span>
						<span class="image_number" rel="1" id="image_n_2_0"></span>
						<span class="image_number" rel="2" id="image_n_3_0"></span>
						<span class="image_number image_number_select" rel="3" id="image_n_4_0"></span>
					</span>
				</div>
			</div>
		</div>
	</div>
	</nav>
	<style type="text/css">
		.poster-main{
			position: absolute;
			top:220px;
			margin-left: 100px;
		}
		.poster-main .poster-list .poster-item{
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
		}
		.poster-main .poster-list .poster-item a img{
			border-radius: 50%;
			border:8px solid #fff;
		}
		.poster-main .poster-btn{
			position: absolute;
			top: 0;
			cursor: pointer;
		}
		.poster-main .poster-prev-btn{
			left: -220px;
			background: url("images/btn_l.png") no-repeat center center;
		}
		.poster-main .poster-next-btn{
			right: -220px;
			background: url("images/btn_r.png") no-repeat center center;
		}
	</style>

	<div class="index_style1">
		<div class="style" style="position:relative">
			<div class="poster-main" id="carousel" data-setting='{
							"width":1000,
							"height":300,
							"posterWidth":300,
							"posterHeight":300,
							"scale":0.8,
							"speed":1000,
							"autoPlay":true,
							"delay":3000,
							"verticalAlign":"middle"
							}'> 
			   <div class="poster-btn poster-prev-btn"></div> 
			   <ul class="poster-list"> 
			    <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" /></a></li> 
			    <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" /></a></li> 
			    <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" /></a></li> 
			    <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" /></a></li> 
			    <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" /></a></li> 
			   </ul> 
			   <div class="poster-btn poster-next-btn"></div> 
		  </div>
		  <div class="instyle1_s"><a href="">在线购买</a></div> 
		</div>
		<script src="js/Carousel.js"></script> 
		<script type="text/javascript">
			$(function(){
				Carousel.init($("#carousel"));
				$("#carousel").init();
			});
		</script>
	</div>

	<div class="index_style2">
		<div class="style" style="position:relative">
			<a href="" class="index_s2_a1"><img src="images/index1_07.png" alt=""></a>
			<div class="index_s2_c">
公司的组织形式。以营利为目的的社团法人。在资本主义社会获得高度发展。我国在建国后对私营公司进行了社会主义改造。国营工、商、建筑、运输等部门中实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，也通称公司。近年来随着我国经济体制的改革，享有法人资格的各种公司纷纷设立，按章程从事自身的生产经营活动。                                      
实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，按章程从事自身的生产经营活动。
<a href="" class="index_s2_ca">查看更多&gt;&gt;</a>
		</div>
		</div>
	</div>
	<div class="index_style3">
		<div class="style" style="position:relative">
			<div class="index_style3_t"><img src="images/index1_11.png" alt=""></div>
			<ul class="index_s3_c">
				<li>
					<dl class="ins3_dl">
						<dt><a href="injon_show.html"><img src="images/index1_15.png" alt=""></a></dt>
						<dd class="ins3_dl_dd1">卤鱼有约</dd>
      					<dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒，资产慌，慌的不只是投资者，很多上市公司手头空有闲钱，却也没有特别好的投向。</dd>
      					<dd class="ins3_dl_dd3"><a href="">查看更多&gt;&gt;</a></dd>
					</dl>
				</li>
				<li>
					<dl class="ins3_dl">
						<dt><a href="injon_show.html"><img src="images/index1_17.png" alt=""></a></dt>
						<dd class="ins3_dl_dd1">卤鱼有约</dd>
      					<dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒，资产慌，慌的不只是投资者，很多上市公司手头空有闲钱，却也没有特别好的投向。</dd>
      					<dd class="ins3_dl_dd3"><a href="">查看更多&gt;&gt;</a></dd>
					</dl>
				</li>
				<li>
					<dl class="ins3_dl">
						<dt><a href="injon_show.html"><img src="images/index1_20.png" alt=""></a></dt>
						<dd class="ins3_dl_dd1">卤鱼有约</dd>
      					<dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒，资产慌，慌的不只是投资者，很多上市公司手头空有闲钱，却也没有特别好的投向。</dd>
      					<dd class="ins3_dl_dd3"><a href="">查看更多&gt;&gt;</a></dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>
	<div class="index_style4">
		<div class="style" style="position:relative">
			<dl class="ins_dl1">
				<dt><a href="fendian.html"><img src="images/index1_26.png" alt=""></a></dt>
				<dd><a href="">湖北一店</a></dd>
			</dl>
			<dl class="ins_dl1">
				<dt><a href="fendian.html"><img src="images/index1_26.png" alt=""></a></dt>
				<dd><a href="">湖北二店</a></dd>
			</dl>
			<dl class="ins_dl1">
				<dt><a href="fendian.html"><img src="images/index1_26.png" alt=""></a></dt>
				<dd><a href="">湖北三店</a></dd>
			</dl>
			<dl class="ins_dl1">
				<dt><a href="fendian.html"><img src="images/index1_26.png" alt=""></a></dt>
				<dd><a href="">湖北三店</a></dd>
			</dl>
		</div>
	</div>
	<div class="index_style5">
		<div class="style">
			<dl class="inst5_left">
				<dt><a href="">联系我们</a></dt>
				<dd>
					公司名称：XXXXXXXXXXXXX<br/>
					联 系 人：XXXXXX<br/>
					联系电话：XXXXX<br/>
					联系 Q Q：XXXXX<br/>
					公司网址：XXXXX<br/>
					公司电话：XXXXX<br/>
					公司邮箱：XXXXX<br/>
					公司地址：XXXXXXXXXXXXXXXXXXXXX
				</dd>
			</dl>
			<div class="inst5_right">
				<form action="" onsubmit="return check()">
					<ul class="inst5_right_ul">
						<li><span>姓名：</span><input type="text" id="in_username" name="name"></li>
						<li><span>电话：</span><input type="text" id="in_tel"></li>
						<li><span>邮箱：</span><input type="text" id="in_email"></li>
						<li style="height:100px"><span>留言：</span><textarea name="" id="in_message">	
						</textarea></li>
					</ul>
					<div class="inst5_right_d"><input type="submit"></div>
				</form>
			</div>
		</div>
	</div>
	<footer class="index_footer">
		<div class="style index_fc">
			<div class="index_fc1">
				友情链接
			</div>
			<div class="index_fc2">
				<ul>
					<li><a href="">新华网湖北频道</a></li>
					<li>|</li>
					<li><a href="">长江网</a></li>
					<li>|</li>
					<li><a href="">福州房产网</a></li>
					<li>|</li>
					<li><a href="">武汉家装</a></li>
					<li>|</li>
					<li><a href="">房地产英才网</a></li>
					<li>|</li>
					<li><a href="">南昌圈圈网</a></li>
					<li>|</li>
					<li><a href="">长江网</a></li>
					<li>|</li>
					<li><a href="">福州房产网</a></li>
					<li>|</li>
					<li><a href="">武汉家装</a></li>
					<li>|</li>
					<li><a href="">福州房产网</a></li>
					<li>|</li>
					<li><a href="">武汉家装</a></li>
					<li>|</li>
					<li><a href="">房地产英才网</a></li>
					<li>|</li>
					<li><a href="">房地产英才网</a></li>
					<div class="clear"></div>
				</ul>
				<div>XXXXXXXXXXXXX @copy;版权所有</div>
			</div>
			<div class="index_fc3">
				<img src="images/index1_30.png" alt="">
				<span>扫一扫关注</span>
			</div>
		</div>
	</footer>
</body>
</html>
<script>

     
   function check() {
   		var name = $("#in_username").val();  
   		var tel = $("#in_tel").val();
       var email = $("#in_email").val();   
       var message = $("#in_message").text();  
        if(name == "") {  
           alert("姓名不能为空");  
 
           return false;  
       } 
        if(tel == "") {  
           alert("电话不能为空");  
 
           return false;  
       } 

       if(email == "") {  
           alert("Email值不能为空");  
 
           return false;  
       }  
         
       if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {  
           alert("邮箱格式不正确,必须包含@和.");  
           return false;  
       }  
       if(message == "") {  
           alert("留言不能为空");  
           return false;  
       }   
        
   }  

</script>