960网格系统(960 Grid System)终于推出24列的布局了

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>


    960 Grid System是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。


    960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。 网格技术是最近两年才出现的一种网页布局方法,它的原理是将页面平均分割成N列,然后通过组合相应数量的列来完成对页面的布局。


    以往的960框架只包含12列和16列的布局,其网格间距为20px,这样对于英文类网站就比较适合,但是对于中文网站(特别的目前要应付各级领导的网站),就不太适合,不符合中国人的审美,导致我在每次使用960系统时还要对其代码进行适当修改。


    好在近期960 Grid System的创始人nathan smith已经针对这种情况做出了改进,增加了24列的布局模式,网格间距改为了10px。这样就大大提高了960系统的适用性和灵活性,也更符合中国人的审美了。


    nathan smith是这样解释新的24列布局的:“For those more comfortable designing on a 24-column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case "i" or "l" might be easily missed.”


 



<script src="http://www.google.com/reader/ui/publisher.js" type="text/javas<script src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=grc_p(%7bc%3a%22green%22%2ct%3a%22%5cu8fd9%5cu4e9b%5cu6587%5cu7ae0%5cu4e5f%5cu503c%5cu5f97%5cu4e00%5cu770b%22%2cs%3a%22false%22%7d)%3bnew%20grc" type="text/javascript"></script>B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC" type="text/javascript">

Bootstrap3修改版 原有的12个栅格改为24个,方便控制多元素行 立即下载

相关推荐

960网格模板

960网格系统960 Grid System)是目前比较流行的一种 Web 网页设计模式。该系统非常适合网页效果图的制作,你可以轻松的设计出一张简单而又标准的网页效果图。960网格系统图样会提供HTML和CSS代码,因此,写代码的时候,960网格系统同样出色。

深入理解CSS Grid网页布局,并通过示例来演示如何使用

CSS Grid布局是一种现代的设计方式,它能够让我们更加灵活地布局网页内容。在这篇技术博客中,我们将深入理解CSS Grid布局,并通过示例代码来演示如何使用它。

韩进的博客 414

bootstrap-24grid-bootstrap制定版-24格 更适合中文网页

bootstrap-24grid bootstrap框架制定版下载 24栅格系统更适合中文网页 原版默认是12格,间距超大,不适合中文网页,这个是24格指定版本

CSS Grid 布局 - 附完整示例

CSS Grid 布局是一个强大的布局系统,它可以让你创建复杂的网页布局,并且代码简洁,灵活性高。它基于行和网格系统,将页面区域分割成不同的单元格,并允许你在这些单元格中排内容。

m0_48968874的博客 1377

深入理解BootStrap Item7 -- 栅格系统(布局

1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系的行(row)与(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

小平果的欢乐谷 7509

栅格布局一般怎么用_设计底层原则——如何定义栅格 ?

我们期望此篇文章可以和大家共同探讨学习关于栅格的底层设计原则,希望能够给到大家启发,也欢迎大家一起互相交流学习。 1 栅格是什么?为什么要定义栅格?栅格其实就是我们常规理解的网格,从基础的作文本,再到围棋棋盘,都有栅格的身影。为什么设计师需要关注栅格呢?通过栅格中的网格系统,可以有效的将内容组织起来,形成内容布局的规律性,更易识别。栅格于设计师的价值主要体现在以下2方面:1.To用户:提...

weixin_29432863的博客 1778

html如何在960外设计,网页尺寸的黄金比例:960 Grid System(网格设计)

960 Grid System是使用固定宽度960pixel(像素)置中对齐画面的方式呈现在网页上,去除左右两边各10pixel的空间,留下中间940pixel的区块以20pixel作为间隔分栏。在空间设计上,可随意合并多栏作为版面配置及网页尺寸的设定,合并出来的栏宽也不会有畸零数,有利于CSS中DIV宽度的设定。图:960 Grid System - Demo(12栏)960grid分为12栏...

weixin_30220993的博客 831

960网格系统 960 Grid System 终于推出24布局

960网格系统 960 Grid System 终于推出24布局

hftyhv的博客 274

960 grid system

grid 布局小结" title="960 grid 布局小结" style="font-size:18px"> 960个像素作12栏 16栏 24栏分割 12栏和16栏分割的每个grid左右margin各10px,24栏分割每个grid左右margin各5px。 几个重要的关键字和概念 1.container容器:960px的宽度,左右margin auto 居中

M小卢 502

Golden Grid System高级技巧:自定义断点与多设备适配的终极方案

Golden Grid System(GGS)是一款强大的响应式折叠网格系统,通过18布局实现流畅的多设备适配。本文将分享自定义断点与设备适配的高级技巧,帮助开发者充分发挥GGS的潜力,打造完美适配各种屏幕尺寸的现代网页设计。 ## 理解GGS的核心网格结构 GGS的核心设计基于18网格系统,其中2作为外边界,16用于实际内容布局。这种结构允许灵活组合为8或4布局,适应从移动设备到

gitblog_00403的博客 826

CSS框架 960 grid system最新优化版使用指南

ss布局看起来简单,但是要做到多浏览器兼容实在不容易,这里推荐960 grid system框架,不过官方版太大了而且文件过多,青竹博客再次进行优化并且进行了文件合并。主要来说主要是第一部分重置html标签,其次是引入框架, 最后是兼容性代码,使用过程中css框架代码部分不要动哦,保存成任何文件即可,使用过程用link导入即可。grid.css代码: 1 /*reset css*...

dianfan0079的博客 254

960-Grid-System

1,官网 http://960.gs/ 2,源码 https://github.com/nathansmith/960-Grid-System/tree/master/code/css 第一个是reset.css,用于重置样式;第二个文件是text.css,定义了一些元素的基本样式;第三个是核心文件960.css 3,使用 4,几点注意 .container_12和.co...

weixin_33851177的博客 93

960网格系统

960px 网格系统 , 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 。该无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3x3, 4 x 4 x 4 , 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等

CSS框架-960 Grid System

CSS框架960 Grid System 官网:http://960.gs/ 什么是框架框架是一种你能够使用在你的web项目中概念上的结构。CSS框架一般是CSS文件的集合,包括基本风格的字体排版,表单样式,表格布局等等,比如: * typography.css 字体排版规则 * grid.css 表格布局 * layout.css 布局 * ...

weixin_30507269的博客 138

compass安装使用960 Grid System

960 Grid System 是一个CSS的页面布局框架 demo: http://960.gs/demo.html 前提:安装Ruby 、NodeJS 步骤1:在命令行下安装css插件: gem install compass-960-plugin 步骤2:创建my_project项目: compass create -r ninesixty my_project --us...

weixin_33901926的博客 94

960 Grid System相关的那些问题

为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息。 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案。一方面,需要做一个能适应各个宽度的设计,从背景图片,到每个栏目标题的文字长度,都需要考虑到适应多变的宽度;另一方面,也是最致命的一点,相比英文单词,中文方块字是没有起伏的,用户对文字位置记忆的依赖性更大。自适...

weixin_33916256的博客 116

让你的页面更专业--css框架960Grid System

让你的页面更专业,960Grid System 这是个国外css框架,分为12栏、16栏、24布局,根据实际情况选择,也可以混合使用。

365Marathon 480

960gs tips

960gs tips http://gridder.andreehansson.se/学习360gs的必备文章,好http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid...

134
上一篇: 前端程序员必上的8个优秀的中文前端设计网站
下一篇: 大病归来
系统信息
系统信息 领域专家: 后端开发技术领域 领域专家: 后端开发技术领域
博客等级 码龄23年 2404粉丝 565原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值