您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

CSS:用Less实现栅格系统

时间:11-26来源:作者:点击数:

背景

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

收集的资料

知识总结

最好的教程就是官方教程:https://www.cdsy.xyz/computer/programme/html_div_css/

栅格系统实战

less

@grid_margin: 20px;
@grid_length: 12;
@unit: 1px;

.row {
    margin-left: -@grid_margin;
    *zoom: 1;
}

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: @grid_margin;
}

.span (@length) when (@length > 0) {
    .span@{length} {
        width: (@length * 60 + (@length - 1) * 20) * @unit;
    }

    .span(@length - 1);
}

.span (0) {}

.span (@grid_length);

.offset (@length) when (@length > 0) {
    .offset@{length} {
        margin-left: (@length * 60 + (@length + 1) * 20) * @unit;
    }

    .offset(@length - 1);
}

.offset (0) {}

.offset (@grid_length);


@grid_margin_percent: (1 / (@grid_length * 4 - 1));

.row-fluid {
    width: 100%;
    *zoom: 1;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    min-height: 30px;
    margin-left: percentage(@grid_margin_percent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fluid_span (@length) when (@length > 0) {
    .row-fluid .span@{length} {
        width: percentage((@length * 4 - 1) * @grid_margin_percent);
    }

    .fluid_span(@length - 1);
}

.fluid_span (0) {}

.fluid_span (@grid_length);

.fluid_offset (@length) when (@length > 0) {
    .row-fluid .offset@{length} {
        margin-left: percentage((@length * 4 + 1) * @grid_margin_percent);
    }

    .fluid_offset(@length - 1);
}

.fluid_offset (0) {}

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

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门