web前端期末大作业：美食文化网页设计与实现——美食餐厅三级(HTML+CSS+
发布时间：2024-02-21 13:19:02 点击量：
【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】
文章目录
一、网站题目
美食网页介绍、甜品蛋糕、地方美食小吃文化、餐饮文化、等网站的设计与制作。
二、网站描述✍️
美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：、、 、 、、Text 、++ 等任意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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>食尚美食title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
head>
<body>
<div class="top">
<div class="topcontent">
<div class="logo">
<img src="images/logo.png" />
div>
<div class="tel">
<img src="images/tel.png" />
<span>400-888-888span>
div>
div>
div>
<div id="nav">
<ul>
<li><a href="index.html">网站首页a>li>
<li><a href="guanyu.html">关于品牌a>li>
<li><a href="tuijian.html">美食推荐a>li>
<li><a href="dongtai.html">最新动态a>li>
<li><a href="lianxi.html">联系我们a>li>
<li><a href="denglu.html">会员登录a>li>
<li><a href="zhuce.html">会员注册a>li>
<li><a href="liuyan.html">在线留言a>li>
ul>
div>
<div class="banner">
<div class="box" id="box">
<div class="inner">
<ul>
<li><a href="#"><img src="images/banner1.jpg" alt="">a>li>
<li><a href="#"><img src="images/banner2.jpg" alt="">a>li>
<li><a href="#"><img src="images/banner3.jpg" alt="">a>li>
ul>
<ol class="bar">
ol>
<div id="arr">
<span id="left">
<
span>
<span id="right">
>
span>
div>
div>
div>
div>
<script type="text/javascript" src="js/banner.js">script>
<div class="ibox1">
<div class="ibox1-left">
<a href="guanyu.html"><img src="images/img1.jpg" style="height:150px; width: 420px;"/>a>
<video src="./images/ed2710af68fe2b6c09a75b155a89cb75.mp4" controls width="420px" height="150px">audio>
div>
<div class="ibox1-right">
<h1>关于品牌h1>
<p>食尚美食餐饮管理有限公司的创始人从2004年起航第一家店，2007年以"鸭血粉丝、锅贴等"为特色经营的连锁品牌，2010年拥有8家直营店，2013年进行品牌升级，2015年第一家升级店开业；现总部位...p>
<div class="more"><a href="guanyu.html">了解更多a>div>
div>
div>
<div class="ibox2">
<div class="ibox2content">
<div class="title">
<h1>品牌优势h1>
<p>BRAND ADVANTAGEp>
div>
<div class="ibox2-ner">
<div class="bx">
<div class="xuh"><img src="images/1.png" />div>
<p>独特而神秘的资源独享p>
<p>专业团队精心历练之p>
<p>全新经营理念p>
<div class="ysimg">
<img src="images/img2.jpg" />
div>
div>
<div class="bx">
<div class="xuh"><img src="images/2.png" />div>
<p>实行区域保护政策p>
<p>以保障合作伙伴的p>
<p>业务发展空间p>
<div class="ysimg">
<img src="images/img3.jpg" />
div>
div>
<div class="bx">
<div class="xuh"><img src="images/3.png" />div>
<p>不定期推出新的产品p>
<p>和营销策划方案p>
<p>以供使用p>
<div class="ysimg">
<img src="images/img4.jpg" />
div>
div>
<div class="bx">
<div class="xuh"><img src="images/4.png" />div>
<p>完善的售后服务，p>
<p>不定期门店质检，p>
<p>规范经营管理p>
<div class="ysimg">
<img src="images/img5.jpg" />
div>
div>
div>
div>
div>
<div class="ibox3">
<div class="ibox3-left">
<div class="title2">
<h1>品牌简介h1>
<p>BRAND PROFILEp>
div>
<p>食尚美食餐饮连锁机构致力于湘菜系的研发整合与特色项目的经营推广。立足于自主品牌，公司采用连锁化经营，科学化管理，标准化生产，凭借独特的产品优势，优质规范的服务为消费者提供了更具传统民俗的特色美食。p>
<p>只要尝过的人，都是赞不绝口；这是我们的生活，更是南京人的生活；600多年来，我们传承这正宗的南京味道，坚持这一份匠心。p>
div>
<div class="ibox3-right">
<img src="images/img6.jpg" />
div>
div>
<div class="ibox2">
<div class="ibox2content">
<div class="title">
<h1>最新动态h1>
<p>NEWS INFORMATIONp>
div>
<div class="ibox4">
<div class="newbx">
<a href="dongtai01.html"><img src="images/img7.jpg" />a>
<div class="wenz">
<h1><a href="dongtai01.html">选择餐饮创业的四大理由a>h1>
<p>在就业形势越来越严峻的今天，创业成为了越来越多人的选择。这不，毕业季已经过去几个月了，想必很多刚踏入社会的大学生也会选择踏上创业的道路。不过，现在的创业模式多种多样，到底哪一个比较好呢?p>
div>
div>
<div class="newbx">
<a href="dongtai02.html"><img src="images/img8.jpg" />a>
<div class="wenz">
<h1><a href="dongtai02.html">新店长餐饮管理工作a>h1>
<p>店长、店经理是一家餐厅最综合的管理者，也是对本餐厅负责的最高指挥官。作为一名全面管理者来说，必须做好对餐厅各方面的严格控制。新上任或者新提任的您，在管理上是不是常常会有力从不心的感觉，想样样都抓好......p>
div>
div>
<div class="newbx">
<a href="dongtai03.html"><img src="images/img9.jpg" />a>
<div class="wenz">
<h1><a href="dongtai03.html">餐饮服务说话手册a>h1>
<p>在餐饮来讲，服务品质是大多数消费者很看重的一点。而服务员的服务舒适程度，很大一部分体现在说话的技巧上面。而说话的技巧应该怎么炼成呢?餐饮店的类型虽然有很多种，但是多对客人"甜言蜜语"却是在哪一种餐饮店都适用。p>
div>
div>
<div class="newbx">
<a href="dongtai04.html"><img src="images/img10.jpg" />a>
<div class="wenz">
<h1><a href="dongtai04.html">餐饮越来越不好？a>h1>
<p>很多创业者和餐饮老板都在诉苦：餐厅越来越难做了。如今的餐饮市场前景一片大好，不少品牌发展如火如荼，餐饮行业自身门槛就低，例如麻辣烫，加盟费趋于廉价，不需要有大厨的技艺，更不需要有丰富的管理经验......p>
div>
div>
div>
div>
div>
<div class="foot">
<p>Copyright©食尚美食网.ALL rights reservedp>
<p>地址：中国美食杰食尚美食店 邮箱地址：8888@qq.comp>
div>
body>
html>
CSS样式代码
body {
margin: 0 auto;
font-size: 14px;
font-family: "微软雅黑",arial;
line-height: 22px;
}
div,p,input,ul,li,h1,h2,h3 {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #c60707;
text-decoration: none;
overflow: hidden;
}
.top{
height:110px;
}
.topcontent{
width:1200px;
margin:0 auto;
padding-top:25px;
}
.logo{
width:309px;
height:74px;
float:left;
}
.tel{
width:300px;
height:74px;
float:right;
line-height:74px;
color:#c71b1b;
font-size:28px;
}
.tel span{
float:left;
}
.tel img{
float:left;
margin-right:10px;
margin-top:20px;
}
#nav{
height:50px;
line-height:50px;
background:#111111;
}