300字范文 > HTML5期末大作业：蛋糕网页设计——蛋糕甜品6页(代码质量好) 学生DW网页设计作业源码

HTML5期末大作业：蛋糕网页设计——蛋糕甜品6页(代码质量好) 学生DW网页设计作业源码

时间：2022-07-17 05:26:23

HTML5期末大作业：蛋糕网页设计——蛋糕甜品6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计

HTML+CSS+JavaScript（毕业设计）

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

临近期末, 很多同学苦于没有参考的资料，或者下载的资料不全、代码有问题、数据有问题等等,造成一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

作品介绍

1.用 HTML 结构标记（或 div 标记）+CSS 进行布局定位（如在 1024×768下全屏显示无横向滚动条）。

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

3.网站页面标题、创意设计制作的 Logo 图标和 Banner 广告符合网站主题。

4.首页栏目数量不少于 3 个，各栏目能正确链接到相应栏目页面，同时各栏目页面能正确返回网站首页。

5.网站内容具有原创性，内容充实，特效且运用合理。

6.网站整体色系符合视觉习惯，布局合理美观，结构层次清楚，目录结构清晰，文件及文件夹命名规范。

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE HTML><html><head><title>Home</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link href='http///css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><script type="text/javascript" src="js/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="css/slider.css" /><script type="text/javascript" src="js/modernizr.custom.28468.js"></script><script type="text/javascript" src="js/jquery.cslider.js"></script><script type="text/javascript">$(function() {$('#da-slider').cslider({autoplay: true,bgincrement: 450});});</script><script type="text/javascript" src="js/move-top.js"></script><script type="text/javascript" src="js/easing.js"></script><script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);});});</script></head><body><div class="header_bg"><div class="wrap"><div class="header"><div class="logo"><a href="index.html"><img src="images/logo.png" alt=""/> </a></div><div class="social-icons"><ul><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li></ul></div><div class="clear"></div></div></div></div><div class="header_btm"><div class="wrap"><div class="header_sub"><div class="h_menu"><ul><li class="active"><a href="index.html">首页</a></li><li><a href="about.html">介绍</a></li><li><a href="service.html">热销</a></li><li><a href="blog.html">分类</a></li><li><a href="contact.html">留言</a></li></ul></div><div class="h_search"><form><input type="text" value="" placeholder="搜索"><input type="submit" value=""></form></div><div class="menu"><ul><li class="active"><a href="index.html">首页</a></li><li><a href="about.html">店铺</a></li><li><a href="service.html">热销</a></li><li><a href="blog.html">分类</a></li><li><a href="contact.html">留言</a></li></ul></div><div class="search"><form action="/iphone/search.html"><input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}" class="text"></form></div><div class="sub-head"><ul><li><a href="#" id="menu">Menu <span></span></a></li><li><a href="#" id="search">Search <span></span></a></li></ul><div class="clear"></div></div><script type="text/javascript">$(".menu,.search").hide();$("#menu").click(function(){$(".menu").toggle();$(".search").hide();$("#search").removeClass("active");$("#menu").toggleClass("active");});$("#search").click(function(){$(".search").toggle();$(".menu").hide();$("#menu").removeClass("active");$("#search").toggleClass("active");$(".text").focus();});</script><script type="text/javascript" src="js/script.js"></script><div class="clear"></div><div class="clear"></div></div></div></div><div class="slider_bg"><div class="wrap"><div class="slider"><div id="da-slider" class="da-slider"><div class="da-slide"><h2>心情不好的时候，吃甜品心情就会好起来。</h2><p>玫瑰是我的热情，糖果是我的味道，星星是我的眼睛，月光是我的灵魂，一并送给你，恰恰就在我们得到甜食的瞬间，我们盼望的甜食，变成了又苦又酸。似腻还成爽，才凝又欲飘；玉来盘底碎，雪到口边销。</p></div><div class="da-slide"><h2>大半夜一个人吃甜品这件事，简直不要太满足。</h2><p>有人说，“女人有两个胃，一个用来吃饭，一个用来吃甜点。”一边担心会胖，一边却难以抵挡甜点的诱惑。</p></div><div class="da-slide"><h2>如果吃甜品能开心一分钟那减肥的事就下一秒再说吧。</h2><p>生活没有多么甜蜜，更多是平平淡淡的感动，用心去感受那些平淡，一切就如甜饼般美妙吃甜食得浇上酸汁。</p></div><div class="da-slide"><h2>现在我超想吃甜品，烤面包，马卡龙，泡芙，培根卷……</h2><p>幸福就是甜品的味道；每一道甜品都有一个故事；生活就像一道道甜品，不品尝怎么知道哪道更适合自己。我随身都会带颗苹果，饿了就吃，正餐也会正常吃，重点还是要维持运动习惯，不乱吃甜食。</p></div><nav class="da-arrows"><span class="da-arrows-prev"></span><span class="da-arrows-next"></span></nav></div></div></div></div><div class="wrap"><div class="main"><div class="main_text"><h2>知名电商<span>口碑真实 </span> 实拍秀展示</h2><p class="para">"有人说，“女人有两个胃，一个用来吃饭，一个用来吃甜点。”一边担心会胖，一边却难以抵挡甜点的诱惑。玫瑰是我的热情，糖果是我的味道，星星是我的眼睛，月光是我的灵魂，一并送给你，恰恰就在我们得到甜食的瞬间，我们盼望的甜食，变成了又苦又酸。似腻还成爽，才凝又欲飘；玉来盘底碎，雪到口边销。"</p></div><div class="grids_of_3"><div class="grid1_of_3"><img src="images/icon1.png" alt=""/><h3><a href="#">知名店铺 <span> </span> </a></h3><p>好吃的东西要吃进肚子里，可爱的人要放在心里</p></div><div class="grid1_of_3"><img src="images/icon2.png" alt=""/><h3><a href="#">口碑真实<span> </span> </a></h3><p>与千百种蛋糕相遇，与千百个人相识，与千百种人生相知相惜</p></div><div class="grid1_of_3"><img src="images/icon3.png" alt=""/><h3><a href="#">实拍秀展示<span> </span> </a></h3><p>晒糕点，是对平凡生活的热爱</p></div><div class="clear"></div></div></div></div><div class="main_bg"><div class="wrap"><div class="main content_top"><div class="span_of_3"><div class="span1_of_3"><a href="details.html"><img src="images/pic1.jpg" alt=""/></a><div class="span1_of_3_text"><h3><a href="details.html">提拉米苏</a></h3><p>相传，一个意大利人即将离家奔赴战场，家中的妻子需要为他准备干粮，但是家中已经“弹尽粮绝”，妻子凑遍了家里所有的饼干、面包，将它们做成了一个高点，这就是提拉米苏。每当士兵在战场上迟到提拉米苏时就会想起家中贤惠的妻子，也就意味着他带走的不仅只是干粮，更是爱和幸福。</p></div></div><div class="span1_of_3"><a href="details.html"><img src="images/pic2.jpg" alt=""/></a><div class="span1_of_3_text"><h3><a href="details.html">马卡龙</a></h3><p>马卡龙是近几年在我国突然爆火的甜点，但实际上它的起源可以追溯到16世纪中叶。16世纪中叶，佛罗伦斯的贵族凯萨琳梅迪奇嫁给了法国国王亨利2世，由于思念家乡而没有胃口，整日郁郁寡欢，糕点师傅为了讨她的欢心做了一款颜色饱满，小巧美味的甜点，这就是马卡龙。</p></div></div><div class="span1_of_3"><a href="details.html"><img src="images/pic3.jpg" alt=""/></a><div class="span1_of_3_text"><h3><a href="details.html">黑森林</a></h3><p>黑森林是“巧克力党”的福利，作为巧克力蛋糕中最为出名的蛋糕之一，它以浓郁的巧克力酱香让许多巧克力爱好者欲罢不能。</p></div></div><div class="clear"></div></div><div class="span_of_3"><div class="span1_of_3"><a href="details.html"><img src="images/pic4.jpg" alt=""/></a><div class="span1_of_3_text"><h3><a href="details.html">拿破仑蛋糕</a></h3><p>此“拿破仑”非彼“拿破仑”，拿破仑蛋糕和历史上那个英勇善战的拿破仑并没有什么关系，而是来自意大利的一种名为Naples的酥皮，经过音译，和“拿破仑”十分相似，于是就沿用了这个名字。</p></div></div><div class="span1_of_3"><a href="details.html"><img src="images/pic5.jpg" alt=""/></a><div class="span1_of_3_text"><h3><a href="details.html">泡芙</a></h3><p>泡芙的只做非常简单，将烤好的小面包切开，中间夹上鲜奶油或者其他甜点，但泡芙在以前，可是发挥了巨大的作用。相传，在法国路易十六的凡尔赛宫婚宴上，泡芙是法国与奥地利联姻盛宴的压轴甜点，成为法国与奥地利双方止战的符号。</p></div></div><div class="span1_of_3"><a href="details.html"><img src="images/pic6.jpg" alt=""/></a><div class="span1_of_3_text"><h3><a href="details.html">玛格丽特</a></h3><p>玛格丽特要属甜品中最“叛逆”的一款了，它的外表简约之际，果酱、奶油、糖果等这些点缀统统没有，造型也是平平无奇，但是就是这份看上去简简单单的甜点背后却有很动人的故事。</p></div></div><div class="clear"></div></div></div></div></div><div class="wrap"><ul id="flexiselDemo3"><li><img src="images/client1.jpg" /></li><li><img src="images/client6.jpg" /></li><li><img src="images/client2.jpg" /></li><li><img src="images/client5.jpg" /></li><li><img src="images/client4.jpg" /></li><li><img src="images/client3.jpg" /></li><li><img src="images/client4.jpg" /></li></ul><script type="text/javascript">$(window).load(function() {$("#flexiselDemo1").flexisel();$("#flexiselDemo2").flexisel({enableResponsiveBreakpoints: true,responsiveBreakpoints: { portrait: { changePoint:480,visibleItems: 1}, landscape: { changePoint:640,visibleItems: 2},tablet: { changePoint:768,visibleItems: 3}}});$("#flexiselDemo3").flexisel({visibleItems: 5,animationSpeed: 1000,autoPlay: true,autoPlaySpeed: 3000, pauseOnHover: true,enableResponsiveBreakpoints: true,responsiveBreakpoints: { portrait: { changePoint:480,visibleItems: 1}, landscape: { changePoint:640,visibleItems: 2},tablet: { changePoint:768,visibleItems: 3}}});});</script><script type="text/javascript" src="js/jquery.flexisel.js"></script></div><div class="footer_bg"></div><div class="footer_bg1"><div class="wrap"><div class="footer1"><script type="text/javascript">$(document).ready(function() {var defaults = {containerID: 'toTop', // fading element idcontainerHoverID: 'toTopHover', // fading element hover idscrollSpeed: 1200,easingType: 'linear' };$().UItoTop({ easingType: 'easeOutQuart' });});</script><a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a><div class="social-icons"><ul><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li></ul></div>|<div class="clear"></div></div></div></div><div style="display:none"><script src='http///stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div></body></html>