整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
?? 作者簡(jiǎn)介: 一個(gè)熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
作者主頁(yè): 【主頁(yè)——獲取更多優(yōu)質(zhì)源碼】
web前端期末大作業(yè)： 【畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】
免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南：
關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長(zhǎng)，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過(guò)去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來(lái)！
文章目錄
一、?網(wǎng)站題目
美食網(wǎng)頁(yè)介紹、甜品蛋糕、地方美食小吃文化、餐飲文化、等網(wǎng)站的設(shè)計(jì)與制作。
二、??網(wǎng)站描述
美食主題網(wǎng)站 主要對(duì)各種美食進(jìn)行展示，讓瀏覽者清晰地了解到各種美食的詳細(xì)信息，便于瀏覽者進(jìn)行選擇。該模塊的左側(cè)有個(gè)美食分類，用戶可以選擇自己喜歡的種類網(wǎng)站制作，當(dāng)點(diǎn)擊種類后，就會(huì)在右側(cè)出現(xiàn)該分類下的各種美食，用戶可以點(diǎn)擊自己感興趣的食品，從而看到它的具體信息。它的具體信息包括配料、產(chǎn)地及它的一些功能，使用戶對(duì)該食品有著全面的認(rèn)識(shí)。
?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來(lái)完成頁(yè)面的排版設(shè)計(jì)?,常用的網(wǎng)頁(yè)設(shè)計(jì)軟件有、、、 、、等等，用的最多的還是DW，當(dāng)然不同軟件寫出的前端Html5代碼都是一致的，本網(wǎng)頁(yè)適合修改成為各種類型的產(chǎn)品展示網(wǎng)頁(yè)，比如美食、旅游、攝影、電影、音樂(lè)等等多種主題，希望對(duì)大家有所幫助。
三、網(wǎng)站介紹
網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁(yè)結(jié)構(gòu)文件、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、網(wǎng)頁(yè)圖片文件；
網(wǎng)頁(yè)編輯方面：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面；
（2） css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等；
（3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。
四、網(wǎng)站效果
五、 代碼實(shí)現(xiàn) HTML結(jié)構(gòu)代碼
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>咖啡文化網(wǎng)title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<audio src="music/love.mp3" autoplay>audio>
<div id="header">
<div class="cont">
<div class="logo">
<a href="#">咖啡文化網(wǎng) a>
div>
<div class="header_right">
<div class="search_box">
<form>
<input type="text" class="text"/>
<input type="button" value="搜索" class="btn" />
form>
div>
<div class="nav">
<ul>
<li><a href="#">首頁(yè)a>li>
<li><a href="#">咖啡發(fā)展a>li>
<li><a href="#">咖啡成分a>li>
<li><a href="#">咖啡飲用a>li>
<li><a href="#">咖啡功效a>li>
<li><a href="#">咖啡利弊a>li>
ul>
div>
div>
div>
div>
<div id="jianjie">
<div class="cont">
<div class="pic">
<span>span><img src="images/jianjie.jpg" />
div>
<div class="text">
<h1>咖啡簡(jiǎn)介h1>
<p>“咖啡”(Coffee)一詞源自埃塞俄比亞的一個(gè)名叫卡法(kaffa)的小鎮(zhèn)，在希臘語(yǔ)中“Kaweh”的意思是“力量與熱情”。茶葉與咖啡、可可并稱為世界三大飲料。 p>
<p>咖啡樹是屬茜草科常綠小喬木，原產(chǎn)于埃塞俄比亞。熱帶、亞熱帶的常綠小喬木或灌木。葉長(zhǎng)卵形，花白色，結(jié)深紅色漿果。有小果、中果、大果咖啡等。種子炒熟碾成粉可制飲料，有興奮作用。p>
div>
div>
div>
<div id="content">
<div class="cont">
<div class="cont_left">
<h2>咖啡起源h2>
<p>世界上第一株咖啡樹是在非洲之角發(fā)現(xiàn)的。當(dāng)?shù)赝林柯浣?jīng)常把咖啡的果實(shí)磨碎，再把它與動(dòng)物脂肪摻在一起揉捏，做成許多球狀的丸子。這些土著部落的人將這些咖啡丸子當(dāng)成珍貴的食物，專供那些即將出征的戰(zhàn)士享用。p>
<p>當(dāng)時(shí)，人們不了解咖啡食用者表現(xiàn)出亢奮是怎么一回事——他們不知道這是由咖啡的刺激性引起的，相反，人們把這當(dāng)成是咖啡食用者所表現(xiàn)出來(lái)的宗教狂熱。覺得這種飲料非常神秘，它成了牧師和醫(yī)生的專用品。對(duì)于咖啡的起源有種種不同的傳說(shuō)故事。 最普遍且為大眾所樂(lè)道的是牧羊人的故事，傳說(shuō)有一位牧羊人，在牧羊的時(shí)候，偶然發(fā)現(xiàn)他的羊蹦蹦跳跳，仔細(xì)一看，原來(lái)羊是吃了一種紅色的果子才導(dǎo)致舉止滑稽怪異。他試著采了一些這種紅果子回去熬煮，沒(méi)想到滿室芳香，熬成的汁液喝下以后更是精神振奮，神清氣爽，從此，這種果實(shí)就被作為一種提神醒腦的飲料，且頗受好評(píng)。p>
<p>古時(shí)候的阿拉伯人最早把咖啡豆曬干熬煮后，把汁液當(dāng)作胃藥來(lái)喝，認(rèn)為有助于消化。后來(lái)發(fā)現(xiàn)咖啡還有提神醒腦的作用，同時(shí)由于伊斯蘭教規(guī)嚴(yán)禁教徒飲酒，于是就用咖啡取代酒精飲料，作為提神的飲料而時(shí)常飲用。十五世紀(jì)以后，到圣地麥加朝圣的穆斯林陸續(xù)將咖啡帶回居住地，使咖啡漸漸流傳到埃及、敘利亞、伊朗和土耳其等國(guó)。咖啡進(jìn)入歐陸當(dāng)歸因于土耳其當(dāng)時(shí)的奧斯曼帝國(guó)，由于嗜飲咖啡的鄂圖曼大軍西征歐陸且在當(dāng)?shù)伛v扎數(shù)年之久，在大軍最后撤離時(shí)，留下了包括咖啡豆在內(nèi)的大批補(bǔ)給品，維也納和巴黎的人們得以憑著這些咖啡豆，和從土耳其人那里得到的烹制經(jīng)驗(yàn)，而發(fā)展出歐洲的咖啡文化。戰(zhàn)爭(zhēng)原是攻占和毀滅，卻意外地帶來(lái)了文化的交和融合，這可是統(tǒng)治者們所始料未及的了p>
<p>西方人都熟知咖啡有三百年的歷史，然而在東方，咖啡在更久遠(yuǎn)前的年代已作為一種飲料在社會(huì)各階層普及。咖啡出現(xiàn)的最早且最確切的時(shí)間是公元前8世紀(jì)，但是早在荷馬的作品（希臘詩(shī)人，生卒年有爭(zhēng)論，一較權(quán)威說(shuō)法是生于公元前744年---譯者注）和許多古老的阿拉伯傳奇里，就已記述了一種神奇的，色黑，味苦澀，且具有強(qiáng)烈刺激力量的飲料。公元10世紀(jì)前后，阿維森納（Avicenna, 980-1037，古代伊斯蘭世界最杰出的集大成者之一，是哲學(xué)家，醫(yī)生，理論家等---譯者注）則用咖啡當(dāng)作藥物治療疾病。還有一個(gè)源自5世紀(jì)的奇特故事，傳說(shuō)一個(gè)也門牧羊人看見一群山羊從一叢灌木上銜落色澤微紅的漿果，很快這些山羊變得焦躁不安，興奮不已，這個(gè)牧羊人把這件事報(bào)告給了一位修道士， 這位修道士將一些漿果煮熟，然后提煉出一種味苦，勁足的，能驅(qū)趕困倦和睡意的飲料p>
div>
<div class="cont_right">
<h2>咖啡展覽h2>
<a href="#"><img src="images/a1.jpg"/>a>
<a href="#"><img src="images/a2.jpg"/>a>
<a href="#"><img src="images/a3.jpg"/>a>
div>
div>
div>
<div id="footer">
<p>Copyright ? 咖啡文化網(wǎng) p>
div>
body>
html>
CSS樣式代碼
*{
margin:0;
padding:0;
}
body {
color: #666;
font-family:arial;
font-size:14px;
line-height:1.5;
}
ul,li{
list-style-type:none;
}
a, a:link, a:visited {
color: #000;
text-decoration:none;
}
a:hover {
color: #CC0000;
}
/* header */
#header{
width: 100%;
height: 108px;
background: url(../images/header.jpg) repeat-x;
}
#header .cont {
width:1000px;
margin: 0 auto;
}
#header .logo {
float: left;
width: 300px;
line-height:108px;
}
#header .logo a {
font-size:26px;
color: #ffffff;
}
#header .header_right {
float: right;
width: 700px;
}
.search_box {
float: right;
margin-top:15px;
}
.search_box .text {
display:block;
height: 20px;
width: 150px;
color: #fff;
font-size: 12px;
border: 1px solid #1b0d03;
background: #261305;
float:left;
outline:none;
}
.search_box .btn {
display:block;
float:left;
height: 22px;
width:50px;
cursor: pointer;
font-size: 12px;
outline: none;
color:#885f40;
border: 1px solid #1b0d03;
background: #261305;
margin-left:5px;
}
#header .nav{
clear: both;
float: right;
height: 53px;
margin-top: 15px;
}
#header .nav li {
float:left;
}
#header .nav li a {
float: left;
display: block;
height: 28px;
margin-left: 10px;
padding:10px;
padding-top:15px;
text-align: center;
font-size: 14px;
color: #cdaf96;
}
#header .nav a:hover{
color: #b78864;
background: url(../images/menu_hover.png) no-repeat;
}
/* 簡(jiǎn)介 */
#jianjie {
clear: both;
width: 100%;
height: 230px;
background: url(../images/jianjie_bg.jpg) repeat-x;
}
#jianjie .cont {
width: 1000px;
height: 200px;
margin: 0 auto;
padding: 15px 0;
}
#jianjie .pic {
float: left;
position: relative;
width: 298px;
height: 147px;
padding: 25px;
}
#jianjie .pic img{
width: 298px;
height: 147px;
}
#jianjie .pic span {
position: absolute;
top: 0;
left: 0;
width: 338px;
height: 197px;
background:url(../images/jianjie_biankuang.png) no-repeat;
}
#jianjie .text {
float: right;
width: 600px;
padding-top: 20px;
}
/* 中間內(nèi)容 */
#content{
width: 100%;
background: #e9dab9;
padding:30px 0;
overflow:hidden;
}
#content .cont{
width: 1000px;
margin: 0 auto;
}
#content .cont_left {
float: left;
width: 600px;
}
#content .cont_left h2 {
line-height:40px;
}
#content .cont_left p {
text-indent:28px;
}
#content .cont_right {
position: relative;
float: right;
width: 240px;
margin: 13px 0;
padding: 10px 20px;
background:#d8c9a3;
}
#content .cont_right img{
width:240px;
display:block;
margin-top:10px;
}
/* footer */
#footer {
width: 100%;
text-align:center;
padding:20px 0;
background:#723e16;
}
#footer p {
line-height:2;
color: #fff;
}
六、 如何讓學(xué)習(xí)不再盲目
很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語(yǔ)法，卻不知道語(yǔ)法的用途，不知道如何加深映像，不知道如何提升自己，這個(gè)時(shí)候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學(xué)者入門訓(xùn)練。該專題為編程入門級(jí)別，適合剛學(xué)完語(yǔ)法的小白練習(xí)，題目涉及編程基礎(chǔ)語(yǔ)法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式網(wǎng)站制作，可還原考試模式進(jìn)行模擬，也可通過(guò)練習(xí)模式進(jìn)行練習(xí)。
七、更多干貨
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “點(diǎn)贊” “??評(píng)論” “收藏” 一鍵三連哦！
2.【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問(wèn)題歡迎一起交流學(xué)習(xí)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
