背景
公司一直没有专职的前端和美工，Javascript相对来说我熟悉一点，CSS+HTML有四五年没有搞过了，最近要学一下，招聘或和美工配合的时候会有用处。
收集的资料
- CSS教程：。
- LESS教程：。
- SAAS教程：。
- Bootstrap教程：。
- 栅格教程：。
知识总结
- CSS盒子模型：。
- CSS继承模型。
- CSS层叠模型：。
- CSS文档流：。
- 自适应布局。
最好的教程就是官方教程：。
栅格系统实战
less
1 @grid_margin: 20px; 2 @grid_length: 12; 3 @unit: 1px; 4 5 .row { 6 margin-left: -@grid_margin; 7 *zoom: 1; 8 } 9 10 [class*="span"] {11 float: left;12 min-height: 1px;13 margin-left: @grid_margin;14 }15 16 .span (@length) when (@length > 0) {17 .span@{length} {18 width: (@length * 60 + (@length - 1) * 20) * @unit;19 }20 21 .span(@length - 1);22 }23 24 .span (0) {}25 26 .span (@grid_length);27 28 .offset (@length) when (@length > 0) {29 .offset@{length} {30 margin-left: (@length * 60 + (@length + 1) * 20) * @unit;31 }32 33 .offset(@length - 1);34 }35 36 .offset (0) {}37 38 .offset (@grid_length);39 40 41 @grid_margin_percent: (1 / (@grid_length * 4 - 1));42 43 .row-fluid {44 width: 100%;45 *zoom: 1;46 }47 48 .row-fluid [class*="span"]:first-child {49 margin-left: 0;50 }51 52 .row-fluid [class*="span"] {53 display: block;54 float: left;55 min-height: 30px;56 margin-left: percentage(@grid_margin_percent);57 -webkit-box-sizing: border-box;58 -moz-box-sizing: border-box;59 box-sizing: border-box;60 }61 62 .fluid_span (@length) when (@length > 0) {63 .row-fluid .span@{length} {64 width: percentage((@length * 4 - 1) * @grid_margin_percent);65 }66 67 .fluid_span(@length - 1);68 }69 70 .fluid_span (0) {}71 72 .fluid_span (@grid_length);73 74 .fluid_offset (@length) when (@length > 0) {75 .row-fluid .offset@{length} {76 margin-left: percentage((@length * 4 + 1) * @grid_margin_percent);77 }78 79 .fluid_offset(@length - 1);80 }81 82 .fluid_offset (0) {}83 84 .fluid_offset (@grid_length); html
运行效果
备注
Less多少有些程序语言的味道，刚才的示例写的比较仓促，应该进一步重构，比如：引入解释性的变量，去掉“魔法数字”等。