CSS 基础CSS与972px网格系统

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 基础CSS与972px网格系统相关的知识，希望对你有一定的参考价值。

/*////////////////////////////////////////////////////////////////////


M A L I K A H O L I C
972 Grid System

Author			: Hendy Nurrizal
Twitter			: HendyNurrizal
Author URL		: opencart-themes.com
Version			: 1.7
Codename		: betawi
Last Update		: Apr 30, 2011

Copyright © 2011. Opencart-themes.com
Licensed under GPL and MIT.


////////////////////////////////////////////////////////////////////*/



/* !>>>>>   PREFERENCES   <<<<< */

@main-color				: #FF3366;
@serif					: @cambria;
@san-serif				: @lucida;
@monospace				: @courier;

@link-color				: @main-color;
@visited-link-color		: @main-color;
@active-link-color		: @main-color;

@base-font-color		: #404040;
@base-font				: @san-serif;

@page-bg-color			: #FFF;
@code-font				: @monospace;

/* Heading Style */
@heading-font			: @serif;
@heading-font-style		: normal;
@heading-font-weight	: normal;

/* Table */
@table-head-color		: #CCC;
@table-border			: 1px solid #DDD;


/* !>>>>>   WEB TYPOGRAPHY   <<<<< */

/* Serif */
@palatino	: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
@baskerville: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
@cambria	: Cambria, Georgia, serif;
@hoefler	: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
@droid		: 'Droid Serif', "Baskerville old face", Garamond, "Times New Roman", serif;

/* Sans-serif */
@gillsans	: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
@trebuchet: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
@verdana	: Verdana, Geneva, sans-serif;
@lucida		: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
@helvetica	: "Helvetica Neue", Helvetica, Arial, sans-serif;
@lato		: 'Lato', arial, serif;

/* Monospace */
@courier	: "Courier New", Courier, monospace;
@consolas	: Consolas, "Lucida Console", Monaco, monospace;



/* !>>>>>   CSS RESET   <<<<< */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body {line-height:1;color:black;background:white;}table {border-collapse:separate;border-spacing:0;}caption, th, td {text-align:left;font-weight:normal;}blockquote:before, blockquote:after,q:before, q:after {content:"";}blockquote, q {quotes:"" "";}

/* HTML5 tags */
header, section, footer,aside, nav, article, figure {display: block;}


/* !>>>>>   Main Styles   <<<<< */

html {
	font-family: @base-font;
	font-size: 62.5%; /* Scale from 16px to 10px based font */
	min-width: 992px;
	}
body { 
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5em;	
	color:@base-font-color;
	background-color: @page-bg-color;
	}



/* !>>>>>   W3C Default style sheet for HTML 4   <<<<< */

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }



/* !>>>>>   Heading   <<<<< */

