PC网站CSS分享
转自http://www.tuicool.com/articles/IVVnia7
PC网站CSS分享
这里想总结些编写网页的经验，以PC端的为主，前面总结过后台的，今天写些前台的，参考了 bootstrap3.3.5 、 bootstrip2.3.2 和模版 matrix 。
前段时间还写过一篇 《前端基础学习分享》 ，比较基础的文章。
每次写CSS，总感觉不用写那么多CSS，但是精简的时候， 又难以下手。越写越觉得代码越来越多，越来越乱，所以这次我打算整理出一套比较灵活的结构，供以后使用。
CSS应该也可以像其他那些语言写的有层次，有结构。
一、规划
1）在拿到psd效果图后，我会将所有的效果图看一遍，然后开始打草稿，在纸上画，在PS中标注都可以。一般都是做个大概的统计，太详细不太现实，既费时间也费精力。
2）网站的浏览器兼容性要顾及到哪些，IE6，IE7还是IE8以上等， 点击查看浏览器分布情况 。写CSS的时候还得照顾下低版本的浏览器。
3）页面中的字体大小有几种；颜色有几种；超链接的:visit，:hover，:visit样式有几种
4）网站中有多少个小图标，是否可以用现有的字体库替代小图片
5）网站中是否用到了表格table，有哪几种表格款式，能否做出抽象
6）有几种按钮款式，扁平的、3D的还是啥样的
7）写些通用点的宽度与位移类，要能与其他地方配合，例如表单，文本等
8）表单中是横排的还是竖排的；输入框是怎么样的；下拉框单选框多选框又是啥样的，有些高逼格的网站无法忍受下拉框等的默认样式，那就得美化；颜色有几种
9）需要哪些辅助类，比如情境背景色等
10）网站可以抽象出许多可复用的组建，例如分页、错误页面等
11）CSS也可以有面向对象的思维，将通用的结构抽象出来，做成一个基类。
12）开发的时候将CSS手册打开，一些周边的在线网站准备好，例如 CSS参考手册， webkit css library - 属性速查 ， CSS3样式生成器 等。
二、低版本浏览器支持
以IE6、IE7为代表的一些低版本的浏览器很多CSS3、HTML5都不支持，有些伪类也不支持，例如:before等。这个时候就要做些兼容的操作。
1、modernizr.js
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。可自定义脚本下载。使用了这个插件后，在html标签中会显示class，如下图所示，如果不支持某个CSS3，就会以“no-”开头。这样做的 话，就能优雅降级，在不支持这种样式的时候，换成另外一种样式。
2、respond.js
Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。
三、基本的CSS设置
1、CSS的reset
重新默认样式，这个肯定有必要。参考了 HTML5 Boilerplate 。模版里的CSS注释是洋文的，自己翻译了一些。
/**
* HTML5标签 在IE 8 / 9没有定义。
* 在IE 10/11 Firefox 中没有定义`details` or `summary`
* 在IE 11中没有定义main
*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}
figure,menu{
margin:0;
padding:0;
}
ul,ol{
padding:0;
list-style-type:none;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,form,dl,dt,dd,li{
margin:0;
}
.......
2、CSS的通用样式
1）左浮动，有浮动，清浮动；左对齐，右对齐，居中；字体粗细，加粗，斜体，普通等；宋体、雅黑字体等
2） position定位，相对定位，绝对定位等； display属性，block、inline、inline-block等
3） overflow属性，有hidden、scrolldeng；zoom属性； cursor属性； text-decoration属性
4） margin的四个方向； padding的四个方向
.l{float:left;}.r{float:right;}.cb{clear:both;}
.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}
.fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋体';}.fw{font-family:'微软雅黑';}.fe{font-family:'serif';}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
.rel{position:relative;}.abs{position:absolute;}.fixed{position:fixed;}
.db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}.dn{display:none;}
.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}
.z{_zoom:1;}.zoom1{*zoom:1;}
.mt5{margin-top: 5px;}.mt10{margin-top: 10px;}.mt15{margin-top: 15px;}.mt20{margin-top: 20px;}
.mr5{margin-right: 5px;}.mr10{margin-right: 10px;}.mr15{margin-right: 15px;}.mr20{margin-right: 20px;}
.mb5