网页作品技术：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="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 美食甜品网页设计`零食小吃成品网页`生鲜水果
