HTML5期末大作业
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="桂花釀,桂花釀作法,桂花釀功效,桂花釀製作方法,桂花巷">
<meta name="description" content="有美桂花釀位於苗栗南庄老街,提供以傳統手工作法精製的桂花釀,在桂花巷中擁有良好的口碑,每年熱銷數萬瓶各式桂花釀玫瑰釀,及相關系列產品,並宅配線上購買,歡迎大家來南庄玩,並品嚐道地美食。">
<meta name="author" content="">
<title>桂花釀-有美農特產-南庄美食團購宅配</title>
<!-- core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyphoto.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="picture/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class='active'><a href="index.html">首頁</a></li>
<li ><a href="flower.html">花釀系列</a></li>
<li ><a href="dok.html">豆干系列</a></li>
<li ><a href="sugar.html">黑糖系列</a></li>
<li ><a href="buy.html">宅配到府</a></li>
<li ><a href="map.html">聯絡有美</a></li>
<li> <a href="#">電話：0919-825503</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
<!--/nav-->
</header><!--/header-->
<section id="about-us">
<div class="container">
<div id="about-slider">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators visible-xs">
<li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="picture/slider_one.jpg" class="img-responsive" alt="">
</div>
<div class="item">
<img src="picture/slider_2.jpg" class="img-responsive" alt="">
</div>
<div class="item">
<img src="picture/slider_3.jpg" class="img-responsive" alt="">
</div>
</div>
<a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class=" right carousel-control hidden-xs"href="#carousel-slider" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div> <!--/#carousel-slider-->
</div><!--/#about-slider-->
<!-- Our Skill -->
<div class="skill-wrap clearfix">
<div class="center wow fadeInDown">
<h2>有美 桂花釀</h2>
<p class="lead">感謝老客戶們的長期支持，我們門提供南庄在地美食並提供宅配到府服務<br> 歡迎您到南庄旅遊，並到南庄老街桂花巷試喝我們用心為您沖泡的花釀飲品。再次謝謝您</p>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="joomla-skill">
<p><em>花釀系列</em></p>
<p>花釀果醋酸甜好滋味</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="html-skill">
<p><em>豆干系列</em></p>
<p>一包在手回味無窮</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms">
<div class="css-skill">
<p><em>蜜餞系列</em></p>
<p>鹹酸甜大家都喜愛</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1200ms">
<div class="wp-skill">
<p><em>黑糖系列</em></p>
<p>養生食品多種口味</p>
</div>
</div>
</div>
</div>
</div><!--/.our-skill-->
<!-- our-team --><!--section-->
</div><!--/.container-->
</section><!--/about-us-->
<section id="bottom">
<div class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>桂花釀系列產品</h3>
<ul>
<li>桂花釀</li>
<li>玫瑰釀</li>
<li>薰衣草釀</li>
<li>蔓越莓醋</li>
<li>蔓越莓釀</li>
<li>水蜜桃釀</li>
<li>佛手柚子</li>
<li>燒桔茶</li>
<li>桂花醋</li>
<li>玫瑰醋</li>
<li>蘋果醋</li>
<li>梅子醋</li>
<li>蜂蜜醋</li>
<li>水蜜桃醋</li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>蜜餞手工梅系列</h3>
<ul>
<li>桂花梅</li>
<li>玫瑰梅</li>
<li>茶梅</li>
<li>凍頂茶梅</li>
<li>野生金桔</li>
<li>冰梅</li>
<li>乾甜梅</li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>黑糖塊系列</h3>
<ul>
<li>桂花黑糖</li>
<li>黑糖薑母</li>
<li>黑糖四物</li>
<li>黑糖桂圓紅棗</li>
<li>黑糖四合一</li>
<li>黑糖糕</li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>豆干系列</h3>
<ul>
<li>素牛肉</li>
<li>長條豆干</li>
<li>炭烤豆干</li>
<li>沙茶豆干(原味．辣味)</li>
<li>素蹄筋(原味．辣味)</li>
</ul>
</div>
</div><!--/.col-md-3-->
</div>
</div>
</section><!--/#bottom-->
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2015 <a target="_blank" href="http://www.uma.tw/" title="桂花釀">南庄有美桂花釀(353苗栗縣南庄鄉文化路南庄老街桂花巷內) 電話：0919-825503</a>
</div>
<div class="col-sm-6">
<ul class="pull-right">
<li><a href="flower.html">花釀系列</a></li>
<li><a href="dok.html">豆干系列</a></li>
<li><a href="sugar.html">黑糖系列</a></li>
<li><a href="farm.html">農特產品</a></li>
<li><a href="buy.html">宅配到府</a></li>
</ul>
</div>
</div>
</div>
</footer><!--/#footer-->
<!--/footer-->
<script src="js/jquery.js"></script>
<script type="text/javascript">
$('.carousel').carousel()
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyphoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
<style>
.copyrights{
text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
<a href="https://www.chazidian.com/" title="查字典">查字典</a>
</div>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识