HTML5期末大作业
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欧麦喜官网</title>
<link href="css/rest.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="css/video-js.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main1 animated bounceInDown" data-wow-delay="4.4s">
<div class="index_top">
<div class="w1200">
<div class="nav animated bounceInRight " style="animation-delay:1s;-webkit-animation-delay:1s;">
<div class="nav_logo fl"><img src="images/logo.png"></div>
<div class="nav_ul fr">
<ul>
<li>
<a href="#">企业•实力 </a>
<dl>
<dd><a href="#">企业•实力1</a></dd>
<dd><a href="#">企业•实力2</a></dd>
<dd><a href="#">企业•实力3</a></dd>
</dl>
</li>
<li>
<a href="#">极简•形象</a>
<dl>
<dd><a href="#">极简•形象1</a></dd>
<dd><a href="#">极简•形象2</a></dd>
<dd><a href="#">极简•形象3</a></dd>
</dl>
</li>
<li>
<a href="#">喜作•产品</a>
<dl>
<dd><a href="#">喜作•产品1</a></dd>
<dd><a href="#">喜作•产品2</a></dd>
<dd><a href="#">喜作•产品3</a></dd>
</dl>
</li>
<li class="cur"><a href="#">欧麦喜</a></li>
<li>
<a href="#">合作•惊喜</a>
<dl>
<dd><a href="#">合作•惊喜1</a></dd>
<dd><a href="#">合作•惊喜2</a></dd>
<dd><a href="#">合作•惊喜3</a></dd>
</dl>
</li>
<li>
<a href="#">火爆•动态</a>
<dl>
<dd><a href="#">火爆•动态1</a></dd>
<dd><a href="#">火爆•动态2</a></dd>
<dd><a href="#">火爆•动态3</a></dd>
</dl>
</li>
<li>
<a href="#">联系•我们</a>
<dl>
<dd><a href="#">联系•我们1</a></dd>
<dd><a href="#">联系•我们2</a></dd>
<dd><a href="#">联系•我们3</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ibanner" class="ibanner">
<div class="bd">
<ul>
<li><img src="temp/banner1.jpg" /></li><li><img src="temp/banner2.jpg" /></li><li><img src="temp/banner3.jpg" /></li> <li><img src="temp/banner4.jpg" /></li> </ul>
</div>
</div>
</div>
<div class="main5 wow fadeInUpRight">
<div class="w1200">
<div class="maincom main5-0 wow bounceInLeft" data-wow-delay="0.5s"></div>
<div class="maincom main5-1 wow bounceInLeft" data-wow-delay="1s"></div>
<div class="maincom main5-2 wow bounceInLeft" data-wow-delay="1.5s"></div>
</div>
</div>
<!-- <div class="main2 wow fadeInUpLeft">
<div class="w1200">
<div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s"></div>
<div class="maincom main2-1 wow bounceIn" data-wow-delay="0.6s"></div>
<div class="maincom main2-2 wow bounceIn" data-wow-delay="0.9s"></div>
<div class="maincom main2-3 wow bounceIn" data-wow-delay="1.2s"></div>
</div>
</div> -->
<div class="main3 wow fadeInUpRight">
<div class="w1200">
<div class="maincom main3-0 wow bounceInLeft" data-wow-delay="0.5s"></div>
<div class="maincom main3-1 wow bounceInRight" data-wow-delay="1s"></div>
</div>
</div>
<div class="main4 wow fadeInUpLeft">
<div class="w1200">
<div class="maincom main4-0 wow bounce" data-wow-delay="0.5s"></div>
<div class="maincom main4-1 wow bounce" data-wow-delay="1s">
<div>
<a class="news_ul_pic fl" href="#" target="_blank"><img src="temp/new1.jpg"></a>
<div class="indexnews fr">
<div class="indexnews_c1">
<a class="fl" href="#">企业简介</a>
</div>
<p class="indexnews_c2">品纳餐饮管理有限公司是一家集企业咨询、餐饮连锁经营、网络科技创新为一体的综合型企业，总部位于广州市白云区，经过多年的沉淀和悉心钻研，公司已在集团化、多元化的新型企业道路上迈出了坚实的一步，成为集研发、制造、销售、运输、培训为一体的专业餐饮管理服务机构，打造了以500公里为业务半径、整个大陆业务拓展和终端运营服务的无缝覆盖体系，目前在南京、上海、武汉、成都均已设有分公司。</p>
<a class="indexnews_a" href="#">更多详情</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="main2 wow fadeInUpLeft">
<div class="w1200">
<div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s">
<video id="my-video" class="video-js" controls preload="auto" width="730" height="410"
poster="temp/video.png" data-setup="{}">
<source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
</video>
<script src="js/video.min.js"></script>
<script src="js/zh-CN.js"></script>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
<div class="maincom main2-1 wow bounceIn indexpro" data-wow-delay="0.6s">
<a href="">
<img src="temp/index_pro1.jpg" alt="">
<p class="p1">欧麦喜荣获“受欢迎茶饮”，广受全国……</p>
<p class="p2">手作大麦茶热销全国，轻创企业的创新标杆，作为全国受欢迎的茶饮，欧麦喜受众遍及大江南北，全国掀起麦茶新潮流……</p>
</a>
</div>
<div class="maincom main2-2 wow bounceIn indexpro" data-wow-delay="0.9s">
<a href="">
<img src="temp/index_pro1.jpg" alt="">
<p class="p1">欧麦喜调茶师的专业炫酷工艺圈粉数千……</p>
<p class="p2">调茶工艺的美学根据调酒师演变，从最初的只是简单控流、控量到现在的将调试过程完成艺术仅仅几个月时间，每一杯给一个步骤每一个工序都为优质典雅代言……</p>
</a>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<ul>
<li>
<p><span>姓 名</span><input type="text" name="name" id="name" class="liuyan"></p>
<p><span>手机号</span><input type="text" name="tel" id="tel" class="liuyan"></p>
<p><span>留 言</span><textarea name="introduce" id="contact" class="liuyan"></textarea></p>
<p>
<button class="fbtn1" name="button" onclick="FromSubmit()">提交</button>
<button class="fbtn2" name="submit" onclick="ClickReset()">重置</button>
</p>
</li>
<li>
<img src="images/fewm.png">
</li>
<li>
<img src="images/fh1.png">
<p>
<span>华南</span>广州市天河区科学大道科汇金谷一街1号1-4楼
</p>
<p>
<span>华北</span>北京市丰台区新宫中福丽宫品牌基地2号楼365室
</p>
<p>
<span>华东</span>上海市闵行区顾戴路3009号祥鹿大厦2楼
</p> <em><img src="images/ftel.png">4006-150-513</em>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="flink">
<p>版权所有:品纳餐饮管理有限公司<a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备00008888号-88</a><a href="#" target="_blank">网站地图</a></p>
<p><span>友情链接：</span>
<a target="_blank" href="#">饮品合作</a> <a target="_blank" href="#">火锅合作</a> <a target="_blank" href="http://www.yibingke.com/">冰淇淋加盟</a> <a target="_blank" href="http://www.yzgcha.com/">贡茶加盟</a> <a target="_blank" href="http://www.jiugongz.com/">烘焙合作</a> </p>
<div class="clear"></div>
</div>
<div class="fixicon">
<a href="" ><img src="images/fixicon1.png" alt=""></a>
<a href="" ><img src="images/fixicon2.png" alt=""></a>
<a href="" ><img src="images/fixicon3.png" alt=""></a>
<a href="" ><img src="images/fixicon4.png" alt=""></a>
<a href="" ><img src="images/fixicon5.png" alt=""></a>
</div>
<script src="js/wow.js"></script>
<script src="js/jquery.SuperSlide.2.1.2.js"></script>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
$(function (){
jQuery(".ibanner").slide({
mainCell:".bd ul",autoPlay:true,delayTime:1000,effect:"leftLoop"});
});
</script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识