我的期末網頁設計HTML作品——咖啡文化網頁制作

?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主

作者主頁: 【主頁——獲取更多優質源碼】

web前端期末大作業：【畢設項目精品實戰案例 (1000套) 】

程序員有趣的告白方式：【HTML七夕情人節表白網頁制作 (110套) 】

超炫酷的大屏可視化源碼：【大屏展示大數據平臺可視化(150套) 】

免費且實用的WEB前端學習指南：

關于作者: 歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。然而，對于技術的探索和追求從未停歇。堅持原創，熱衷分享，初心未改，繼往開來！

文章目錄

一、?網站題目

美食網頁介紹、甜品蛋糕、地方美食小吃文化、餐飲文化、等網站的設計與制作。

二、??網站描述

美食主題網站主要對各種美食進行展示，讓瀏覽者清晰地了解到各種美食的詳細信息，便于瀏覽者進行選擇。該模塊的左側有個美食分類，用戶可以選擇自己喜歡的種類網站制作，當點擊種類后，就會在右側出現該分類下的各種美食，用戶可以點擊自己感興趣的食品，從而看到它的具體信息。它的具體信息包括配料、產地及它的一些功能，使用戶對該食品有著全面的認識。

?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計?,常用的網頁設計軟件有、、、、、等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的，本網頁適合修改成為各種類型的產品展示網頁，比如美食、旅游、攝影、電影、音樂等等多種主題，希望對大家有所幫助。

三、網站介紹

網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。

網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。

網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、網頁圖片文件；

網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、、、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。

其中：

（1）html文件包含：其中index.html是首頁、其他html為二級頁面；

（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；

（3） js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。

四、網站效果

五、代碼實現 HTML結構代碼

 
                    <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>咖啡簡介h1>
            <p>“咖啡”(Coffee)一詞源自埃塞俄比亞的一個名叫卡法(kaffa)的小鎮，在希臘語中“Kaweh”的意思是“力量與熱情”。茶葉與咖啡、可可并稱為世界三大飲料。 p>
            <p>咖啡樹是屬茜草科常綠小喬木，原產于埃塞俄比亞。熱帶、亞熱帶的常綠小喬木或灌木。葉長卵形，花白色，結深紅色漿果。有小果、中果、大果咖啡等。種子炒熟碾成粉可制飲料，有興奮作用。p>
        div>
    div>
div>

<div id="content">
    <div class="cont">
        <div class="cont_left">
            <h2>咖啡起源h2>
            <p>世界上第一株咖啡樹是在非洲之角發現的。當地土著部落經常把咖啡的果實磨碎，再把它與動物脂肪摻在一起揉捏，做成許多球狀的丸子。這些土著部落的人將這些咖啡丸子當成珍貴的食物，專供那些即將出征的戰士享用。p>
            <p>當時，人們不了解咖啡食用者表現出亢奮是怎么一回事——他們不知道這是由咖啡的刺激性引起的，相反，人們把這當成是咖啡食用者所表現出來的宗教狂熱。覺得這種飲料非常神秘，它成了牧師和醫生的專用品。對于咖啡的起源有種種不同的傳說故事。 最普遍且為大眾所樂道的是牧羊人的故事，傳說有一位牧羊人，在牧羊的時候，偶然發現他的羊蹦蹦跳跳，仔細一看，原來羊是吃了一種紅色的果子才導致舉止滑稽怪異。他試著采了一些這種紅果子回去熬煮，沒想到滿室芳香，熬成的汁液喝下以后更是精神振奮，神清氣爽，從此，這種果實就被作為一種提神醒腦的飲料，且頗受好評。p>
            <p>古時候的阿拉伯人最早把咖啡豆曬干熬煮后，把汁液當作胃藥來喝，認為有助于消化。后來發現咖啡還有提神醒腦的作用，同時由于伊斯蘭教規嚴禁教徒飲酒，于是就用咖啡取代酒精飲料，作為提神的飲料而時常飲用。十五世紀以后，到圣地麥加朝圣的穆斯林陸續將咖啡帶回居住地，使咖啡漸漸流傳到埃及、敘利亞、伊朗和土耳其等國。咖啡進入歐陸當歸因于土耳其當時的奧斯曼帝國，由于嗜飲咖啡的鄂圖曼大軍西征歐陸且在當地駐扎數年之久，在大軍最后撤離時，留下了包括咖啡豆在內的大批補給品，維也納和巴黎的人們得以憑著這些咖啡豆，和從土耳其人那里得到的烹制經驗，而發展出歐洲的咖啡文化。戰爭原是攻占和毀滅，卻意外地帶來了文化的交和融合，這可是統治者們所始料未及的了p>
            <p>西方人都熟知咖啡有三百年的歷史，然而在東方，咖啡在更久遠前的年代已作為一種飲料在社會各階層普及。咖啡出現的最早且最確切的時間是公元前8世紀，但是早在荷馬的作品（希臘詩人，生卒年有爭論，一較權威說法是生于公元前744年---譯者注）和許多古老的阿拉伯傳奇里，就已記述了一種神奇的，色黑，味苦澀，且具有強烈刺激力量的飲料。公元10世紀前后，阿維森納（Avicenna, 980-1037，古代伊斯蘭世界最杰出的集大成者之一，是哲學家，醫生，理論家等---譯者注）則用咖啡當作藥物治療疾病。還有一個源自5世紀的奇特故事，傳說一個也門牧羊人看見一群山羊從一叢灌木上銜落色澤微紅的漿果，很快這些山羊變得焦躁不安，興奮不已，這個牧羊人把這件事報告給了一位修道士， 這位修道士將一些漿果煮熟，然后提煉出一種味苦，勁足的，能驅趕困倦和睡意的飲料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 ? 咖啡文化網 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;
}
/* 簡介 */

#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;
}
/* 中間內容 */
#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;
}

六、如何讓學習不再盲目

很多剛入門編程的小白學習了基礎語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網上的編程初學者入門訓練。該專題為編程入門級別，適合剛學完語法的小白練習，題目涉及編程基礎語法，基本結構等，每道題帶有練習模式和考試模式網站制作，可還原考試模式進行模擬，也可通過練習模式進行練習。

七、更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “??評論” “收藏” 一鍵三連哦！

2.【關注我| 獲取更多源碼 | 優質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

以上內容技術相關問題歡迎一起交流學習

在線咨詢

上一篇：網站性能優化的關鍵是哪五個方面？
下一篇：網站優化推廣：有了這些軟件不怕你的網站沒有流量

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

我的期末網頁設計HTML作品——咖啡文化網頁制作

您的項目需求