jun-lu/jbp-h5.html

## jbp-h5.html
<!DOCTYPE html>
<html>
<head>
	<title>Treasure</title>
	<link rel="stylesheet" type="text/css" href="">
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="../lib/zepto-min.js"></script>
	<link rel="stylesheet" type="text/css" href="../build/cssCombo.css">
</head>
<body>

		<div class="content">

			<div class="module w1 shs"><a></a></div>
			<div class="module w2 jmp"><a></a></div>


			<div class="module w2 lft"><a></a></div>
			<div class="module w1 jzz"><a></a></div>


			<div class="module w1 zdj"><a></a></div>
			<div class="module w1 lyt"><a></a></div>
			<div class="module w1 jt"><a></a></div>


			<div class="module w1 jmz"><a></a></div>
			<div class="module w2 jmy"><a></a></div>
		</div>


</body>
</html>

## jbp.scss
@import "compass/reset";
@import "variable.scss";

body {
	background:#f5f5f7;
}

.content{
	width:100%;
	overflow:hidden;
	margin:2.5% auto;

	.module{
		float:left;
		margin-left:$gapWidth;
		margin-bottom:$gapWidth;
		position:relative;

		&::before {
			content:"";
			display:block;
			position:absolute;
			background:url(http://gtms04.alicdn.com/tps/i4/T11Kx2FD8XXXbPEHPe-35-35.gif) no-repeat;
			width:20px;
			background-size:100% 100%;
			height:20px;
			left:50%;
			top:50%;
			margin:-10px auto auto -10px;
		}


		&.shs {

			a {
				background-image:url(http://gtms01.alicdn.com/tps/i1/T1Qwh1FD0bXXbZWhZD-192-192.png);
			}
		}

		&.jmp {
			a {
				background-image:url(http://gtms02.alicdn.com/tps/i2/T1czJ1FyRhXXaWbBHI-400-192.png);
			}
		}

		&.lft {
			a {
				background-image:url(http://gtms03.alicdn.com/tps/i3/T1TU8ZFB8cXXaWbBHI-400-192.png);
			}
		}

		&.jzz {
			a {
				background-image:url(http://gtms04.alicdn.com/tps/i4/T1IUF1FqpfXXbZWhZD-192-192.png);
			}
		}

		&.zdj {
			a {
				background-image:url(http://gtms01.alicdn.com/tps/i1/T1J4B0FApbXXbZWhZD-192-192.png);
			}
		}

		&.lyt {
			a {
				background-image:url(http://gtms02.alicdn.com/tps/i2/T1UnR1Fy4aXXbZWhZD-192-192.png);
			}
		}

		&.jt {
			a {
				background-image:url(http://gtms03.alicdn.com/tps/i3/T1yR4ZFx0nXXbZWhZD-192-192.png);
			}
		}

		&.jmz {
			a {
				background-image:url(http://gtms01.alicdn.com/tps/i1/T1Cjx2FvhXXXbZWhZD-192-192.png );
			}
		}

		&.jmy {
			a {
				background-image:url(http://gtms01.alicdn.com/tps/i1/T1rmVZFpldXXcrnaQA-399-192.png);
			}
		}


		a {
			background-size:100% 100% !important;
			position:relative;
			z-index:2;
			display:block;
			background:red;
		}
	}

	.w1{
		width:$w1;

		a {
			padding-bottom:100%;
		}

	}

	.w2{
		width:$w2;

		a {
			padding-bottom:48%;
		}

	}


}

## variable.scss

/**
$width:620;
$module1Width:192;
$moudle2Widht:400;
$gapWdith:16;

$height:816;
$module1Height:192;
$gapHeight:16;
*/

/**
$gapWidth:1.9%;//16/604*100
$gapBottomHeight:2%;

$w1:192/604*100%;
$w2:400/604*100%;

$h1:23%;
$rowHeight:23.52%;
$rowMarignBottom:1.96%;

*/

$gridWidth: 30%;
$gapWidth:2.5%;

$w1: 30%;
$w2: 62.5%;

//$h1:23%;
//$rowHeight:23.52%;
//$rowMarignBottom:1.96%;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Treasure</title>
	<link rel="stylesheet" type="text/css" href="">
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="../lib/zepto-min.js"></script>
	<link rel="stylesheet" type="text/css" href="../build/cssCombo.css">
	</head>
	<body>

	<div class="content">

	<div class="module w1 shs"><a></a></div>
	<div class="module w2 jmp"><a></a></div>


	<div class="module w2 lft"><a></a></div>
	<div class="module w1 jzz"><a></a></div>


	<div class="module w1 zdj"><a></a></div>
	<div class="module w1 lyt"><a></a></div>
	<div class="module w1 jt"><a></a></div>


	<div class="module w1 jmz"><a></a></div>
	<div class="module w2 jmy"><a></a></div>
	</div>


	</body>
	</html>
	@import "compass/reset";
	@import "variable.scss";

	body {
	background:#f5f5f7;
	}

	.content{
	width:100%;
	overflow:hidden;
	margin:2.5% auto;

	.module{
	float:left;
	margin-left:$gapWidth;
	margin-bottom:$gapWidth;
	position:relative;

	&::before {
	content:"";
	display:block;
	position:absolute;
	background:url(http://gtms04.alicdn.com/tps/i4/T11Kx2FD8XXXbPEHPe-35-35.gif) no-repeat;
	width:20px;
	background-size:100% 100%;
	height:20px;
	left:50%;
	top:50%;
	margin:-10px auto auto -10px;
	}



	&.shs {

	a {
	background-image:url(http://gtms01.alicdn.com/tps/i1/T1Qwh1FD0bXXbZWhZD-192-192.png);
	}
	}

	&.jmp {
	a {
	background-image:url(http://gtms02.alicdn.com/tps/i2/T1czJ1FyRhXXaWbBHI-400-192.png);
	}
	}

	&.lft {
	a {
	background-image:url(http://gtms03.alicdn.com/tps/i3/T1TU8ZFB8cXXaWbBHI-400-192.png);
	}
	}

	&.jzz {
	a {
	background-image:url(http://gtms04.alicdn.com/tps/i4/T1IUF1FqpfXXbZWhZD-192-192.png);
	}
	}

	&.zdj {
	a {
	background-image:url(http://gtms01.alicdn.com/tps/i1/T1J4B0FApbXXbZWhZD-192-192.png);
	}
	}

	&.lyt {
	a {
	background-image:url(http://gtms02.alicdn.com/tps/i2/T1UnR1Fy4aXXbZWhZD-192-192.png);
	}
	}

	&.jt {
	a {
	background-image:url(http://gtms03.alicdn.com/tps/i3/T1yR4ZFx0nXXbZWhZD-192-192.png);
	}
	}

	&.jmz {
	a {
	background-image:url(http://gtms01.alicdn.com/tps/i1/T1Cjx2FvhXXXbZWhZD-192-192.png );
	}
	}

	&.jmy {
	a {
	background-image:url(http://gtms01.alicdn.com/tps/i1/T1rmVZFpldXXcrnaQA-399-192.png);
	}
	}


	a {
	background-size:100% 100% !important;
	position:relative;
	z-index:2;
	display:block;
	background:red;
	}
	}

	.w1{
	width:$w1;

	a {
	padding-bottom:100%;
	}

	}

	.w2{
	width:$w2;

	a {
	padding-bottom:48%;
	}

	}




	}

	/**
	$width:620;
	$module1Width:192;
	$moudle2Widht:400;
	$gapWdith:16;

	$height:816;
	$module1Height:192;
	$gapHeight:16;
	*/

	/**
	$gapWidth:1.9%;//16/604*100
	$gapBottomHeight:2%;

	$w1:192/604*100%;
	$w2:400/604*100%;

	$h1:23%;
	$rowHeight:23.52%;
	$rowMarignBottom:1.96%;

	*/

	$gridWidth: 30%;
	$gapWidth:2.5%;

	$w1: 30%;
	$w2: 62.5%;

	//$h1:23%;
	//$rowHeight:23.52%;
	//$rowMarignBottom:1.96%;