200字范文 > HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜

HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜

时间：2022-01-27 03:26:33

HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜品网页设计`零食小吃成品网页`生鲜水果

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

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

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

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

文章目录

HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜品网页设计`零食小吃成品网页`生鲜水果获取更多源码作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!doctype html><html><head><meta charset="utf-8"><title>绿茵阁</title><link href="css/index.css" rel="stylesheet" type="text/css"></head><body><div class="bigbox"><div class="nav"><div class="xiao-nav"><ul class="xiaoheng"><li></li><li></li><li></li></ul></div><ul class="nav-zi"><li class="nownav" id="aa" ><a href="#a1">首页<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li><li id="bb"><a href="#a2">餐厅概念<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li><li id="cc"><a href="#a3">本周主推<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li><li id="dd"><a href="#a4">菜单<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li></ul></div> <div class="smallbox1" id="a1"><div class="logo-zi"></div></div> <div class="banner"><div class="searchbox"><div class="search_butt" id="anniudj"></div><div class="form_hezi" id="ssbox"><input type="text" placeholder="输入关键字"><input type="button" value="搜索" id="ssbut"></div></div> <div class="yintao"><p>聚浓情尽欢笑</p></div><figure id="full_feature" class="swipslider"><ul class="sw-slides"><li class="sw-slide"><img src="picture/banner1.jpg" width="1920" height="417" alt=""/></li><li class="sw-slide"><img src="picture/banner-2.jpg" width="1920" height="417" alt=""/></li> <li class="sw-slide"><img src="picture/banner-3.jpg" width="1920" height="417" alt=""/></li></ul><div class="logo"></div> </figure></div><div class="red-black" id="a2"></div><div class="xiasmallbox" ></div> <div class="maxbox" ><div class="xian-box"><div class="xian1"></div><div class="canting"> 餐 厅 概 念  <img src="picture/dianidan.jpg" width="9" height="9" alt=""/></div><div class="xian2"></div></div><div class="gainian">广州市绿茵阁餐饮连锁有限公司成立于1989年<br>是中国最大的西餐连锁企业之一<br>品牌定位于贵族西餐本土化大众化和创新饮食文化是西餐市场化的创立者和西餐连锁化的缔造者<br>全国餐饮百强企业<br>全国100最佳特色餐厅</div><div class="xian3"></div><ul class="three-pic"><li><img src="picture/page2-tu1.png" width="400" height="300" alt=""/></li><li class="tu2"><img src="picture/page2-tu2.png" width="338" height="234" alt=""/></li><li class="tu3"><img src="picture/page2-tu3.png" width="500" height="400" alt=""/></li></ul><div class="xian4" id="a3"></div>   <div class="xian5" ></div><div class="zhutui"> 本 周 主 推  <img src="picture/dianidan.jpg" width="9" height="9" alt=""/></div><div class="xian6"></div><div class="dazhe">本周主推菜品一律八折<br>西餐和本土消费者的传统口味，不断进行菜品更新<br>保持出品的独创性之时融入文化元素扩张美食的吸引力，是发掘中国西餐元素的创始者餐厅<br></div></div> <div class="bolang"> <ul class="six-tu"><li class="aaa"><a href="#"><img src="picture/one.png" width="178" height="178" alt=""/ class="one"></a><div class="hong-t"><div class="heng-shang"></div><div class="heng-xia"></div><a href="#"><span>详情</span></a></div><h6><a href="#">芝士焗饭</a></h6></li><li class="bbb"><a href="#"><img src="picture/two.png" width="178" height="178" alt=""/ class="two"></a><h6><a href="#">碳烤猪扒</a></h6><div class="hong-t2"><div class="heng-shang"></div><div class="heng-xia"></div><a href="#"><span>详情</span></a></div> </li><li class="ccc"><a href="#"><img src="picture/three.png" width="178" height="178" alt=""/ class="three"></a><h6><a href="#">黑椒牛柳</a></h6><div class="hong-t3"><div class="heng-shang"></div><div class="heng-xia"></div><a href="#"><span>详情</span></a></div> </li><li class="ddd"><a href="#"><img src="picture/four.png" width="178" height="178" alt=""/ class="four"></a><h6><a href="#">白雪千层慕斯</a></h6><div class="hong-t4"><div class="heng-shang"></div><div class="heng-xia"></div><a href="#"><span>详情</span></a></div> </li><li class="eee"><a href="#"><img src="picture/five.png" width="178" height="178" alt=""/ class="five"></a><h6><a href="#">秘制牛小排</a></h6><div class="hong-t5"><div class="heng-shang"></div><div class="heng-xia"></div><a href="#"><span>详情</span></a></div> </li><li class="fff"><a href="#"><img src="picture/six.png" width="178" height="178" alt=""/ class="six"></a><h6><a href="#">沙朗小排</a></h6><div class="hong-t6"><div class="heng-shang"></div><div class="heng-xia"></div><a href="#"><span>详情</span></a></div> </li></ul></div><div class="smallbox2"><div class="shuigui"></div><span class="shuigui"><img src="picture/shuiguo.png" width="647" height="324" alt=""/></span><div class="video"><video src="images/vidio-bg.mp4" autoplay loop width="398" height="216" alt="" /></video><h5 id="a4">精选上等食材，用心烹制</h5></div></div><div class="smallbox3" > <div class="box03"> <div class="xian7"></div><div class="caidan"> 菜     单  <img src="picture/dianidan.jpg" width="9" height="9" alt=""/></div><div class="xian8"></div></div><ul class="nav-xia"><li id="q1" class="nownav1">主食</li><li id="q2">缤纷小食</li><li id="q3">咖啡</li><li id="q4">套餐</li></ul><div class="juanjuan"></div><div class="three-tu-big"><ul class="three-tu"><li class="one1"><img src="picture/tu1.png" width="380" height="300" alt=""/><div class="x-hong-1"><div class="x-heng-shang"></div><div class="x-heng-xia"></div><span>详情</span></div><strong>惠林顿牛排沙拉</strong></li><li class="one2"><img src="picture/tu2.png" width="380" height="300" alt=""/><div class="x-hong-2"><div class="x-heng-shang"></div><div class="x-heng-xia"></div><span>详情</span> </div><strong>惠林顿牛排沙拉</strong></li><li class="one3"><img src="picture/tu3.png" width="380" height="300" alt=""/><div class="x-hong-3"><div class="x-heng-shang"></div><div class="x-heng-xia"></div><span>详情</span></div><strong>惠林顿牛排沙拉</strong></li></ul> <ul class="three-tu2"><li class="one1"><img src="picture/xiaoshi-1.png" width="380" height="300" alt=""/><div class="x-hong-1"><div class="x-heng-shang"></div><div class="x-heng-xia"></div><span>详情</span></div><strong>薯条拼盘</strong></li><li class="one2"><img src="picture/xiaoshi-2.png" width="380" height="300" alt=""/><div class="x-hong-2"><div class="x-heng-shang"></div><div class="x-heng-xia"></div><span>详情</span> mnav.style.cssText="right:0px;opacity:1"mbut.style.cssText="margin-right:122px"}else{mnav.style.cssText="right:-122px;opacity:0"mbut.style.cssText="margin-right:0"} }}window.onload =function (){//页面加载完成后才执行脚本var an = document.getElementById("anniudj");var ss = document.getElementById("ssbox");var sb = document.getElementById("ssbut");/an.onclick =function(){//点击放大镜按钮时ss.style.cssText="display:block";//搜索盒子显示an.style.cssText="display:none"//放大镜按钮隐藏}/sb.onclick =function(){//点击搜索按钮时ss.style.cssText="display:none"//搜索盒子隐藏an.style.cssText="display:block";//放大镜按钮显示 }}</script><script type="text/javascript">$(window).load(function() {$('#full_feature').swipeslider();$('#content_slider').swipeslider({transitionDuration: 600,autoPlayTimeout: 10000,sliderHeight: '300px'});$('#responsiveness').swipeslider();$('#customizability').swipeslider({transitionDuration: 1500, autoPlayTimeout: 4000, timingFunction: 'cubic-bezier(0.38, 0.96, 0.7, 0.07)',sliderHeight: '30%'});});</script></html>