网页设计咖啡(web前端网页制作设计作业)

Web前端期末作业：网站设计与实现——咖啡网站HTML+CSS+JavaScript精彩专栏推荐

关于作者：一位热爱将逻辑思维转化为代码的技术博主

作者主页：【更多优质源码主页——】

Web前端期末作业：【毕业设计精品实战案例】

程序员有趣的告白方式：【HTML七夕告白网页制作】

超酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化】

免费实用的WEB前端学习指南：【Web前端零基础到进阶学习视频教程120G有用资料分享】

关于作者：曾担任研发工程师、技术组长、教学总监；2016年、2020年两次荣获CSDN年度十大博客之星。十年坚冰，难冷却热血；很多年过去了，事变了，人也变了。然而，对技术的探索和追求从未停止。坚持原创，热衷分享，不忘初心，继往开来！

文章目录

1.网站标题2.网站描述3.网站介绍4.网站效果5.代码实现HTML结构代码CSS样式代码6.如何让学习不再盲目7.更多有用信息一、网站题目

美食网页介绍、甜品蛋糕、当地美食小吃文化、餐饮文化等设计制作。

二、网站描述

美食主题网站主要展示各种食物，让浏览者可以清楚地了解各种食物的详细信息，方便浏览者做出选择。该模块左侧有一个食品类别。用户可以选择自己喜欢的类别。点击类别后，右侧会出现该类别下的各种美食。用户可以点击自己感兴趣的食物进行查看。具体信息。其具体信息包括成分、产地以及部分功能，让用户对食品有一个全面的了解。

静态网站写作主要使用HTMLDIV+CSSJS等来完成页面布局设计。常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等，最常用的当然是DW了。不同软件编写的前端Html5代码是一致的。本网页适合修改为各类产品展示网页，如美食、旅游、摄影、电影、音乐等主题。希望对大家有所帮助。

三、网站介绍

网站布局：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。

网站编程：拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。并保证网站代码兼容目前市面上所有主流浏览器，这样打开后就能立即看到网站。

网站素材方面：计划是从各大平台收集好看的素材，精心挑选适合网页风格的，然后用PS制作出适合网页尺寸的。

网站文件：网站系统文件类型包括：html网页结构文件、css网页样式文件、js网页特效文件、images网页文件；

网页编辑：网页工作的代码简单，可以使用任何HTML编辑软件运行、修改和编辑。

在：

html文件包含：index.html为首页，其他html为副页；

css文件包含：css所有页面样式、文字滚动、放大等；

js文件包括：实现动态轮播效果、表单提交、点击事件等的js。

四、网站效果

五、代码实现

HTML结构代码

!DOCTYPEhtmlhtmllang='en'headmetacharset='utf-8'标题咖啡/标题链接href='css/style.css'type='text/css'rel='stylesheet'media='all'/headbodydivclass='headclearfix'bclass='fl'imgsrc='images/logo.jpg'/bnavclass='fr'ahref='index.html'Homepage/aahref='about.html'咖啡机/aahref='pic.html'咖啡机推荐/aahref='news.html'咖啡文化/aahref='sp.html'视频介绍/a/nav/divdivclass='主clearfix'divclass='横幅'imgsrc='images/timg.jpg'width='100%'/divdivclass='div7bg000clearfix'divclass=''ulid='jSearchHeroDiv'class='imgtextlist'liimgsrc='images/a1.jpg'/liliimgsrc='images/a2.jpg'/liliimgsrc='images/a3.jpg'/liliimgsrc='images/a4.jpg'/li/ul/div/divdivclass='div4bg000'divclass='bar'h3咖啡分类/h3/divdivclass='fr'divlabel-module='para'style='padding:10px;box-sizing:border-盒子；'divlabel-module='para'style='font-size:14px'常见的咖啡树种有阿拉比卡(Arabica)、罗布斯塔(Robusta)和利比里卡(Liberica)三种。brbr阿拉比卡咖啡在高海拔地区生长最好。这种咖啡的味道比其他咖啡要细腻得多。这种咖啡中的咖啡因含量仅占咖啡总重量的1%。其产量约占全球的80-85%。brbr罗布斯塔咖啡口感醇厚，抗病虫害能力强，单株产量高。这种咖啡生长在低海拔地区。由于它可以提取丰富且稳定的油脂，因此多用于意大利混合咖啡中制作浓缩咖啡。其全球产量约为15-20%。brbr利比里亚物种在中国极为稀有。仅海南省文昌市麦浩镇有少量种植。该地区于1898年首次从国外引进种植，至今仍保留着纯正的Liberica品种。该品种焦糖味浓，甜味强，干菠萝蜜风味更明显。由于产量低、浓度高，商业化困难，其产品在市场上几乎看不到。其产量约占全球的1~2%。br/div/div/div/divdivclass='div2bg000'divclass='bar'h3coffee/h3/divdivstyle='padding:5px;height:460px;'p咖啡是由烘焙并研磨的咖啡制成的一种由研磨咖啡豆制成的饮料。作为世界三大饮料之一，它与可可、茶并称为世界上流行的主要饮料。咖啡树是茜草科多年生常绿灌木或小乔木。日常饮用的咖啡是用咖啡豆和各种炊具制成的。咖啡豆是指咖啡树果实中的果仁。按照一定的方法烘焙，一杯标准的咖啡应该不会有苦味。一名合格的咖啡师在制作咖啡时会严格执行每一步操作，最终端给客人的咖啡味道会很好。产生不同程度的甜度、酸度、醇厚度或洁净度。公元15世纪之前，咖啡种植和生产一直被阿拉伯人垄断。当时，它主要用于医学和宗教。医生和僧人认识到咖啡具有提神醒脑、健胃强身、止血等功效。由于伊斯兰教严禁饮酒，咖啡成为当时非常重要的社交饮品。

