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

 


推荐阅读
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位,采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz,建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤,适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ... [详细]
  • 为了向用户提供虚拟应用程序,通常会在基础架构中部署StoreFront或Web Interface。为了确保安全的远程访问,通常需要在DMZ中配置Secure Gateway或Access Gateway。本文详细对比了这两种界面工具的功能特性,包括用户管理、安全性、性能优化等方面,为企业选择合适的解决方案提供了全面的参考。 ... [详细]
  • Java中高级工程师面试必备:JVM核心知识点全面解析
    对于软件开发人员而言,随着技术框架的不断演进和成熟,许多高级功能已经被高度封装,使得初级开发者只需掌握基本用法即可迅速完成项目。然而,对于中高级工程师而言,深入了解Java虚拟机(JVM)的核心知识点是必不可少的。这不仅有助于优化性能和解决复杂问题,还能在面试中脱颖而出。本文将全面解析JVM的关键概念和技术细节,帮助读者全面提升技术水平。 ... [详细]
  • 使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件,专用于美化表单元素,操作简便,能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • WebStorm 是一款强大的集成开发环境,支持多种现代 Web 开发技术,包括 Node.js、CoffeeScript、TypeScript、Dart、Jade、Sass、LESS 和 Stylus。它为开发者提供了丰富的功能和工具,帮助高效构建和调试复杂的 Node.js 应用程序。 ... [详细]
  • 本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • 深入解析Spring框架中的双亲委派机制突破方法
    在探讨Spring框架中突破双亲委派机制的方法之前,首先需要了解类加载器的基本概念。类加载器负责将类的全限定名转换为对应的二进制字节流。每个类在被特定的类加载器加载后,其唯一性得到保证。然而,这种机制在某些场景下可能会限制灵活性,因此Spring框架提供了一些策略来突破这一限制,以实现更加动态和灵活的类加载。这些策略不仅能够提升系统的可扩展性,还能在复杂的运行环境中确保类的正确加载和管理。 ... [详细]
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社区 版权所有