h1,h2,h3,h4,h5,h6 { font-family: @heading-font; font-style: @heading-font-style;font-weight: @heading-font-weight;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
h1 				{ font-size: 3em; line-height: 1em; margin: 1em 0 0.25em; } 
h2 				{ font-size: 2.4em; line-height: 1em;margin: 1em 0 0.25em; } 
h3 				{ font-size: 2em; line-height: 1em; margin: 1em 0 0.25em; } 
h4 				{ font-size: 1.5em; line-height: 1.20; margin: 1em 0 0.25em; } 
h5 				{ font-size: 1.25em;line-height: 1em;font-weight: bold; margin: 1em 0 0.25em; } 
h6 				{ font-size: 1.25em;line-height: 1em;font-weight: bold; } 



/* !>>>>>   Text Formating   <<<<< */

abbr, acronym 	{ cursor:help; border-bottom:.1em dotted; }
b, strong 		{ font-weight: bolder;}
big 			{ font-size: larger; } 
blockquote, q   { margin: 0 4em; font-style: italic; padding: 1em; font-family: @serif; font-size: 1.2em }
i, cite, em, dfn,
var, address    { font-style: italic }
del  			{ text-decoration: line-through }
small, sub, sup { font-size:smaller; }
hr              { border: 1px solid #CCC }
sub             { vertical-align: sub }
sup             { vertical-align: super }
p 				{ margin-bottom: 1em; }	
br:before       { content: "\A"; white-space: pre-line }



/* !>>>>>   Code Formating   <<<<< */

pre, tt, code, 
kbd, samp 		{ font-family: @code-font; line-height: 1.5em; padding: .25em .5em; font-size: 1.1em; }
pre				{ border: 1px solid #AAA; overflow: scroll; padding: 1em; white-space: pre }



/* !>>>>>   List   <<<<< */

li ul, li ol 	{ margin:0 1.5em; } 
ul, ol 			{ margin: 0 1.5em 1.5em 3em; } 
ul 				{ list-style-type: disc; } 
ol 				{ list-style-type: decimal; } 
dl 				{ margin: 0 0 1.5em 0; } 
dl dt 			{ font-weight: bold; } 
dd 				{ margin-left: 1.5em;}
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }

.list			{ border-bottom: 1px solid #DDD; margin-bottom: 10px; padding-bottom: 10px; }


/* !>>>>>   Forms   <<<<< */

form 			{ font-family: @san-serif }
div.form-slot {
	background-color: #F4F4F4;
	border: 1px solid #CCC;
	padding: 15px;
	}
	div.form-slot h4 {
		font-family: @helvetica;
		font-weight: bold;
		line-height: 1em;
		margin: 0 0 15px;
		}
	div.form-slot p {
		font-size: 11px;
		line-height: 1.2em;
		}
	div.form-slot .separator {
		border-bottom: 1px solid #CCC;
		margin-bottom: 15px;
		}
input[type=reset], input[type=submit], input[type=button], button {
	background-color: #CCC;
	border: 1px solid #AAA;
	float: left;
	font-weight: bold;
	margin: 2px;
	padding: 5px 8px;
	}
input[type=text], input[type=password] {
	height: 18px; 
	margin: .2em 0;
	max-width: 268px;
	}
input[type=file] {
	height: 24px;
	margin-bottom: 4px;
	padding: 5px;
	}	
textarea 		{ min-width: 120px;}
optgroup 		{ padding: 0 1em; font-weight: bold; }
option 			{ line-height: 1.5em; padding: 0 1em; }
label {
	cursor: default;
	display: block;
	font-weight: bold;
	padding: 0 15px 0 0;
	text-align: left;
	}
	label.radio {
		cursor: pointer;
		width: auto;
		font-weight: normal;
		padding: 0 20px 0 0;
		}
		label.radio input {
			cursor: pointer;
			height: auto;
			margin: 0;
			}
	label small {
		color: #666;
		display: block;
		font-family: @helvetica;
		font-weight: normal;
		line-height: 1.2em;
		}
fieldset {
	border: 1px solid #DDD;
	display: inline;
	margin-bottom: 1em;
	padding: 10px;
	}
	fieldset fieldset {
		border: 1px solid #AAA;
		display: inline;
		padding: .25em 1.5em 1em;
		width: auto;
		}
legend {
	color: @main-color;
	font-family: @serif;
	font-size: 1.4em;
	font-style: italic;
	padding: .5em;
	}
	fieldset fieldset legend {
		color: @base-font-color;
		font-size: 1.2em;
		font-style: italic;
		margin: 0;
		}
button, textarea,
input, select   { display: inline-block }

/* make buttons play nice in IE */
button {  width: auto; overflow: visible; }

label, input[type=button], input[type=submit], button { cursor: pointer; }


/* !>>>>>   Specific Form Elements   <<<<< */
/* !Overrides basic styles */
fieldset p {
	padding: 0 10px;
	}
fieldset.one-line {
	border-bottom: none;
	border-left: none;
	border-right: none;
	display: block;
	height: 1px;
	}
.form-unit {
	border: 1px solid #FFF;
	padding: 5px 10px;
	}
label.radio {
	border: 1px solid #FFF;
	padding: 10px;
	}
	.form-unit.over,
	label.radio.over {
		background-color: #fff4e6;
		border: 1px solid #fff0d5;
		}
.grid-4 fieldset { width: 206px; }
.grid-5 fieldset { width: 268px; }
.grid-6 fieldset { padding: 15px 30px; width: 290px; }
.grid-6 input[type=text],
.grid-6 input[type=password] { width: 260px; }
.grid-6 select { max-width: 260px; }
.grid-12 .buttons {
	border-top: 1px dotted #DDD;
	margin-top: 15px;
	padding: 15px 0;
	}

/* !>>>>>   Tables   <<<<< */

table {
	border: 0;
	display: table;
	margin-bottom: 1.4em;
	max-width: 100%;
	width:100%;
	}
tfoot {
	font-style: italic;
	display: table-footer-group;
	text-align: center;
	}
tfoot th {
	background-color: @table-head-color*1.2;
	border-top: 3px double @table-head-color;
	}
td, th { 
	border-bottom: @table-border;
	display: table-cell;
	padding: .5em 1em;
	vertical-align: middle;
	}
th {
	font-weight: bolder; 
	text-align: center 
	}
caption {
	display: table-caption;
	font-family: @serif;
	font-size: 1.4em;
	font-style: italic;
	padding: 1em;
	text-align: center;
	}
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
col             { display: table-column }
colgroup        { display: table-column-group }
thead th 		{ background-color: @table-head-color; }
tr.even td 		{ background-color: @table-head-color*1.2;}
td[colspan]		{ text-align: center; }



/* !>>>>>   Links   <<<<< */

a, a:link, a:visited, 
a:active 		{ text-decoration: underline; cursor: pointer }
a:link 			{ color: @link-color; }
a:visited 		{ color: @visited-link-color; }
a:active 		{ color: @active-link-color; }
:focus          { outline: thin dotted invert }



/* !>>>>>   Global Clear Fix   <<<<< */

article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }/* our ie CSS file */article { zoom:1; }aside { zoom:1; }div { zoom:1; }footer { zoom:1; }form { zoom:1; }header { zoom:1; }nav { zoom:1; }section { zoom:1; }ul { zoom:1; }



/* !>>>>>   Text & Container Alignment   <<<<< */

.align-left,
.alignleft 		{ float: left; padding: 0 18px 18px 0;}
.align-right,
.alignright 	{ float: right; padding: 0 0 18px 18px; }
.float-left 	{ float: left; }
.float-right 	{ float: right; }
.text-left 		{ text-align: left; }
.text-center 	{ text-align: center; }
.text-right 	{ text-align: right; }



/* !>>>>>   Rounded Container   <<<<< */

round			{
	-moz-border-radius:10px; 
	-webkit-border-radius:10px;
	border-radius:10px;
	}
.round > .round	{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	}


/* !>>>>>   Misc   <<<<< */

.more-link:after, 
.more-link::after{ /* CSS3 */
	content:" »";
}

/* !>>>>>   Message   <<<<< */

.success, .attention, .warning, .wait, .error, .tooltip { font-family: @lucida }
.success,
.attention {
	padding: 10px;
	margin-bottom: 10px;
	background: #E4F1C9;
	border: 1px solid #A5BD71;
	font-size: 11px;
	text-align: center;
}
.warning {
	color: #b20202;
	padding: 5px 0px;
	margin-bottom: 10px;
	background: #FFDFE0;
	border: 1px solid #FF9999;
	font-size: 11px;
	text-align: center;
}
.wait {
	padding: 5px 0px;
	margin-bottom: 10px;
	background: #FBFAEA;
	border: 1px solid #EFEBAA;
	font-size: 11px;
	text-align: center;
}
.required {
	color: #FF0000;
	font-weight: bold;
}
.error {
	color: #FF0000;
	display: block;
}
.help {
	cursor: pointer;
	color: #666;
	display: block;
	font-family: @helvetica;
	font-weight: normal;
	font-size: smaller;
	line-height: 1.2em;
	margin-bottom: 1em;
}
.tooltip {
	border: 1px solid #FDDA5C;
	background: #FBFF95;
	padding: 10px;
	font-size: 11px;
	line-height: 1.2em;
	width: 250px;
}
.attention img {
	display: block;
	float: right;
	}

/* !>>>>>   972px - 16 Grids Framework - by Malikaholic.com   <<<<< */

.container-slot { margin: 0 auto;	padding: 0 10px; width: 972px; }
	
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, grid-16 { float: left; margin-left: 20px; }
.first { margin-left: 0; clear: left; }
.last { clear: right; }
	
.grid-1 { width: 42px; }
.grid-2 { width: 104px; }
.grid-3 { width: 166px; }
.grid-4 { width: 228px; }
.grid-5 { width: 290px; }
.grid-6 { width: 352px; }
.grid-7 { width: 414px; }
.grid-8 { width: 476px; }
.grid-9 { width: 538px; }
.grid-10 { width: 600px; }
.grid-11 { width: 662px; }
.grid-12 { width: 724px; }
.grid-13 { width: 786px; }
.grid-14 { width: 848px; }
.grid-15 { width: 910px; }
.grid-16 { width: 972px; margin: 0 }

/* !Push & Pull */
.push-1 { margin-left: 62px; }
.push-2 { margin-left: 124px; }
.push-3 { margin-left: 186px; }
.push-4 { margin-left: 248px; }
.push-5 { margin-left: 310px; }
.push-6 { margin-left: 372px; }
.push-7 { margin-left: 434px; }
.push-8 { margin-left: 496px; }
.push-9 { margin-left: 558px; }
.push-11 { margin-left: 620px; }
.push-11 { margin-left: 744px; }
.push-12 { margin-left: 806px; }
.push-13 { margin-left: 868px; }
.push-14 { margin-left: 930px; }

.pull-1 { margin-right: 62px; }
.pull-2 { margin-right: 124px; }
.pull-3 { margin-right: 186px; }
.pull-4 { margin-right: 248px; }
.pull-5 { margin-right: 310px; }
.pull-6 { margin-right: 372px; }
.pull-7 { margin-right: 434px; }
.pull-8 { margin-right: 496px; }
.pull-9 { margin-right: 558px; }
.pull-11 { margin-right: 620px; }
.pull-11 { margin-right: 744px; }
.pull-12 { margin-right: 806px; }
.pull-13 { margin-right: 868px; }
.pull-14 { margin-right: 930px; }

.liner { border-left: 1px solid #F00; border-right: 1px solid #F00;}

/* When container using border line, the grid will reduce its width */
.grid-1.liner { width: 40px; }
.grid-2.liner { width: 102px; }
.grid-3.liner { width: 164px; }
.grid-4.liner { width: 226px; }
.grid-5.liner { width: 288px; }
.grid-6.liner { width: 350px; }
.grid-7.liner { width: 412px; }
.grid-8.liner { width: 474px; }
.grid-9.liner { width: 536px; }
.grid-10.liner { width: 598px; }
.grid-11.liner { width: 660px; }
.grid-12.liner { width: 722px; }
.grid-13.liner { width: 784px; }
.grid-14.liner { width: 846px; }
.grid-15.liner { width: 908px; }
.grid-16.liner { width: 970px; margin: 0 }

/* Inside bordered div container */
.liner .first + div,
.liner .liner .first + div,
.liner .last,
.liner .liner .last {
	margin-left: 19px;
	}
.liner .first + .last,
.liner .liner .first + .last {
	margin-left: 18px;
	}	
.liner div > .last,
.liner .liner div > .last,
.liner div .first + .last,
.liner .liner div .first + .last {
	margin-left: 20px;
	}
	
	
	
/* !>>>>>   DIAGNOSTICS   <<<<< */

.debug		{ background:url(../img/css/baseline.gif) 0 4px #fff!important; }
.debug body	{ background:url(../img/css/grid.png) top center repeat-y!important; }

/*
Red border == something is wrong
Yellow border == something may be wrong, you should double check.
Green border == perfect, nice one!
*/

/* Styles */
.debug [style]{
	/* Inline styles aren’t great, can this be avoided? */
	outline:5px solid yellow;
}

/* Images */
.debug img{
	/* Images without alt attributes are bad! */
	outline:5px solid red;
}
.debug img[alt]{
	/* Images with alt attributes are good! */
	outline-color:green;
}
.debug img[alt=""]{
	/* Images with empty alt attributes are okay in the right circumstances. */
	outline-color:yellow;
}

/* Links */
.debug a{
	/* Links without titles are yellow, does your link need one? */
	outline:5px solid yellow;
}
.debug a[title]{
	/* Links with titles are green, title attributes can be very useful! */
	outline-color:green;
}
.debug a[href="#"]{
	/* Were you meant to leave that hash in there? */
	outline-color:yellow;
}
.debug a[target]/*,
.debug a[onclick],
.debug a[href*=javascript]*/{
	/* What were you thinking?! */
	outline-color:red;
}

以上是关于CSS 基础CSS与972px网格系统的主要内容，如果未能解决你的问题，请参考以下文章

增加 960px CSS 网格的宽度

12 列 CSS 网格布局和侧边距/外边距

CSS网格布局调整内容

css 墨水网格780px - https://github.com/zurb/ink

CSS 网格和媒体查询 [重复]

像 CSS 中的弹性项目一样收缩网格项目