Drupal主题的基础样式—reset、base、layout、print
从事Drupal工作有一年多了，每每一个新项目开始时，都不免一些重复的样式工作设置，这次特意花了点时间总结了一下，贴出来与大家一起分享。当然这里虽然说是在Drupal中应用，我们也可以应用在不是Drupal的项目中。今天我们主要从以下几个方面来讲述，第一是重置样式reset.css；第二是基本样式base.css；第三是网格布局样式layout.css；最后是打印样式print.css。这里需要注意的一点是，在Drupal中的一般项目中很少应用grid布局，这里特意把这一块放进来是为了方便其它项目的布局设置。
我们费话少说，现在就请大家跟我一起进入今天的主题吧
一、重置样式：reset.css
我想对于重置样式reset.css大家一定都不会陌生，YUI、Eric Meyer这些重置样式都是当今天比较流行的，另外有Condensed Meyer Reset简化Eric Meyer的样式。据说Eric Meyer也是源自于YUI，而那份简化的样式又基本上回归到了YUI样式。这里我们就不花太多时间去考究这些变化，但是感兴趣的朋友可以去查阅相关这方面的资料。如今为了配合HTML5的使用，也相应的有一份html5的reset.css，这一份reset.css大家也可以从这里下载。好了现在准备工作也差不多了，以上这些资料可以让我们参考制作出属于自己的reset.css。如果对Drupal熟悉的朋友都会知道，我们自己没有必要去写这样的重置样式呀，这种说法我个人不太认同，当我们制作的theme是在tao,zen等主题的基础上，这样一来我们可以没有必要在写一个reset.css文件，不然我们做了重复没用的工作，但有一点值得提的是，如果我们不在任何base theme的基础上制作主题的话，这个重置样式reset.css文件还是必不可少的。说到这里有的朋友肯定会问，我的项目又不是在drupal下，那么这个reset.css文件对我还有意义吗？回答当然是肯定的，因为重置样式在任何一个项目中都是非常有用的，写的好的会给后期工作减少很多bug，但是写得不好的也会给后期的工作带来很多意想不到的bug。所以还是请大家仔细思考一下，如何写一个适合自己的reset.css文件，现在我贴出一个我自己整理的重置样式，仅供参考。
@charset 'utf-8';
/**
*Copyright (c) 2011-04-09, W3cplus.com. All rights reserved
*Based on YIU and Eric Meyer
*/
/*Remove margin and padding*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,
textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
/*Html5 elements for older browsers*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
:focus {
outline: 0;
}
address,caption,cite,code,
dfn,em,strong,th,var,optgroup {
font-style: normal;
font-weight: weight;
}
abbr[title],
dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
li {
list-style: none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
code,kbd,samp,tt {
font-size: 100%;
}
input,button,textarea,
select,optgroup,option {
font: inherit inherit inherit inherit;
}
input,
select {
vertical-align:middle;
}
我在这里简单的讲一下这里的变化
1、重置margin和padding
前面网上一度流行的重置margin和padding是把所有元素的margin和padding都重置为0，如：
* {
margin:0;
padding:0;
}
这样方便，不管三七二十一，把他们都归0，但是有一些没有必要的元素也设置了，比如说div,span等，这些元素默认的margin和padding就是0，所以我在这里去掉了一些没有必要的元素。大家还可以去参考一下YUI和Eric Meyer的设置，制作出属于自己的样式。
2、设置html5新元素样式
HTML5对于前端人员来说是一个新东西，至今有一些老的浏览器（特别是IE9以下版本）是不支持这些新元素，为了能让他们配合js识别，我们把这一段代码加上：
/*Html5 elements for older browsers*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
3、设置默认色彩
有一些重置样式给html和body加上了默认色彩
html,
body {
background-color: #fff;
color: #000;
}
这样把背景颜色设置为white，把前景色设置为black。我个人认为，这个还是需要根据用户需求去设置，因为其中一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重 置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的Firefox扩展来自定 义页面。但不得不说，只会用“选项”来调背景色的用户更多，而同时，如果设计本身就有其他背景色的话，我们可以设置背景色。但我认不我们不需要放进reset.css里。这里是重置样式表的地方，不是我们设计的地方。这样一来我们最好把他放到设计里面去，比如说我们一段设置放进base.css样式中，呆会我们在base.css中会碰到的。
4、重置字体样式
在YUI中分了多段，而在最新的Eric Meyer中把去掉了很多，只留下了font-size:100%;font-weight:normal;我个人认为，YUI的太多了，我们极少用到的元素也放进来了，而Eric Meyer又去除的太干净了，我在这里主要留下了我们在项目会用到的一些元素，例如 address, caption, cite, code, dfn,em, strong, th, var, optgroup等，具体的大家可以看上面的代码，这里就不在重复了。
5、行高line-height
很多地方会在body中加上一条line-height:1来初始化行高。因为行高默认所有元素都会继承的，所以给body设置行高为1是可以的。但是行高设为1时候，英文能照常阅读，但中文就无法阅读了，行间距过于紧密导致容易看错 行。我在网上查阅，通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我个人建议把行高设置为1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时 尤为明显。所以，重置的原则是好的，但切不可重置为1。所以制作的项目不同语言版本，行高最好是设置成不同，所以我们最好还是不要把行高放到reset.css样式表中来，就算要放进来，我们最好也不要设置为1，具体原因，我想大家都知道了。
6、列表样式
在YUI中列表设置的是
li {
list-style: none;
}
而在Eric中设置的是
ul,ol {
list-style:none;
}
我个认为YUI的设置更为恰当，因为列表的样式本来就是在li中，所以需要设置的话还是选择YUI的设置。
7、表格样式
在表格方面，都比较统一。均是
table {
border-collapse:collapse;
border-spacing:0;
}
8、下标和上标
我 在这里把下标和上标移出了reset.css文件，个人认为他们关于这两个元素都设置的不太理想，经查阅多方资料，我个人认为还是写成下面要更理想一些
/*set sub,sup without affecting line-height*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
top: -0.5em;
}
sup {
bottom: -0.25em;
}
因为这样，所以我把这段代码放进了base.css样式表中，而没有放入reset.css初始化。
9、重置引用元素的双引号
某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以我们有必要重置他。
10、链接
因为链接涉及到到不同的色彩，我们在reset.css重置也只能是重置他有没有下划线，所以我认为没有这个必要，既然后面还是需要设置，我们何不一起把他放到base.css中去设置呢？
基于上述原因，我改写出上面那个reset.css样式文件。
二、base.css样式
从字面上大家都能理解出是基础样式设置，是的，因为有许多元素在不同的项目中都需要去设置，而且又有许多相同之处，只是稍改字体颜色，字号，边框等等属性，为了能偷懒，所以我就制作出一个base.css样式，方便在每一个项目中应用，同样先把这部分代码贴出分享（base.css中涉及到的颜色值，字体，字号，边框，宽度，高度等属性值，大家可以根据自己需求修改）
/**
*Font style
*
body {
font: 13px/1.5 sans-serif;
*font-size: small;/*for IE*/
*font-size: x-small;/*for IE in quirks mode*/
}
select,input,button,textarea {
font: 99% sans-serif;
}
pre,code,kbd,samp,tt {
font-family: monospace,sans-serif;
}
/*Headers(h1,h2,etc) have no default margin,you will want to define those yourself
*Set body font 13px
* PXtoEM conversion made simple:http://pxtoem.com
* */
h1 {
font-size: 1.846em;/*per:184.6% pix:24px*/
}
h2 {
font-size: 1.538em;/*Per:153.8% pix:20px*/
}
h3 {
font-size: 1.231em;/*per:123.1% pix:16px*/
}
h4 {
font-size: 1.154em;/*per:115.4% pix:15px*/
}
h5,h6 {
font-size: 1em;/*per:100% pix: 13px*/
}
/**
* minimal base styles
*/
html {
font-size: 100.01%;/*To Prevent bugs in IE and Opera*/
height: 100%;/*Using height 100% on html and body allows to style containers with a 100% height*/
overflow-y: scroll;/*The overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content*/
}
body {
background-color: #fff;/*Not all browsers set white as the default background color*/
color: #444;/*#444 looks better than black*/
height: 100%;
}
/*Elements have bold*/
h1,h2,h3,h4,h5,h6,strong,th,dt,b {
font-weight: bold;
}
/*Links
*Styling for links and visited links as well as for links in a hovred,focus and active state
* make sure to keep these rules in that order, with :active being last
*/
a,a:link {
color: #ace;/*you will want to change the color*/
outline: none;
}
a:link {
-webkit-tap-highlight-color: #ff5e99;/*you will want to change the color*/
}
a:visited {
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;/*add a bottom line for text*/
}
a:focus,:focus {
outline: thin dotted;
}
a:hover,a:active {
outline: none;
}
/*This is to prevent border from showing around fieldset and images*/
fieldset,img {
border: none 0;
}
/*This is to prevent a gap from showing below images in some browsers*/
img {
vertical-align: bottom;
-ms-interpolation-mode: bicubic;/*bicubic resizing for non-native sized IMG*/
}
pre {
white-space: pre;/*CSS2*/
white-space: pre-wrap;/*CSS2.1*/
white-space: pre-line;/*CSS3*/
word-wrap: break-word;/*IE*/
}
/*set sub,sup without affecting line-height*/
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
top: -0.5em;
}
sup {
bottom: -0.25em;
}
small {
font-size: 85%;
}
/*Clear floats
*The Magnificent CLEARFIX:Updated fo prevent margin-collapsing on child elements
*/
.clearfix:before,.clearfix:after {
content:"\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
zoom: 1;/*IE<8*/
}
.clearfix:after {
clear: both;
}
* html .clearfix {
zoom: 1; /* IE6 */
}
*:first-child+html .clearfix {
zoom: 1; /* IE7 */
}
/*Hide only visually,but have it available for screenreaders*/
.hidden {
border: 0 !important;
clip: rect(1px 1px 1px 1px);/*IE<8*/
clip: rect(1px,1px,1px,1px);
height: 1px !important;
margin: -1px;
overflow: hidden;
padding: 0 !important;
position: absolute !important;
width: auto;
}
/*
*Table
**/
/*All th should be centered unless they are in tbody*/
th {
text-align: center;
}
tbody th {
text-align: left;
}
td {
vertical-align: top;
}
/**
* Form elements
*/
form {
overflow: visible;
}
input:focus,textarea:focus,select:focus {
outline-width: 0;/*No outline border for Safary*/
}
input[type="text"],input[type="password"],
input[type="select"],input[type="search"],
input[type="file"],textarea,select {
border-radius: 3px;
-webkit-border-radius: 3px;
border-color: #c4c4c4 #e9e9e9 #e9e9e9 #c4c4c4;/*you will change the color*/
border-style: solid;
border-width: 1px;
padding: 3px 5px;
color: #777;
font-size: 12px;
width: 35%;
}
input:focus,textarea:focus {
-webkit-box-shadow:0 0 2px rgba(196,196,196,0.5);
box-shadow:0 0 2px rgba(196,196,196,0.5);
-webkit-focus-ring-color:none;
border-color:#c4c4c4;
background-color:#FFFFF0;
}
label {
font-weight: normal;
}
label.required:after {
content:"*";
color:red;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}
fieldset {
line-height: 1;/*line height helps to set the vertical alignment of radio buttons and check boxes*/
}
input[type="checkbox"] {
vertical-align: bottom;/*Vertical alignment of checkboxes*/
*vertical-align: baseline;/*IE7*/
}
input[type="radio"] {
vertical-align: text-bottom;/*Vertical alignment of radio buttons*/
}
input {
_vertical-align: text-bottom;/*Vertical alignment of input fields for IE6*/
}
select {
background-color: transparent;/*In Webkit/Mac, select fails to inherit color,font-*,etc if there is no other styling like background for example(border will do to)*/
}
/* Make button nice in IE
*This is to fix IE6 and IE7 which create extra right/left padding on buttons
* IMPORTANT: because IE6 does not understand the selector like input[type="button"],so you need to apply the class "form-btn" to all input of tpye="button" in your documents
*/
button,input[type="submit"],input[type="reset"],
input[type="button"],.form-btn {
width: auto;
*width: 0;
overflow: visible;
}
/*Hand cursor on clickable input elements*/
label,input[type="button"],input[type="submit"],
input[type="reset"],input[type="image"],button {
cursor: pointer;
}
/*Webkit browsers add a 2px margin outside the chrome of form elements*/
button,input,select,textarea {
margin: 0;
}
/* colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px;
-webkit-border-radius: 1px;
-webkit-box-shadow: 0px 0px 5px red;
box-shadow: 0px 0px 5px red;
}
/*Remove Textarea Scrollbars in IE*/
textarea {
overflow: auto;
}
legend {
*margin-left: -7px; /*IE<8, thnx ivannikolic*/
}
/**
*Messages && Error && Warning
*/
.error {
color: #666;
}
.warning {
color: #e09010;
}
.ok,
.status {
color: #008000;
}
input.error,textarea.error,select.error {
border: 1px solid #e5e5e5;
}
div.ok,span.ok,div.status,span.status,div.error,span.error,
div.warning,span.warning,div.messages {
border: 1px dotted #2d6ea8;
border-width: 1px 0;
margin: 0 0 15px;
padding: 5px 10px;
position: relative;
}
div.ok,span.ok,div.status,span.status,
div.messages.ok,div.messages.status {
background: #f0f5fb;
}
div.error,span.error,div.messages.error {
background: #ffc4c1;
}
div.warning,span.warning,div.messages.warning {
background: #fdfed2;
}
.messages h2 {
border: 0 !important;
clip: rect(1px 1px 1px 1px);/*IE<8*/
clip: rect(1px,1px,1px,1px);
height: 1px !important;
margin: -1px;
overflow: hidden;
padding: 0 !important;
position: absolute !important;
width: auto;
}
.messages li {
list-style-type: disc;
list-style-position: inside;
}
针对base.css有几点需要重点提出
1、pre元素
在YUI和Eric Meyer中pre是放在reset.css中设置其字体，这里有一点改变，就是让其不换行。如：
pre {
white-space: pre;/*CSS2*/
white-space: pre-wrap;/*CSS2.1*/
white-space: pre-line;/*CSS3*/
word-wrap: break-word;/*IE*/
}
2、边框样式
边框样式我在这里主要提一下fieldset和img两个元素，在Eric Meyer中把这些边框设置全部清除，而YUI还是保留在reset.css中，我认为留下还是有必要的，特别是对于链接里的图片，作用是非常好的。
/*This is to prevent border from showing around fieldset and images*/
fieldset,img {
border: none 0;
}
另外大家都知道img加上边框时，在一些浏览器下，底部分有3px的空间，我们在这里加上一条，就可以去除这个bug。
/*This is to prevent a gap from showing below images in some browsers*/
img {
vertical-align: bottom;
-ms-interpolation-mode: bicubic;/*bicubic resizing for non-native sized IMG*/
}
3、清除浮动clearfix
清除浮动有很多方法，在元素中加overflow:hidden;在浮动末尾加一个div，并加上clear:both等都是不错的方法，但常用的还是clearfix方法，这里应用了一种新的方法和大家一起共享
/*Clear floats
*The Magnificent CLEARFIX:Updated fo prevent margin-collapsing on child elements
*/
.clearfix:before,.clearfix:after {
content:"\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
zoom: 1;/*IE<8*/
}
.clearfix:after {
clear: both;
}
* html .clearfix {
zoom: 1; /* IE6 */
}
*:first-child+html .clearfix {
zoom: 1; /* IE7 */
}
4、隐藏元素
隐藏元素对大家来说并不陌生，应用的地方也很多，比如说用图片代替文字，不想让元素存在文档流中，大家第一个想的方法就是display:none;和text-indent:-9999em以及绝对定位到浏览器可视范围外。这个方法好是好，但对于一些使用阅读器的用户来说就存在一个问题，阅读器无法阅读。其实我们有一个新方法，就是clip剪切，这个方法可以鱼和熊掌兼得
/*Hide only visually,but have it available for screenreaders*/
.hidden {
border: 0 !important;
clip: rect(1px 1px 1px 1px);/*IE<8*/
clip: rect(1px,1px,1px,1px);
height: 1px !important;
margin: -1px;
overflow: hidden;
padding: 0 !important;
position: absolute !important;
width: auto;
}
5、Css3的选择器
我们在上面表单元素设置中运用了属性选择器，但对于一些老的浏览器就无法识别到，为了能让其兼容，我们需要在这些元素中加上一个class，比如说form-btn，在Drupal中常见的是form-submit。
/* Make button nice in IE
*This is to fix IE6 and IE7 which create extra right/left padding on buttons
* IMPORTANT: because IE6 does not understand the selector like input[type="button"],so you need to apply the class "form-btn" to all input of tpye="button" in your documents
*/
button,input[type="submit"],input[type="reset"],
input[type="button"],.form-btn {
width: auto;
*width: 0;
overflow: visible;
}
这里还涉及到一个button在IE浏览器的bug问题，我们在制作button时，当button显示内容越多，其两边增加的padding也越大，为了解决这个bug，我们需要对于进行统一的设置，制作出更好看好的button，如上所示，当然我们在前面有一篇《input 按钮在IE下兼容问题》，我们在这里详细介绍了解决办法，感兴趣的朋友可以去看看。
6、链接元素
我们大家都碰到过，链接点击后会留下一个虚线边框，其实我们可以设置outline来解决
/*Links
*Styling for links and visited links as well as for links in a hovred,focus and active state
* make sure to keep these rules in that order, with :active being last
*/
a,a:link {
color: #ace;/*you will want to change the color*/
outline: none;
}
a:link {
-webkit-tap-highlight-color: #ff5e99;/*you will want to change the color*/
}
a:visited {
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;/*add a bottom line for text*/
}
a:focus,:focus {
outline: thin dotted;
}
a:hover,a:active {
outline: none;
}
7、表单元素与文本的对其方式
大家一定在平实的制作中对表单元素与文本对齐方式很头痛，那么大家不外呼用用下面这种方法
input[type="checkbox"] {
vertical-align: bottom;/*Vertical alignment of checkboxes*/
*vertical-align: baseline;/*IE7*/
}
input[type="radio"] {
vertical-align: text-bottom;/*Vertical alignment of radio buttons*/
}
input {
_vertical-align: text-bottom;/*Vertical alignment of input fields for IE6*/
}
8、长文本域texteara
在IE浏览器中，texteara默认都会显示一个滚动条出来，那么有没有别的办法可以掉呢？让他需要的时候才出现，以达到和别的浏览器一致的效果呢？回答当然是肯定的，我们只需加上一个overflow: auto属性的设置就行了
/*Remove Textarea Scrollbars in IE*/
textarea {
overflow: auto;
}
9、信息提示块
最后顺便提一下信息提示块的样式，因为我们在填写表单或是进行别的操作，系统都会有一个例如操作正确、操作错误、操作警告的提示，我觉得drupal的这种思路不错，大家可以去了解一下。
三、网格布局样式
960 grids , YUI grids 等网格布局对于做前端的人员来说肯定不会不知道的，但对其具体的用法，我想还是有一些人没有弄清楚，我发现有一些朋友，直接到相关的网站在线制作一个网格布局，然后把相应的css文件下载下来，放到自己的项目中，就这样完事了。我认为这样是不怎么理想，因为有很多样式对我们来说根本就应用不上。最好的办法就是我们根据那种设计理念写出适合自己的网格布局样式，现在我列出我常用的三种网格布局的基本样式，以供大家参考
1、980PX布局：
/*
*Grids
*Content width: 980px
*marginright: 10px;
*/
.container {
width:980px;
margin:0 auto;
height:auto;
min-height:100%;
position:relative;
}
.c0,.c1, .c2, .c3,.c4,.c5,.c6,.c7,.c8,.c9 {
margin:0 10px 0 0;
display:inline;
float:left;
}
.c9 {
width:980px;
}
.c8 {
width:730px;
}
.c7 {
width:670px;
}
.c6 {
width:520px;
}
.c5 {
width:465px;
}
.c4 {
width:320px;
}
.c3 {
width:240px;
}
.c2 {
width:220px;
}
.c1 {
width:160px;
}
.c0 {
width:140px;
}
.full {
width:100%;
}
.inner {
padding:10px;
}
.first {
margin-left:0;
clear:left;
}
.last {
margin:0;
border:none;
}
这种布局是总宽度是980px，定义出常用块的基本尺寸，这里需要值得注意的是，不管是两栏还是三栏或者更多的布局，同一水平方向的最后一栏需要加上一个last的class，他主要是去除最后一方块的10px的右边距，才不会把窗口撑破。
2、960网格布局一
/*
*Content width: 960px
*12grids one grid=52px;
*marginleft and marginright 14px
*based on Wordpress theme
*/
.container {
margin: 0 auto;
text-align: left;
width: 960px;
}
.c1,.c2,.c3,.c4,.c5,.c6,
.c7,.c8,.c9,.c10,.c11,.c12 {
float: left;
display: inline;
margin: 0 14px;
}
.c1 {
width: 52px;
}
.c2 {
width: 132px;
}
.c3 {
width: 212px;
}
.c4 {
width: 292px;
}
.c5 {
width: 372px;
}
.c6 {
width: 452px;
}
.c7 {
width: 532px;
}
.c8 {
width: 612px;
}
.c9 {
width: 692px;
}
.c10 {
width: 772px;
}
.c11 {
width: 852px;
}
.c12 {
width: 932px;
}
我简单介绍一下这个布局的用法。我们这个布局的总宽度是960px,而且每一grid是52px,而其左右的两个边距都是14px。说得透明一点，其实他是从60px一个grid变异过来的。其内容真正宽度是932px。这个布局我们就没有必要加上前面那个last的class清除margin-right:14px。当然你也可以根据自己的需求改变。这种布局要是大家感兴趣可以参考wordpress.org的主页。
3、960网格布局二
/**
*Content 960px
*12grids one grid=60px;
*marginleft and marginright 10px
*Base on 960grids
*/
.container {
margin: 0 auto;
text-align: left;
width: 960px;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,
.c9,.c10,.c11,.c12 {
float: left;
display: inline;
margin: 0 10px;
}
.c1 {
width: 60px;
}
.c2 {
width: 140px;
}
.c3 {
width: 220px;
}
.c4 {
width: 300px;
}
.c5 {
width: 380px;
}
.c6 {
width: 460px;
}
.c7 {
width: 540px;
}
.c8 {
width: 620px;
}
.c9 {
width: 700px;
}
.c10 {
width: 780px;
}
.c11 {
width: 860px;
}
.c12 {
width: 940px;
}
大家一看就知道，这个就是960网格布局，因为在960网格布局官网下载下来的代码就有这一部分。是的，只是我把对我们布局有用的留下了，没用的我去除了而以。我们 这里的容器宽度是960px，而每一个grid宽度是60px，每一块的左右边距是10px，这样同主内容真正的宽度是940px。同样我们无需加上last的class去除同一水平最后一个方块的右边呀，如有特殊需要可以加上做出需要自己的效果。
4、960网格布局三
/**
*Content width: 940px
*16grids one grid = 40px
*marginleft:0 and marginright:20px
*/
.container {
margin: 0 auto;
text-align: left;
width: 940px;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,
.c10,.c11,.c12,.c13,.c14,.c15,.c16 {
float: left;
display: inline;
margin: 0 20px 0 0;
}
.c1 {
width: 40px;
}
.c2 {
width: 100px;
}
.c3 {
width: 160px;
}
.c4 {
width: 220px;
}
.c5 {
width: 280px;
}
.c6 {
width: 340px;
}
.c7 {
width: 400px;
}
.c8 {
width: 460px;
}
.c9 {
width: 520px;
}
.c10 {
width: 580px;
}
.c11 {
width: 640px;
}
.c12 {
width: 700px;
}
.c13 {
width: 760px;
}
.c14 {
width: 820px;
}
.c15 {
width: 880px;
}
.c16 {
width: 940px;
}
.full {
width:100%;
}
.inner {
padding:10px;
}
.first {
margin-left:0;
clear:left;
}
.last {
margin:0;
border:none;
}
这一布局大家似乎会觉得和二三很相似，其实是这样的，我们这里总容器的宽度定为960px，只是我们不在是分为12grids而是分为16grids并且每个grid的宽度是40px,在应用布局一的原理，只对右边设置右边距20px,并且同一水平位置最后一个方块不设置右边距。
那么对于html要怎么来写呢，这里简单的说个例子
<div class="container"> <div class="section"> <div class="c4">4 grids</div> <div class="c8">8 grids</div> </div> <div class="section"> <div class="c2">2 grids</div> <div class="c6">6 grids</div> <div class="c2">2 grids</div> <div class="c2">2 grids</div> </div> </div>
这些是一些简单的布局，而且可以应用于复杂的布局，感兴趣的朋友可以到这里了解更多的有关网格布局的技术。
最后顺便提一下，在布局中常用到的几个样式的定义
/*
*Layout
*/
/*float left*/
.fl {
float:left;
}
/*float right*/
.fr {
float:right;
}
.img-fl {
float:left;
margin:4px 10px 4px 0;
}
.img-fr {
float:right;
margin:4px 0 4px 10px;
}
.nopadding {
padding:0;
}
.nomargin {
margin: 0;
}
大家从语意上就能理解吧，为了节约大家的时间我就不在多说了
四、打印样式print.css
最后我在简单的把打印样式贴出来和大家一起探讨
@charset 'utf-8';
/**
* Print styles
*/
@media print {
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter:none !important;
-ms-filter: none !important;
} /* black prints faster: sanbeiji.com/archives/953 */
a, a:visited {
color: #444 !important;
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
} /* don't show links for images, or javascript/internal links */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
} /* css-discuss.incutio.com/wiki/Printing_Tables */
tr,
img {
page-break-inside: avoid;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3{
page-break-after: avoid;
}
}
到这里为止，我们对于制作一个项目需要用到的一些样式都讲完了，最后还有一个主样式就需要靠大家根据自己的用户需求设计了，我就不在多说了，希望这篇文章对一些网友会有帮助。如果有兴趣的朋友，我们可以一起探讨，一起学习，一起分享，同时一起进步。
如需转载请注明出处：W3CPLUS
Prime Hype DF 2016 EP