Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (114 sloc) 3.5 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/984gs.css">
<!-- <script type="text/javascript" src=""></script> -->
<title>984px grid system</title>
<style type="text/css">
body {
font: 14px/1.5 Arial, Helvetica, sans-serif;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: url(images/groovepaper.png)
}
p{font-size: 14px}
h1{font-size: 48px}
h2{font-size: 36px}
h3{font-size: 24px}
h4{font-size: 21px}
h5{font-size: 18px}
h6{font-size: 16px}
.container {
width: 984px;
margin: 0 auto;
background: url(images/container-bg.png) repeat-y
}
.container_12 {
margin-bottom: 20px;
}
.container_12 p {
border: 1px solid #0099CC;
padding: 10px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
background: #FFF5EA;
}
</style>
</head>
<body>
<div class="conteiner_12" style="margin-bottom:20px">
<h1>984px grid system</h1>
<h6>984px total width, 974px wide with 10px side margins</h6>
<h6>12 columns at 72px, 10px gutters</h6>
</div>
<div class="container">
<div class="container_12">
<div class="grid_1"><p>grid_1</p></div>
<div class="grid_11"><p>grid_11</p></div>
</div>
<div class="container_12">
<div class="grid_2"><p>grid_2</p></div>
<div class="grid_10"><p>grid_10</p></div>
</div>
<div class="container_12">
<div class="grid_3"><p>grid_3</p></div>
<div class="grid_9"><p>grid_9</p></div>
</div>
<div class="container_12">
<div class="grid_4"><p>grid_4</p></div>
<div class="grid_8"><p>grid_8</p></div>
</div>
<div class="container_12">
<div class="grid_5"><p>grid_5</p></div>
<div class="grid_7"><p>grid_7</p></div>
</div>
<div class="container_12">
<div class="grid_6"><p>grid_6</p></div>
<div class="grid_6"><p>grid_6</p></div>
</div>
<div class="container_12">
<div class="grid_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="grid_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="grid_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="grid_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="container_12">
<div class="grid_4">
<p>應全料明選速従記岩朝日広断文。直争金幕芸女職利縄案無労仙重入航表大。掛愛後香検央借報</p>
</div>
<div class="grid_4">
<p>應全料明選速従記岩朝日広断文。直争金幕芸女職利縄案無労仙重入航表大。掛愛後香検央借報</p>
</div>
<div class="grid_4">
<p>應全料明選速従記岩朝日広断文。直争金幕芸女職利縄案無労仙重入航表大。掛愛後香検央借報</p>
</div>
</div>
</div>
</body>
</html>