flexble.js简单的demo

flexble是一个可以动态的添加meta标签的js插件,使用它进行web移动端的开发,html代码如下

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<!--允许全屏-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="telephone=no,email=no" name="format-detection">
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="js/flexible.debug.css">
		<!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> -->
		<script type="text/javascript" src="js/flexible.debug.js"></script>
		<title>再来一波DEMO页</title>

	</head>

	<body>
		<div class="container">
			<div class="banner">
				<img src="img/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg"/>
			</div>
			<ul class="list">
				<li class="list-item">
					<a href="##" class="h-img">
						<img src="img/grayscale.jpg" alt="">
					</a>
					<div class="flag-item h-img">
						<div class="title">
						<a href="##">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093
						</a>
						</div>
						<div class="price">
							<span>双11价</span>
							<strong>¥299.06</strong>
							<small>(满400减100)</small>
						</div>
						<div class="sellnum">
							1小时内热卖5885件
						</div>
						<div class="qiang">
							马上抢!
						</div>
					</div>
				</li>

				<li class="list-item">
					<a href="##" class="h-img">
						<img src="img/grayscale.jpg" alt="">
					</a>
					<div class="flag-item h-img">
						<div class="title">
						<a href="##">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093
						</a>
						</div>
						<div class="price">
							<span>双11价</span>
							<strong>¥299.06</strong>
							<small>(满400减100)</small>
						</div>
						<div class="sellnum">
							1小时内热卖5885件
						</div>
						<div class="qiang">
							马上抢!
						</div>
					</div>
				</li>


				<li class="list-item">
					<a href="##" class="h-img">
						<img src="img/grayscale.jpg" alt="">
					</a>
					<div class="flag-item h-img">
						<div class="title">
						<a href="##">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093
						</a>
						</div>
						<div class="price">
							<span>双11价</span>
							<strong>¥299.06</strong>
							<small>(满400减100)</small>
						</div>
						<div class="sellnum">
							1小时内热卖5885件
						</div>
						<div class="qiang">
							马上抢!
						</div>
					</div>
				</li>

				<li class="list-item">
					<a href="##" class="h-img">
						<img src="img/grayscale.jpg" alt="">
					</a>
					<div class="flag-item h-img">
						<div class="title">
						<a href="##">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093
						</a>
						</div>
						<div class="price">
							<span>双11价</span>
							<strong>¥299.06</strong>
							<small>(满400减100)</small>
						</div>
						<div class="sellnum">
							1小时内热卖5885件
						</div>
						<div class="qiang">
							马上抢!
						</div>
					</div>
				</li>

				<li class="list-item">
					<a href="##" class="h-img">
						<img src="img/grayscale.jpg" alt="">
					</a>
					<div class="flag-item h-img">
						<div class="title">
						<a href="##">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093
						</a>
						</div>
						<div class="price">
							<span>双11价</span>
							<strong>¥299.06</strong>
							<small>(满400减100)</small>
						</div>
						<div class="sellnum">
							1小时内热卖5885件
						</div>
						<div class="qiang">
							马上抢!
						</div>
					</div>
				</li>
			</ul>
		</div>
	</body>

</html>


IT文库 » flexble.js简单的demo
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址