据说，1600年，一些天主教徒认为咖啡是一种“魔鬼饮料”，并鼓励教皇克莱门特八世禁止这种饮料。然而教皇品尝后认为可以饮用，并祝福了咖啡，于是咖啡逐渐在欧洲流行起来。/p/div/divdivclass='clearfix'/div/divdivclass='footer'香草咖啡/div/body/html

CSS样式代码

/*CSS文档*/a{font-size:14px;color:#684D39;text-decoration:none}a:hover{color:#33CCFF}ul,li{list-style:none;保证金：0；padding:0}正文{margin333600自动；padding:0;Background:URL(./Images/Bg.jpg)无重复100%居中；宽度：1000px；背景-size:封面；颜色：#fff；Line-Height3336030px}.Clearfix:after{Clear:两者；内容：'';}.head{background:#684D39;height:104px;overflow:隐藏}h1,h2,h3{margin:0;padding:0}.head{font-size:18px;color:#fff;margin:35px20px;display33360内联-块}。heada:hover{color:#FFFF00}.fl{float:left}.fr{float:right}.head.fl{/*background:#fff;*/}.head.flimg{width:200px;}.bg000{background:#684D39;}。栏{background:#333;color:#fff;padding:20px}.w40{width:40%;}.w60{width:60%}#jSearchHeroDivli{margin:0;padding:0;list-style:none;display:内联-block;text-align:center;width:236px;margin:5px;}#jSearchHeroDivimg{width:100%;height:140px}.div2.frdiv{margin:5px5px;height:332px}.div2li{margin-left3336020px}.div2李阿{color:#FFFFFF}.div2{float:left;margin-top:20px;width:480px;}#latest_guide_listli{border-bottom:#fffsolid1px;padding:10px}#latest_guide_listlia{color:#fff;}.div4{float:right;margin-top:20px;width:500px}.footer{text-align:center;padding:30px0;color:#fff}.con{padding:20px}.标题{color:#fff;text-align:center;font-size:24px;padding:20px0;}。div1img{float:left}.div7{margin-top:20px}表单{margin:0;padding:35px0050px;width:488px;}表单标签{display:块；margin:0020px;overflow:隐藏；padding:0;}表单标签跨度{color:#7d7c7c;display:block;font-size:13px;float:left;height:31px;margin:0;padding:5px14px00;text-align:right;text-transform:uppercase;width:74px;}表单标签输入{border:1px实体#d6d6d6;背景：#fff;颜色：#7d7c7c;显示：块；浮动：左；字体系列：Arial，Helvetica，无衬线；字体大小：13px;高度：34px;行高：34px;margin:0;padding:05px;width:388px;}表格标签文本区域{border:1px实体#d6d6d6;background:#fff;color:#7d7c7c;display:块；float:left;font-family:Arial，Helvetica，sans-serif;font-size:13px;height:205px;margin333600;溢出：自动；填充：5px;width:388px;}form#submit2{border:0;background:url(./images/button-submit.png)无重复左上角；display:块；height:37px;margin:00088px;padding:0;width33360101像素；}.conimg{width:300px;height:auto;}.renwu{font-weight:粗体；}

六、如何让学习不再盲目

很多刚开始编程的新手学了基础语法，但是不知道语法的目的，不知道如何加深形象，不知道如何提升自己。这个时候每天自己回答一些问题就很重要了，可以去牛客网针对编程初学者的入门培训。本主题是编程入门级别，适合刚刚学完语法的初学者。题目涉及基础编程语法、基本结构等，每题都有练习模式和考试模式。您可以恢复考试模式进行模拟，也可以通过练习模式练习。

七、更多干货

1、如果我的博客对您有帮助，如果您喜欢我博客的内容，请一键“点赞”“评论”“收藏”！

2.【跟我来|获取更多源代码|优质文章】让你学习各种前端插件，3D炫酷效果，显示，文字效果，以及整站模板，大学毕业HTML模板，期末作业模板等！“这里有很多前端开发人员，我们一起讨论前端Node知识，互相学习”！

3.

欢迎大家就以上内容相关的技术问题共同交流学习。