1000字范文 > HTML5期末大作业：美食网站设计——餐饮美食-咖啡(5页) HTML5网页设计成品_学生DW静

HTML5期末大作业：美食网站设计——餐饮美食-咖啡(5页) HTML5网页设计成品_学生DW静

时间：2022-05-17 17:31:40

HTML5期末大作业：美食网站设计——餐饮美食-咖啡(5页) HTML5网页设计成品_学生DW静态食品网页设计_web课程设计网页制作

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

获取更多源码

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

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

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

文章目录

HTML5期末大作业：美食网站设计——餐饮美食-咖啡(5页) HTML5网页设计成品_学生DW静态食品网页设计_web课程设计网页制作获取更多源码作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>咖啡</title><link rel="stylesheet" href="css/style.css"></head><body><div class="content"><div class="header"><div class="logo"><a href="#"><img class=pic src="images/logo.png"></a></div><div class="nav"><ul><li><a href="index.html">首页</a></li><li><a href="kafei.html">咖啡及文化</a></li><li><a href="meishi.html">美食与饮品</a></li><li><a href="xinwen.html">美食新闻</a></li><li><a href="liuyan.html">留言板</a></li></ul></div></div><div class="lunbo"> <div class="flashbox"><div id=SwitchBigPic><div><a href="#"><img class="pic" src="images/01.jpg"></a></div><div><a href="#"><img class="pic" src="images/02.jpg"></a></div><div><a href="#"><img class="pic" src="images/03.jpg"></a></div><div><a href="#"><img class="pic" src="images/04.jpg"></a></div><div><a href="#"><img class="pic" src="images/05.jpg"></a></div> </div><ul id=SwitchNav><li><a href="#"><img src="images/01.jpg"><b>夏天是什么味道？</b></a> </li><li><a href="#"><img src="images/02.jpg"><b>夏季甜点</b></a> </li><li><a href="#"><img src="images/03.jpg"><b>美味香槟</b></a> </li><li><a href="#"><img src="images/04.jpg"><b>各式点心</b></a> </li><li><a href="#"><img src="images/05.jpg"><b>店长推荐</b></a> </li></ul></div></div><div class="main"><div class="tuijian"><div class="title">原色咖啡新品推荐 </div><ul><li><a href="#"><img src="images/tuijian1.jpg"><p>夏季饮品</p></a></li><li><a href="#"><img src="images/tuijian2.jpg"><p>夏季饮品</p></a></li><li><a href="#"><img src="images/tuijian3.jpg"><p>夏季饮品</p></a></li></ul></div><div class="share"><div class="title">分享到 <a href="#"><img class=pic src="images/shrae.png" ></a></div><p>QQ：12345678</p><p>E-mail：<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="05343736313033323d4574742b6666">[email protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></p></div></div><div class="footer"><p> <a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="d83f51503e455b3e51583e4451983d7c573d757b3f4c443f5a61f53d564730516a3d4a4e3d4d79">[email protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> </p><p> 京ICP备12345678号</p></div><script src="js/changimages.js" type=text/javascript></script><script src="js/prototype.js" type=text/javascript></script><script>var bigswitch = new SwitchPic({bigpic:"SwitchBigPic",switchnav:"SwitchNav",selectstyle:"selected",objname:"bigswitch"}) ;bigswitch.goSwitch(bigswitch,0);bigswitch.autoSwitchTimer = setTimeout("bigswitch.autoSwitch(bigswitch) ;", 3000);</script></body></html>