热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS:用Less实现栅格系统

背景公司一直没有专职的前端和美工,Javascript相对来说我熟悉一点,CSS+HTML有四五年没有搞过了,最近要学一下,招聘或和美工配合的时候会有用处。收集的资料CSS教程:ht

背景

公司一直没有专职的前端和美工,Javascript相对来说我熟悉一点,CSS+HTML有四五年没有搞过了,最近要学一下,招聘或和美工配合的时候会有用处。

收集的资料

  • CSS教程:http://www.w3school.com.cn/css/index.asp。
  • LESS教程:http://www.lesscss.net/。
  • SAAS教程:http://sass-lang.com/。
  • Bootstrap教程:http://cnbootstrap.com/。
  • 栅格教程:http://www.see-source.com/blog/300000033/273。

知识总结

  • CSS盒子模型:http://www.w3school.com.cn/css/css_boxmodel.asp。
  • CSS继承模型。
  • CSS层叠模型:。
  • CSS文档流:http://www.w3school.com.cn/css/css_positioning.asp。
  • 自适应布局。

最好的教程就是官方教程:http://www.w3school.com.cn/css/index.asp。

栅格系统实战

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

<div class="row">
    <div class="span3">div>
    <div class="span6 offset3">div>
    <div class="clear-left">div>
div>

<div class="row-fluid">
    <div class="span3">div>
    <div class="span6 offset3">div>
    <div class="clear-left">div>
div>

运行效果

备注

Less多少有些程序语言的味道,刚才的示例写的比较仓促,应该进一步重构,比如:引入解释性的变量,去掉“魔法数字”等。

 


推荐阅读
author-avatar
000000
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有