静态HTML网页设计作品——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜品网页设计`零食小吃成品网页`生鲜水果
2024-05-13 20:11:49
网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- 一、作品展示
- 二、文件目录
- 三、代码实现
一、作品展示
二、文件目录
三、代码实现
<!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><!--小导航--end--><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><!--导航end--> <div class="smallbox1" id="a1"><div class="logo-zi"></div></div><!--banner<ul class="banner"><span></span><div class="yintao"><p>聚浓情 尽欢笑</p></div><li><img src="picture/banner1.jpg" width="1920" height="417" alt=""/></li><div class="logo"></div> </ul>--> <div class="banner"><!--<strong></strong>--><!--搜索按钮--><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><!--banner-end--> <!--餐厅概念--><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> <!--餐厅概念--end--> <!--本周主推--> <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><!--本周主推--end-->
</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="data: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>静态HTML网页设计作品——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜品网页设计`零食小吃成品网页`生鲜水果相关推荐
- HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜品网页设计`零食小吃成品网页`生鲜水果
HTML5期末大作业:蛋糕甜品网站设计--蛋糕甜品(4页) HTML+CSS+JavaScript 美食甜品网页设计零食小吃成品网页生鲜水果 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
- HTML5期末大作业：美食餐饮网站设计——美食餐饮管理(8页) HTML+CSS+JavaScript 美食餐饮商品设计 食物海鲜网页
HTML5期末大作业:美食餐饮网站设计--美食餐饮管理(8页) HTML+CSS+JavaScript 美食餐饮商品设计 食物海鲜网页 作品介绍 1.网页作品简介 :HTML期末大学生网页设计作业 A ...
- HTML5期末大作业：英雄联盟网站设计——英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业
HTML5期末大作业:英雄联盟网站设计--英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- html大作业网页代码 计——美食餐饮管理(8页) HTML+CSS+JavaScript 美食餐饮商品设计 食物海鲜网页
HTML5期末大作业:美食餐饮网站设计--美食餐饮管理(8页) 文章目录 HTML5期末大作业:美食餐饮网站设计--美食餐饮管理(8页) 一.作品展示 二.文件目录 三.代码实现 四.获取更多源码 一 ...
- 静态HTML网页设计作品——棋牌游戏(8页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 四.获取更多源码 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html PUBL ...
- HTML+CSS大作业网站设计——英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业
HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 四.获取更多源码 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html> ...
- HTML5期末大作业：美食网页制作——餐饮料里(12页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:美食网页制作--餐饮料里(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- 静态HTML网页设计作品商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计 文章目录 HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CS ...
- HTML5期末大作业：动漫人物介绍网站设计——哆啦A梦(5页) HTML+CSS+JavaScript 学生动漫网页设计模板下载 哆啦A大学生HTML网页制作作品 简单漫画网页设计成品...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
最新文章
- JS 时间戳转换成日期
- mongodb集群——配置服务器放分片meta信息，说明meta里包含了哪些数据信息
- MVC与三层架构的区别
- JavaScript 是如何工作的：解析、抽象语法树（AST）+ 提升编译速度5个技巧
- 使用CancellationToken——而不是Thread.Sleep
- 【POJ】2296 Map Labeler
- html中的分页条怎么写,html如何制作分页
- 企业微信页面在电脑端进行调试的方法
- LOJ#6070. 「2017 山东一轮集训 Day4」基因 解题报告
- 常用的基础英文字体推荐
- 三招解决！电脑密码忘记了怎么办？新手都能学会
- 何谓赛道思维？隔壁阿三加密货币赛道重启，我们何时迎头赶上？
- 人脸识别-在视频中识别人脸
- PLC模拟输入滤波10种方法
- php狼人杀,《狼人杀专业术语》 一秒变成狼圈人！
- 微信小程序——富文本
- 打印从1到最大的n位数——《剑指offer》
- java计算机毕业设计-物料采购合同管理系统-源程序+mysql+系统+lw文档+远程调试
- linux文件 第八行,求助：如何grep一个文件中含有关键词“OTU_”之后第八行的信息...
- 蒙特卡罗树搜索的笔记