HTML5期末大作业：静态美食网站设计——咖啡 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

  • HTML5期末大作业：静态美食网站设计——咖啡 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
  • 作品介绍
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、学习资料
  • 五、👇🏻👇🏻👇🏻更多源码👇🏻👇🏻👇🏻

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"> 
	<title>咖啡文化网</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="#">咖啡文化网 </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="#">首页</a></li>
                    <li><a href="#">咖啡发展</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>咖啡简介</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>

四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、👇🏻👇🏻👇🏻更多源码👇🏻👇🏻👇🏻

更多推荐

大学生咖啡网页制作教程 表格布局网页模板 学生HTML静态美食网页设计作业成品 简单网页制作代码 学生美食网页作品免费设计