期末前端web大作业：HTML+CSS+JavaScript简洁的餐饮网站(8个页面) 学生美食网页设计作品静态HTML网页模板源码大学生美食文化网站制作简单餐饮文化网页设计成品

最新推荐文章于 2024-06-18 10:01:58 发布

html网页制作

最新推荐文章于 2024-06-18 10:01:58 发布

阅读量956

点赞数 21

分类专栏：网页设计文章标签：前端 javascript html css 美食课程设计

本文链接：https://blog.csdn.net/wx___BJ050106/article/details/126187634

版权

网页设计专栏收录该内容

685 篇文章 25 订阅

订阅专栏

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

@[TOC](文章目录📂)

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

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

四、网站效果🌐

在这里插入图片描述

五、代码实现 🪓

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>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/upDateStyle.css" />
<script type="text/javascript">
window.top["BNPage"]=0;
</script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<script type="text/javascript" src="js/updateStyle.js"></script>
<style type="text/css">
body {
	background-color: #FFFFFF;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="mininav" id="topNav">
    <div class="pagetop_notice txt_gray">
            <cite id="login">
                <span class="login">您还未登录！</span>|<a href="javascript:;" onclick="openMen()">登录</a>|<a href="javascript:;" onclick="freeReg()">注册</a>|<a href="javascript:;" onclick="help()">帮助</a>
            </cite>
            <span id="showinfo" style="display:none;">
            	<a href="javascript:;"><em>Java_Swing</em></a>
                <a href="">帮助</a>|
                <a href="">退出</a>
            </span>
    </div>
</div>
<div id="BNreturnTopDiv">
  <div class="fwtop">
    <div class="fwtop_cont">    
      <div class="fwtop_logo">
        <div class="top_logo" id="top_logo"> <img src="images/logo.png"  alt="网站Logo" title="Logo"> </div>
      </div>
     
      <div class="clear"></div>
      <div class="fwtop_mainNav">
        <div class="siteMainNav fwtop_nav fwnavlink" id="siteMainNav" >
          <ul>
            <li class="open"><a href="">网站首页</a></li>
            <li><a href="17">公告通知</a></li>
            <li><a href="118">动态新闻</a></li>
            <li><a href="117">赞扬投诉</a></li>
            <li><a href="119">推荐佳肴</a></li>
            <li><a href="124">餐厅介绍</a></li>
            <li><a href="122">管理平台</a></li>
            <li><a href="125">联系我们</a></li>
          </ul>
          <div class="clear"></div>
        </div>
      </div>
      <div class="clear fwtop_banner">
        <div class="siteBanner" id="siteBanner"> <img src="images/banner1(1).jpg" width="1000" height="250" alt="" title=""> </div>
      </div>
    </div>
  </div>
  <div class="fwmain">
    <div class="fwmain_cont">
      <div class="fwmain_left edit_putHere" id="edit_putHere_area1" saveTitle="area1">
        <div class="label clear" id="429" rel="429" titles="文章列表">
          <div class="label_head">
            <div class="label_title">动态新闻</div>
            <div class="link_more"><a class="more" href="118" title="公司新闻">更多</a></div>
          </div>
          <div class="label_content">
            <div class="item_list id429">
              <ul class="clearfix" id="articlelist429">
                <li><a title="热烈祝贺我司成功举办某活动" href="118/0/53">热烈祝贺我司成功举办某活动</a><span class="datetime">2013-12-19</span></li>
                <li><a title="祝贺本公司成为先进单位" href="118/0/52">祝贺本公司成为先进单位</a><span class="datetime">2013-12-19</span></li>
                <li><a title="祝贺公司成为消费者信得过单位" href="118/0/51">祝贺公司成为消费者信得过单位</a><span class="datetime">2013-12-19</span></li>
                <li><a title="祝贺公司成为消费者信得过单位" href="118/0/44">祝贺公司成为消费者信得过单位</a><span class="datetime">2013-12-19</span></li>
                <li><a title="热烈祝贺某某领导莅临我公司" href="118/0/43">热烈祝贺某某领导莅临我公司</a><span class="datetime">2013-12-19</span></li>
                <li><a title="网站新闻测试网站新闻测试网站新闻测试网站" href="118/0/eeee">网站新闻测试网站新闻测试网站新闻测试网站</a><span class="datetime">2013-10-18</span></li>
                <li><a title="网站新闻测试网站新闻测试网站新闻测试网站" href="118/0/eeee">网站新闻测试网站新闻测试网站新闻测试网站</a><span class="datetime">2013-10-18</span></li>
              </ul>
            </div>
          </div>
          <div class="label_foot"></div>
        </div>
      </div>
      <div class="fwmain_right edit_putHere" id="edit_putHere_area3" saveTitle="area3">
        <div class="label clear" id="444" rel="444" titles="招聘列表">
          <div class="label_head">
            <div class="label_title">系统公告</div>
            <div class="link_more"><a class="more" href="124" title="人才招聘">更多</a></div>
          </div>
          <div class="label_content">
            <div class="item_list id444">
              <ul class="clearfix" id="hrieList444">
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
                <li><a title="xxxxx" href="#">2012年10月食堂评价结果揭晓</a><span class="datetime">2013-12-19</span></li>
              </ul>
        <div class="customerFunction user" onclick="openMen()" sessionMe=""><b>个人中心</b></div>
      </li>
	  <li>
        <div class="customerFunction buy" onclick="openMen()" sessionMe=""><b>赞扬投诉</b></div>
      </li>
      <li>
        <div class="customerFunction home" onclick="SetHome(this,window.location)"><b>设为主页</b></div>
      </li>
      <li>
        <div class="customerFunction collection" onclick="AddFavorite(window.location,document.title)"><b>收藏本站</b></div>
      </li>
    </ul>
  </div>
  
  <!--QQ--> 
</div>
</body>
</html>

CSS样式代码💒



@charset "utf-8";
/* CSS Document */
/*模板页面样式*/
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
}
body {
	font-size: 12px;
}
#BNreturnTopDiv {
	width: 980px;
	margin: 0 auto;
}
ol, ul {
	list-style: none outside none;
	padding: 0;
	margin: 0;
}
i, em, cite {
	font-style: normal;
}
img {
	border: none;
}
/*前台a标签样式*/
a:link, a:visited {
	color: #444444;
	text-decoration: none;
	outline: none;
}
a:hover, a:active {
	color: #9C199B;
	text-decoration: none;
	outline: none;
}
/*后台a标签样式*/
.edit_page a:link, .edit_page a:visited {
	color: #444444;
	text-decoration: none;
	outline: none;
}
.edit_page a:hover, .edit_page a:active {
	color: #9C199B;
	text-decoration: none;
	outline: none;
}
.clear {
	clear: both;
}
.fwtop {
	margin: 0 auto;
}
.fwtop_cont {
	width: 1000px;
	margin: 0 auto;
}
.fwtop_logo {
	float: left;
	height: 140px;
	overflow: hidden;
	background: #fff;
	margin-top: 15px;
}

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

html网页制作

关注

21
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
期末前端web大作业：HTML+CSS+JavaScript简洁的餐饮网站(8个页面) 学生美食网页设计作品静态HTML网页模板源码大学生美食文化网站制作简单餐饮文化网页设计成品

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】🧡 【...
复制链接

扫一扫