<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时倾零食铺子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/zh_qim.css"/>
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.imagecroll.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- //js -->
<!-- banner-text Slider starts Here -->
<style type="text/css">
/*设置body元素字体为Microsoft YaHei*/
.head-top{
background: #5fa022;
padding: 0.8em 0;
}
.navbar-brand{
padding: 0 0;
}
/*设置图片logo的大小和位置*/
.navbar-brand>img{
height: auto;
margin-right: 5px;
margin-top: 5px;
width: 250px;
}
/*设置整个导航菜单的内边距、背景色和阴影*/
.navbar-default{
padding: 1.5em 0;
background-color: #f2f0f1;
box-shadow: 12px -5px 39px -12px;
}
/*设置导航栏中菜单a链接的样式*/
.navbar-default .navbar-nav>li a {
top: 10px;
padding: 0.5em 3em;
text-decoration: none;
font-weight: 600;
font-size: 1.2em;
color:#919191;
}
/*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
background:#D96B66;
color: white;
border-radius: 3px;
-webkit-border-radius: 3px;
}
/*设置导航栏右侧a链接（0.00）的颜色*/
.navbar-right>a{
color:#D96B66;
}
/*媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题*/
@media (max-width: 970px) {
.navbar-default .navbar-nav>li a {
font-size: 1.1em;
}
}
/*header部分结束*/
</style>
</head>
<body >
<header>
<div class="head-top"></div>
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<!--<div class="logo">-->
<a href="#" class="navbar-brand" ><img src="images/logo.png" style="margin: -5px 0 0 0;" alt=""></a>
<!--</div>-->
<!-- 当进入最小设备时，导航条将隐藏，显示“汉堡按钮”，点击时可以切面显示导航条隐藏的信息
* data-target ：用于确定需要显示div
-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航链接、表单和其他内容切换 -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html" >主页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="show.html">产品展示</a></li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
<!-- /.container-fluid -->
</nav>
</header>
<!-- 头部结束 -->
<div class="container-fluid" >
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 0;" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/banner(1).png" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/banner.png" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/banner(2).png" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 轮播banner结束 -->
<div class="welcome">
<h1><strong>关于我们</strong></h1>
<div class="container">
<div class="col-md-3 wel-left animated" style=" animation-delay: 0.5s; animation-name: fadeInLeft;">
<i class="hovicon effect-2 sub-a"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></i>
<h4>铺子货源</h4>
<p>本零食铺子的一切商品全部来自于知名品牌工厂，请朋友们放心购买，任何食品安全问题本铺子全部承担</p>
</div>
<div class="col-md-3 wel-left animated " style=" animation-delay: 0.5s; animation-name: fadeInUp;">
<i class="hovicon effect-2 sub-a"><span class=" glyphicon glyphicon-heart" aria-hidden="true"></span></i>
<h4>铺子宗旨</h4>
<p>本铺子以便捷、实惠、安全为宗旨，并且会一直坚持下去，感谢朋友们的光临</p>
</div>
<div class="col-md-6 wel-right animated" style=" animation-delay: 0.5s; animation-name: fadeInRight;">
<div class="wel-tp ">
<h3>时倾零食铺子</h3>
<h4>欢迎广大朋友光临</h4>
<p>本零食铺子一切商品均是通过正规途径、跟正规厂商直接购买，并且实时更新，尽力让朋友们满意</p><br>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- 关于结束 -->
<div class="show">
<h1><strong>最新商品</strong></h1>
<br>
<h3>Latest products</h3>
<hr>
<div class="about-team">
<div class="container">
<div class="row team-row">
<div class="col-sm-6 col-md-3 team-grids">
<div class="thumbnail team-thmnl animated" style="animation-delay: 0.5s; animation-name: fadeInLeft;">
<img src="images/ls1.jpg" class="img-responsive zoom-img" alt="...">
<div class="caption">
<h4><a href="show.html">肉松饼</a></h4>
<h5 style="margin: 5px 0 0 0; color: red;">￥8.00/500g</h5>
<br>
<button type="button" class="btn btn-success">立即购买</button>    <button type="b
运用jQuery和bootstrap编写的前端html响应式页面-时倾零食铺子
需积分: 14 23 浏览量
2022-11-16
16:24:41
上传
评论 2
收藏 12.37MB ZIP 举报
时倾零食铺子.zip （51个子文件） 
css 
animate.min.css 52KB bootstrap.css 146KB zh_qim.css 6KB animate.css 71KB images 
ls9.jpg 357KB
news1.png 123KB gund2.png 1.34MB banner5.png 644KB body.png 2.21MB autumn_season-1600x900.jpg 236KB japan_digital_nature-800x500.jpg 44KB ls12.jpg 603KB ganxie.png 261KB banner.png 1.77MB ls10.jpg 215KB ls11.jpg 234KB autumn_season-800x450.jpg 72KB ls1.jpg 70KB ls6.jpg 61KB german_landscapes-1600x900.jpg 88KB japan_digital_nature-1680x1050.jpg 145KB bag.png 3KB german_landscapes-800x450.jpg 31KB ls8.jpg 524KB ls3.jpg 55KB ls2.jpg 64KB logo.png 31KB ls4.jpg 17KB ls7.jpg 388KB ls5.jpg 37KB new-1.png 96KB banner(2).png 947KB banner(1).png 1.56MB fonts glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB
article.html 9KB index.html 15KB js jquery-1.10.2.min.js 91KB jquery.imageScroll.js 14KB bootstrap.min.js 36KB wow.min.js 7KB jquery-1.11.0.js 276KB wow.js 13KB bootstrap.js 68KB news.html 4KB about.html 9KB show.html 13KB contact.html 7KB资源评论
