前端开发
网络新概念，云计算、大数据、O2O、电商。。。。
CSS规范模板及入门参考资料
2017-05-31 08:31:39
参考网址：
http://v3.bootcss.com/
http://nec.netease.com/library
一、包含完整头部信息和主体结构的HTML基础模板。（网易nec）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>NEC：更好的CSS方案</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="css/style.css"/> <link rel="shortcut icon" href="img/favicon.ico"/> <link rel="apple-touch-icon" href="img/touchicon.png"/> </head> <body> <div class="g-doc"> <div class="g-hd"> </div> <div class="g-bd"> <div class="g-mn"> </div> <div class="g-sd"> </div> </div> <div class="g-ft"> </div> </div> </body> </html>
二、重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}三、功能样式，从常用样式方法中抽离，按需使用
/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-ib{display:inline-block;*display:inline;*zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-oh{overflow:hidden;}
.f-ff0{font-family:arial,\5b8b\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-taj{text-align:justify;text-justify:inter-ideograph;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}四、常见动画效果的集合，主要用于效果演示和参考（点击查看代码库演示），也可以直接调用
五、常用内容记录
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
1、一行三个div排列，左右宽度固定，中间自动适应的处理，左右两个div代码放置到前面分别float设置为left和right并且设置宽度，中间显示的div的代码放置到最后，宽度不设置默认auto，并且设置float为left即可做到自适应；http://blog.csdn.net/three_bird/article/details/51468817
2、适应手机浏览，居中内容并限制最小宽度和最大宽度
body{min-width: 300px;max-width: 640px;margin:0 auto;padding: 0px;border:0px;}
.container,row,.searcher,.promotions {min-width: 300px;max-width: 640px;margin:0 auto;padding: 0px;border:0px;}3、让横向排列的几个浮动(float:left)的子div居中显示
div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示了，不过我们可以使用变通的方法达到这一效果，就是在父div上再套一个div，如下：
<div id="outerdiv" style="text-align:center;"> <div id="containerdiv" style="overflow:hidden; display:inline-block;"> <div id="float1" style="float:left;"> </div> <div id="float2" style="float:left;"> </div> </div> </div>
实际运用的例子，中间字体可以做到自动换行：
.pd-img {float:left;position: relative;height: 70px;width: 75px;margin-left: 15px;overflow: hidden;
text-align: center;}
.pd-info {-webkit-box-flex: 1; box-flex: 1; margin-left: 20px; position: relative;
height: 100%; padding-right: 10px;width: auto;}
.pd-flag{float: right;width:45px;}4、两个DIV一行两列排列方式，正常的float:left两个子div不超过父DIV的宽度即可，如果是左侧固定宽度右侧动态宽度的设置方式如下，这种方式也比较常用，主要是用absolute定位
.left{float:left;padding:5px 10px 5px 10px;width:120px;position:absolute;border:solid 1px #000;}
.right{float:right;padding:5px 10px 5px 125px;width:100%;border:solid 1px #f00;}
效果如图：
5、PS中字头设置为：思源黑体cn、Regular、24px、锐利，图像大一点没问题，背景透明，css中设置图像的大小进行缩放，手机端显示的文字比较锐利清晰；
6、收藏其他人的CSS 布局三栏布局、居中布局问题总结
https://my.oschina.net/brianway/blog/904025
Margin:
Margin属性用于设置两个元素之间的距离。
Margin:10px 5px;设置对象上下为10px,左右为5px;
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
padding:10px 5px;设置对象上下为10px,左右为5px;
Clear:
clear 属性规定元素的哪一侧不允许其他浮动元素。
使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
Clear: Clear属性主要是清楚float属性设置的效果，使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从父元素继承 clear 属性的值。
<div id='row'><div id='c1'></div><div id='c2'></div><div id='c3'></div></div>如果最外层的row没有设置高度，而c1和c2设置了float:left则显示row并没有包含住c1和c2，解决方法是再在row中增加一个c3的div设置clear:both,或者给row增加上overflow:hidden/auto
<html>
<head>
<style type="text/css">
#c1,#c2 {float:left;width:200px;height:50px;}
#c1{background-color:#ff0000;}
#c2{background-color:#e9e9e9;}
#c3{clear:both;}
#row{background-color:blue;}
</style>
</head>
<body>
<div id='row'><div id='c1'>1</div><div id='c2'>2</div><div id='c3'></div></div>
</body>
</html>如果在在float层下面开始一行新的布局，然后在下面新的div中使用margin-top属性，肯定不管用，则适合增加一个<div style="clear:both"></div>即可
1文本，图片等行内元素的水平居中方法呢比较简单。直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了。
2 确定宽度的块级元素水平居中怎么设置呢?设置方法也不难，可以通过设置外边距，margin：0 auto;这句来实现确定宽度的块级元素水平居中。
3 不确定宽度的块级元素设置水平居中的方法有多种，这里介绍三种方法给大家。第二种方法，相对于用table的方法的好处是不用增加无语义标签，简化标签嵌套深度。这个思路是这样的，通过改变块级元素的display属性值为 inline类型，然后设置text-align:center来实现居中。这种方法也有一定不妥之处就是把块级元素改为行内元素后，行内元素比块元素少 了一些功能。比如说设定长宽值等，在项目运用中可能会有一些限制，大家可以自行选择。
border: border-style boder-width border-radius out-line 在一个声明中设置所有的轮廓属性。 border-left-style
css控制UL LI 的样式详解
http://www.jb51.net/css/44250.html
#menu ul {list-style:none;margin:0px;}
list-style:none，这一句是取消列表前点，因为我们不需要这些点。
margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。
list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下：（列举一些常用的属性值）
list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
list-style-type属性的属性值有很多，在这里我们只是列举了比较常用的几个。
none：不使用项目符号。 disc：实心圆。 circle：空心圆。 square：实心方块。 demical：阿拉伯数字。 lower-alpha：小写英文字母。 upper-alpha：大写英文字母。 lower-roman：小写罗马数字。 upper-roman：大写罗马数字。
list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性，其语法结构如下：
list-style-image:none/url
list-style-image属性可以取两个值：
none：没有替换的图片。 url：要替换图片的路径。
来看一段代码：
list-style-position属性，是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性，语法结构如下：
list-style-position:inside/outside
inside：项目符号放置在文本以内。 outside：项目符号放置在文本以外。
#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。