📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

F99JP 上海美食 5页无js 带留言表单

🧩 2.图片演示

web网页设计期末课程大作业：美食餐饮文化主题网站设计——上海美食网站制作与实现 5页_web前端

web网页设计期末课程大作业：美食餐饮文化主题网站设计——上海美食网站制作与实现 5页_web前端期末大作业_02

web网页设计期末课程大作业：美食餐饮文化主题网站设计——上海美食网站制作与实现 5页_web前端_03

web网页设计期末课程大作业：美食餐饮文化主题网站设计——上海美食网站制作与实现 5页_网页设计_04

web网页设计期末课程大作业：美食餐饮文化主题网站设计——上海美食网站制作与实现 5页_网页设计_05

四、💒 网站代码

🧱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" />
<link href="css/shouye.css" type="text/css" rel="stylesheet" />

<title>上海美食</title>
</head>

<body style="height:1000px;">
<div class="sum">
    <div class="banner"><img src="img/banner.jpg" />
  </div>
  <div class="menu">
    <ul>
       <li><a href="index.html">主页</a></li>
      <li><a href="zhongcan.html">美食展示</a></li>
      <li><a href="meishizhizuo.html">美食制作</a></li>
      <li><a href="mingdian.html">名店搜罗</a></li>
      <li><a href="liuyan.html">留言板</a></li>
    </ul>
  </div>
  <div class="null"></div>
  <div class="content">
    <div class="content_left">
      <div class="login">
        <div class="login_top">登陆</div>
        <div class="user">用户名：
          <input type="text" size="20" />
        </div>
        <div class="pass">密  码：
          <input type="password" size="20" />
        </div>
        <div class="down">
          <input type="button" value="登 陆" />
          <input type="button" value="注 册" />
        </div>
      </div>
      <div class="lnull"></div>
        <img src="img/hh1.jpg" width="200" />
    </div>
    <div class="content_right">
      <div class="zhuce" >
        <div class="zhuce_info">姓名：
          <input />
        </div>
        <div class="zhuce_info">电话：
          <input />
        </div>
        <div class="zhuce_info">邮箱：
          <input />
        </div>
        <div class="zhuce_info">手机：
          <input />
        </div>
        <div class="">留言：
          <textarea style="width:460px; height:250px; border:1px solid #000; float:right;"></textarea>
        </div>
        <div class="subout">
          <div class="sub" ><a href="#">提交</a></div>
          <div class="sub" ><a href="#">重置</a></div>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="foot">
   <p align="center" style="line-height:60px; color:#fff;">欢迎光临</p>
    
  </div>
</div>
</body>
</html>

🏠CSS样式代码

*{ margin:0; padding:0; font-family:Microsoft YaHei;}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}
.center{   }
.em{ text-indent:2em;}
p{ font-size:14px; line-height:24px; color:#555;}



body {
  margin:0;
  padding:0;

}
.null {
  width:1000px;
  height:20px;
}
.sum {
  width:1000px;
  margin:0 auto; 
  height:auto; 
}

#div1 {
  width: 60px;
  height: 80px;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #FFF;
  background-color: #990;
}

.menu {
font-family: arial, sans-serif; 
width:1000px; 
margin:0; 


}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;

}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a {
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:34px; 
color:#fff; 
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#0362a4; 
line-height:34px; 

width:199px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none; z-index:99999;
}

.menu ul li:hover ul {
display:block; 
position:absolute; 
top:34px; 
left:0; 
width:105px; z-index:99999;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#faeec7;  z-index:99999;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
  color:#000;
  background-color:#f00; z-index:99999;
}


.content {
  width:1000px;
  height:600px;
}
.content_left {
  width:240px;
  height:600px;
  float:left;
}
.login {
  width:238px;
  height:268px;
  border:1px solid #CCCCCC;
}
.login_top {
  width:238px;
  height:40px;
  font-size:20px;
  color:#333333;
  line-height:40px;
  text-align:center;
}
.user {
  width:238px;
  height:60px;
  font-size:18px;
}
.pass {
  width:238px;
  height:60px;
font-size:18px;
}
.right_main{ padding:10px;}

.down {
  width:200px; padding-left:30px;
  height:88px;
}
.lnull {
  width:240px;
  height:30px;
}
.list {
  width:238px;
  height:298px;
  border:1px solid #CCCCCC;
}
.list_one_sum {
  width:218px;
  height:248px;
  padding:0 10px 0 10px;
}
.list_one {
  width:218px;
  height:30px;
  border-bottom:1px dotted #CCCCCC;
  line-height:30px;
  font-size:14px;
}
.list_one_left {
  width:30px;
  height:30px;
  float:left;
}
.list_one_center {
  width:138px;
  height:30px;
  float:left;
}
.list_one_right {
  width:50px;overflow:hidden;
  height:30px;
  float:left;
  font-size:11px;
  color:#666666;
}
.list_one a {
  text-decoration:none;
  color:#666666;
}
.list_one a:hover {
  text-decoration:underline;
  color:#003300;
}
.content_right {
  width:740px;
  float:right;
  height: auto;
}
.content_top {
  width:740px;
  height:280px;
}
.content_null {
  width:740px;
  height:20px;
}
.content_down {
  width:740px;
  height:300px;
}
.content_down_left {
  width:360px;
  height:300px;
  float:left;
}
.content_down_right {
  width:360px;
  height:300px;
  float:right;
}
.foot {
  width:1000px; margin-top:30px;
  height:60px; background:#0362a4; color:#fff;
}

.top {
  width:320px;
  margin:0 auto;
}
.foot_top li {
  list-style:none;
  font-size:14px;
  width:80px;
  height:40px;
  float:left;
}
.foot_top li a {
  text-decoration:none;
  color:#666666;
}
.foot_top li a:hover {
  color:#FF0000;
}
.foot_down {
  text-align:center;
  font-size:14px;
  color:#666666;
}

.zhuce{width:600px; height:300px; margin:auto; margin-top:80px; margin-left:80px; font-size:16px; color:#222;}
.zhuce_info{width:600px; height:30px; margin:10px auto;}
.zhuce_info input{ width:450px; height:20px; padding:5px; border:1px solid #333; font-size:14px; color:#333; float:right;}

.subout{width:400px; height:50px; margin-left:200px; font-size:18px; color:#222;}
.sub{width:120px; height:25px; padding:5px; margin:10px; float:left; background-color:#900; text-align:center; }
.sub:hover{ background-color:#000;}
.sub a{ font-size:18px; color:#fff;}