【作者主頁——獲取更多優質源碼】
【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;
}
八、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識美食杰網站的系統設計文檔是什么，互相學習」！
3.以上內容技術相關問題歡迎一起交流學習