|
|
@@ -1,592 +0,0 @@
|
|
|
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
|
-<head>
|
|
|
-<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
|
-<title>960 Grid System — Demo</title>
|
|
|
-<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
|
|
|
-<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
|
|
|
-<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
|
|
|
-<style type="text/css" media="all">
|
|
|
-
|
|
|
-body
|
|
|
-{
|
|
|
- background: #123;
|
|
|
- border-top: 5px solid #000;
|
|
|
- color: #333;
|
|
|
- font-size: 11px;
|
|
|
- padding: 20px 0 40px;
|
|
|
-}
|
|
|
-
|
|
|
-a
|
|
|
-{
|
|
|
- color: #fff;
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-a:hover
|
|
|
-{
|
|
|
- text-decoration: underline;
|
|
|
-}
|
|
|
-
|
|
|
-h1
|
|
|
-{
|
|
|
- font-family: Georgia, serif;
|
|
|
- font-weight: normal;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-h2
|
|
|
-{
|
|
|
- padding: 20px 0 0;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-p
|
|
|
-{
|
|
|
- border: 1px solid #666;
|
|
|
- overflow: hidden;
|
|
|
- padding: 10px 0;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.container_12
|
|
|
-{
|
|
|
- background: #fff url(img/12_col.gif) repeat-y;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.container_16
|
|
|
-{
|
|
|
- background: #fff url(img/16_col.gif) repeat-y;
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<h1>
|
|
|
- <a href="http://960.gs/">960 Grid System</a>
|
|
|
-</h1>
|
|
|
-<div class="container_12">
|
|
|
- <h2>
|
|
|
- 12 Column Grid
|
|
|
- </h2>
|
|
|
- <div class="grid_12">
|
|
|
- <p>
|
|
|
- 940px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_12 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1 -->
|
|
|
- <div class="grid_11">
|
|
|
- <p>
|
|
|
- 860px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_11 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_2">
|
|
|
- <p>
|
|
|
- 140px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_2 -->
|
|
|
- <div class="grid_10">
|
|
|
- <p>
|
|
|
- 780px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_10 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_3">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_3 -->
|
|
|
- <div class="grid_9">
|
|
|
- <p>
|
|
|
- 700px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_9 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_4">
|
|
|
- <p>
|
|
|
- 300px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_4 -->
|
|
|
- <div class="grid_8">
|
|
|
- <p>
|
|
|
- 620px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_8 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_5">
|
|
|
- <p>
|
|
|
- 380px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_5 -->
|
|
|
- <div class="grid_7">
|
|
|
- <p>
|
|
|
- 540px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_7 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_6">
|
|
|
- <p>
|
|
|
- 460px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_6 -->
|
|
|
- <div class="grid_6">
|
|
|
- <p>
|
|
|
- 460px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_6 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 suffix_11">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.suffix_11 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_1 suffix_10">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_1.suffix_10 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_2 suffix_9">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_2.suffix_9 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_3 suffix_8">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_3.suffix_8 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_4 suffix_7">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_4.suffix_7 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_5 suffix_6">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_5.suffix_6 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_6 suffix_5">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_6.suffix_5 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_7 suffix_4">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_7.suffix_4 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_8 suffix_3">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_8.suffix_3 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_9 suffix_2">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_9.suffix_2 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_10 suffix_1">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_10.suffix_1 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_11">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_11 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_6">
|
|
|
- <div class="grid_1 alpha">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.alpha -->
|
|
|
- <div class="grid_5 omega">
|
|
|
- <p>
|
|
|
- 380px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_5.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_3 alpha">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_3.alpha -->
|
|
|
- <div class="grid_3 omega">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_3.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- </div>
|
|
|
- <!-- end .grid_6 -->
|
|
|
- <div class="grid_6">
|
|
|
- <div class="grid_3 alpha">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_3.alpha -->
|
|
|
- <div class="grid_3 omega">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_3.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 alpha">
|
|
|
- <p>
|
|
|
- 60px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.alpha -->
|
|
|
- <div class="grid_5 omega">
|
|
|
- <p>
|
|
|
- 380px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_5.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- </div>
|
|
|
- <!-- end .grid_6 -->
|
|
|
- <div class="clear"> </div>
|
|
|
-</div>
|
|
|
-<!-- end .container_12 -->
|
|
|
-<div class="container_16">
|
|
|
- <h2>
|
|
|
- 16 Column Grid
|
|
|
- </h2>
|
|
|
- <div class="grid_16">
|
|
|
- <p>
|
|
|
- 940px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_16 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1 -->
|
|
|
- <div class="grid_15">
|
|
|
- <p>
|
|
|
- 880px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_15 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_2">
|
|
|
- <p>
|
|
|
- 100px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_2 -->
|
|
|
- <div class="grid_14">
|
|
|
- <p>
|
|
|
- 820px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_14 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_3">
|
|
|
- <p>
|
|
|
- 160px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_3 -->
|
|
|
- <div class="grid_13">
|
|
|
- <p>
|
|
|
- 760px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_13 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_4">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_4 -->
|
|
|
- <div class="grid_12">
|
|
|
- <p>
|
|
|
- 700px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_12 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_5">
|
|
|
- <p>
|
|
|
- 280px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_5 -->
|
|
|
- <div class="grid_11">
|
|
|
- <p>
|
|
|
- 640px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_11 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_6">
|
|
|
- <p>
|
|
|
- 340px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_6 -->
|
|
|
- <div class="grid_10">
|
|
|
- <p>
|
|
|
- 580px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_10 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_7">
|
|
|
- <p>
|
|
|
- 400px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_7 -->
|
|
|
- <div class="grid_9">
|
|
|
- <p>
|
|
|
- 520px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_9 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_8">
|
|
|
- <p>
|
|
|
- 460px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_8 -->
|
|
|
- <div class="grid_8">
|
|
|
- <p>
|
|
|
- 460px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_8 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 suffix_15">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.suffix_15 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_1 suffix_14">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_1.suffix_14 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_2 suffix_13">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_2.suffix_13 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_3 suffix_12">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_3.suffix_12 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_4 suffix_11">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_4.suffix_11 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_5 suffix_10">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_5.suffix_10 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_6 suffix_9">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_6.suffix_9 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_7 suffix_8">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_7.suffix_8 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_8 suffix_7">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_8.suffix_7 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_9 suffix_6">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_9.suffix_6 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_10 suffix_5">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_10.suffix_5 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_11 suffix_4">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_11.suffix_4 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_12 suffix_3">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_12.suffix_3 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_13 suffix_2">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_13.suffix_2 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_14 suffix_1">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_14.suffix_1 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 prefix_15">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.prefix_15 -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_8">
|
|
|
- <div class="grid_1 alpha">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.alpha -->
|
|
|
- <div class="grid_7 omega">
|
|
|
- <p>
|
|
|
- 400px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_7.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_4 alpha">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_4.alpha -->
|
|
|
- <div class="grid_4 omega">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_4.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- </div>
|
|
|
- <!-- end .grid_8 -->
|
|
|
- <div class="grid_8">
|
|
|
- <div class="grid_4 alpha">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_4.alpha -->
|
|
|
- <div class="grid_4 omega">
|
|
|
- <p>
|
|
|
- 220px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_4.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- <div class="grid_1 alpha">
|
|
|
- <p>
|
|
|
- 40px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_1.alpha -->
|
|
|
- <div class="grid_7 omega">
|
|
|
- <p>
|
|
|
- 400px
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- end .grid_7.omega -->
|
|
|
- <div class="clear"> </div>
|
|
|
- </div>
|
|
|
- <!-- end .grid_8 -->
|
|
|
- <div class="clear"> </div>
|
|
|
-</div>
|
|
|
-<!-- end .container_16 -->
|
|
|
-</body>
|
|
|
-</html>
|