整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
作者主頁: 【主頁——獲取更多優(yōu)質(zhì)源碼】
web前端期末大作業(yè)： 【畢設(shè)項目精品實戰(zhàn)案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數(shù)據(jù)平臺可視化(150套) 】
免費且實用的WEB前端學(xué)習(xí)指南：
關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
文章目錄
一、?網(wǎng)站題目
美食網(wǎng)頁介紹、甜品蛋糕、地方美食小吃文化、餐飲文化、等網(wǎng)站的設(shè)計與制作。
二、??網(wǎng)站描述
美食主題網(wǎng)站 主要對各種美食進行展示，讓瀏覽者清晰地了解到各種美食的詳細信息，便于瀏覽者進行選擇。該模塊的左側(cè)有個美食分類，用戶可以選擇自己喜歡的種類，當點擊種類后，就會在右側(cè)出現(xiàn)該分類下的各種美食網(wǎng)站制作，用戶可以點擊自己感興趣的食品，從而看到它的具體信息。它的具體信息包括配料、產(chǎn)地及它的一些功能，使用戶對該食品有著全面的認識。
?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計?,常用的網(wǎng)頁設(shè)計軟件有、、、 、、等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的，本網(wǎng)頁適合修改成為各種類型的產(chǎn)品展示網(wǎng)頁，比如美食、旅游、攝影、電影、音樂等等多種主題，希望對大家有所幫助。
三、網(wǎng)站介紹
網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、網(wǎng)頁圖片文件；
網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。
四、網(wǎng)站效果
五、 代碼實現(xiàn) HTML結(jié)構(gòu)代碼
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中華飲食文化title>
<link rel="stylesheet" href="css/style.css" />
head>
<body>
<div class="header">
<div class="top">
<img src="images/logo.png" class="logo">
<div class="link">
<a href="#">設(shè)為首頁a> | <a href="#" class="link2">加入收藏a>
div>
div>
<div class="nav">
<ul>
<li><a href="index.html">網(wǎng)站首頁a>li>
<li><a href="page1.html">美食介紹a>li>
<li><a href="page2.html">中華菜系a>li>
<li><a href="page3.html">美食圖片a>li>
<li><a href="page4.html">在線留言a>li>
ul>
div>
div>
<div class="banner">
<img src="images/banner.jpg">
div>
<div class="content">
<div class="sidebar">
<div class="pro_box">
<img src="images/pro_cp.jpg"/>
<ul>
<li><a href="page1.html">美食介紹a>li>
<li><a href="page2.html">中華菜系a>li>
<li><a href="page3.html">美食圖片a>li>
<li><a href="page4.html">在線留言a>li>
ul>
div>
<div class="contact_box">
<div class="text">
<p>聯(lián)系人：XXXXp>
<p>電話：156-0000-0000p>
div>
div>
div>
<div class="cont_right">
<div class="pic_show">
<div class="title">
<h3>美食展示h3>
<a href="#" class="more"><img src="images/more.jpg"/>a>
div>
<ul>
<li><a href="#"><img src="images/show1.jpg" />美食展示a>li>
<li><a href="#"><img src="images/show2.jpg" />美食展示a>li>
<li><a href="#"><img src="images/show3.jpg" />美食展示a>li>
<li><a href="#"><img src="images/show4.jpg" />美食展示a>li>
ul>
div>
<div class="jianjie">
<div class="title">
<h3>美食文化簡介h3>
<a href="#" class="more"><img src="images/more.jpg"/>a>
div>
<div class="box">
<img src="images/jianjie.jpg">
<p>
民以食為天，世界上任何一個國家都有一個傳統(tǒng)的飲食文明與其它文明共同在歷史中輪回。每個地區(qū)都有與眾不同的飲食習(xí)慣和味覺傾向，而各自將這些精妙的技藝發(fā)展成了一種習(xí)俗，
一種文化，這使得無數(shù)食客流連在世界的每一個角落。
p>
<p>
亞洲的東方有一個擁有悠久文明歷史的國度，那里有令人垂涎的山珍，也有令人回腸的美味。來自五湖四海的食材和調(diào)味品正在無時無刻的觸動著億萬人的神經(jīng)和味蕾。
p>
<p>
中國人的傳統(tǒng)飲食習(xí)俗是以植物性食料為主。主食是五谷，輔食是蔬菜，外加少量肉食。形成這一習(xí)俗的主要原因是中原地區(qū)以農(nóng)業(yè)生產(chǎn)為主要的經(jīng)濟生產(chǎn)方式。但在不同階層中，食物的配置
比例不盡相同。因此古代有稱在位的皇帝為“肉食者”。
p>
div>
div>
div>
div>
<div class="footer">
<div class="copyright">
<p>版權(quán)所有? 中華飲食文化p>
div>
div>
body>
html>
CSS樣式代碼
*{margin:0;padding:0;}
li{list-style:none;}
a{color:#000;text-decoration:none;}
a:hover{text-decoration:none;}
body{font-size:12px;color:#000;font-family:"宋體","Microsoft YaHei";background:url(../images/bg.jpg) center top no-repeat;}
/*頭部*/
.header{width:1000px;overflow:hidden;margin: 0 auto;}
.header .top{height:95px;overflow:hidden;}
.header .top .logo{float:left;}
.header .top .logo img{height:95px;display:block;}
.header .top .link{float:right;line-height:95px;}
.header .top .link a{margin:0 4px;}
.header .top .link a:hover{text-decoration:underline;}
.header .nav{ width:1000px; height:37px; margin-bottom:6px; background:url(../images/nav_bg.jpg) 0 0 repeat-x;}
.header .nav ul{ width:990px; overflow:hidden; padding-left:20px;}
.header .nav ul li{ text-align:center;float:left;height:37px; line-height:37px; }
.header .nav ul li a{font-size:16px; color:#fff;letter-spacing:1px;width:110px;display:block;font-weight:bold; }
.header .nav ul li a:hover{ color:#fff000;}
.banner{ width:1000px;overflow:hidden;margin:auto;margin-bottom:10px;}
/*中間內(nèi)容*/
.content{width:1000px;overflow:hidden;margin:auto;margin-bottom:10px;}
.sidebar{width:220px;float:left;overflow:hidden;}
.sidebar .pro_box{ width:218px; border:1px solid #b4b4b4; margin-bottom:10px;}
.sidebar .pro_box img{ margin-bottom:12px;}
.sidebar .pro_box ul{width:206px; margin-left:7px; overflow:hidden;}
.sidebar .pro_box li{ margin-bottom:5px;}
.sidebar .pro_box li a{ display:block; width:190px; height:35px; line-height:35px; background:url(../images/pro_li_bg.jpg) 0 0 no-repeat; padding-left:43px;}
.sidebar .pro_box li a:hover{ color:#ff0000; text-decoration:underline;}
.sidebar .contact_box{ width:220px; height:231px; background:url(../images/contact_bg.jpg) 0 0 no-repeat; overflow:hidden; }
.sidebar .contact_box .text{ width:200px; margin:40px 0 0 15px; height:170px; overflow:hidden;}
.sidebar .contact_box .text p{ line-height:200%;}
.cont_right{width:760px;float:right; overflow:hidden;}
.cont_right .title{width:758px;height:25px;line-height:25px;background:url(../images/main_cp.jpg);overflow:hidden;border:1px solid #b4b4b4;}
.cont_right .title h3{float:left;color:#fff;margin-left:20px;}
.cont_right .title .more{float:right;}
.cont_right .title p{float:right;color:#fff;margin-right:20px;}
.cont_right .title p a{color:#fff;padding:0 5px;}
.cont_right .title p a:hover{text-decoration:underline;}
.cont_right .pic_show{ width:760px; overflow:hidden;}
.cont_right .pic_show ul{padding-top:10px;padding-bottom:10px;overflow:hidden;}
.cont_right .pic_show li{width:180px;float:left;margin:5px;text-align:center;}
.cont_right .pic_show li img{width:180px;height:180px;display:block;margin-bottom:10px;}
.cont_right .pic_show li a:hover{text-decoration:underline;}
.cont_right .jianjie{border:1px solid #ccc;overflow:hidden;}
.cont_right .jianjie .box{padding:10px;overflow:hidden;}
.cont_right .jianjie .box img{width:200px;height:200px;float:left;margin-right:20px;}
.cont_right .jianjie .box p{line-height:2;text-indent:24px;}
/*底部*/
.footer{width:100%;overflow:hidden;color:#fff;background:url(../images/foot.jpg);padding:20px 0; text-align:center;}
.footer .copyright p{line-height:2;}
/*美食介紹*/
.jieshao .tuwen{padding:10px;border:1px solid #ccc;}
.jieshao .tuwen p{line-height:2;text-indent:24px;}
.jieshao .tuwen img{width:100%;}
/*菜系介紹*/
.caixi .list{padding:10px;border:1px solid #ccc;overflow:hidden;}
.caixi .list li{overflow:hidden;margin-bottom:10px;}
.caixi .list .pic{float:left;width:240px;margin-right:20px;}
.caixi .list .pic img{width:240px;height:180px;}
.caixi .list .pic h3{text-align:center;}
.caixi .list p{line-height:2;text-indent:24px;}
/*美食圖片*/
.tupian .list{border:1px solid #ccc;overflow:hidden;}
.tupian .list img{display:block;width:358px;height:258px;float:left;margin:10px;}
/*在線留言*/
.liuyan{padding:20px;border:1px solid #ccc;overflow:hidden;}
.liuyan p{line-height:30px;margin-bottom:30px; vertical-align:top;}
.liuyan p label{display:inline-block;width:60px;height:30px;text-align:right;float:left;}
.liuyan .text{width:200px;height:30px;}
.liuyan textarea{width:200px;height:100px;}
.liuyan .btn{display:block;width:100px;height:30px;margin-left:60px;}
六、 如何讓學(xué)習(xí)不再盲目
很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學(xué)者入門訓(xùn)練。該專題為編程入門級別，適合剛學(xué)完語法的小白練習(xí)，題目涉及編程基礎(chǔ)語法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式，可還原考試模式進行模擬，也可通過練習(xí)模式進行練習(xí)。
七、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識網(wǎng)站制作，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學(xué)習(xí)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
