<!-- Google 728*90横幅广告开始-->
<script type="text/javascript"><!--
google_ad_client = "pub-7343546549496470";
/* 728x90, 大横幅正文上方 */
google_ad_slot = "4725362798";
google_ad_width = 728;
google_ad_height = 90;
// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
<!-- Google 728*90横幅广告结束-->
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.”
<!-- Google 728*90横幅广告开始-->
<script type="text/javascript"><!--
google_ad_client = "pub-7343546549496470";
/* 728x90, 大横幅正文下方 */
google_ad_slot = "4725362798";
google_ad_width = 728;
google_ad_height = 90;
// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
<!-- Google 728*90横幅广告结束-->
<!-- 新Google 468x15 横链接单元开始-->
<script type="text/javascript"><!--
google_ad_client = "pub-7343546549496470";
/* 468x15 横链接单元 */
google_ad_slot = "5785741422";
google_ad_width = 468;
google_ad_height = 15;
// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
<!-- 新Google 468x15 横链接单元结束-->
<!-- Google Reader shared发布代码开始 -->
<script src="http://www.google.com/reader/ui/publisher.js" type="text/javascript"></script><script src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&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>
<!-- Google Reader shared发布代码结束 -->
分享到:
相关推荐
布局网格系统 要使用它,只需编译项目。 npm i npm run build 为您的身体标签添加类网格。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 一、什么是网格(Grid)? 在平面设计中,网格是一种由一系列用于组织内容...
60GS - 60 Columns Grid System based on CSS Grid Layout
网格系统为网页设计师们提供了一种快速构造网页内容布局的方法,帮助设计师们节省了大量的时间和精力。 1. Tiny Fluid Grid 2. ZURB CSS Grid Builder 3. Grid System Generator 4. Variable Grid System 5....
从二十世纪初开始出现在艺术/建筑(建构主义)运动中创建背景框架,支持按顺序/统一/平衡布置布局常见的网格系统多栏网格(*) 单列网格(*) 模块化网格基线网格角色: 组织:有方便的对准线,易于按顺序排列组件...
金色网格系统指南针插件 该插件将Golden Grid System添加到 。 是由创建的流体网格,具有:列,装订线,基线和脚本。 安装宝石 gem install compass-golden-grid-system 使用Golden Grid System创建一个Compass...
极光网格 Aurora Grid的主要思想是通过简单易用的系统为用户提供所有必要的工具,以为任何设备创建漂亮的布局。 它是一个简单,灵活且充满响应性和移动优先功能,专为设计人员CSS Grid System设计。 用它来创建现代...
postcss-grid-system 一个基于固定列宽创建网格的插件。 安装 安装: npm install postcss postcss-grid-system --save-dev 要求与PostCSS: postcss ( [ require ( 'postcss-grid-system' ) ] ) ; 请参阅以...
语言:English 适用于Aura,LWC和自定义响应网格UI的Salesforce闪电网格系统。 轻松为Aura,LWC,Visualforce页面和自定义网格UI创建响应式Salesforce闪电网格布局。
从源代码了解引导容器和网格系统 用于学习引导容器和网格系统的... grid_sysytem文件夹内部的html里列出了替代系统中一些不同的预定义列的类,并说明了在不同viewport尺寸下的布局表现。 更详细的解读参见慕课网手记
Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大...二、Bootstrap 网格系统(Grid System)的工作原理 网格系统通过一系列包含内容的行和列来
CSS网格生成器网站: : 这个项目是人们快速使用CSS Grid功能创建动态布局的一种方式。 您可以设置数字以及列和行的单位,我将为您生成一个CSS网格! 在框中拖动以创建放置在网格中的div。 我注意到很多人没有使用...
Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内...
Bootstrap 网格系统(Grid System)的工作原理 21 媒体查询 21 网格选项 22 响应式的列重置 23 偏移列 25 嵌套列 26 列排序 28 Bootstrap 排版 31 标题 31 引导主体副本 33 强调 34 缩写 35 地址(Address) 36 引用...
ragrid:固有的第一个自动布局的flexbox网格
移动优先12列网格基于Flexbox 兼容Bootstrap 3(待定)安装Plasma.css可以作为软件包通过安装npm install plasma.css特征使用flexbox的网格布局特征支持的发行状态默认基于flexbox 是的Α :check_mark: React灵敏是...
/// 保存当前网格的布局 /// void SavePageSetting() { try { string path=System.Windows.Forms.Application.StartupPath+"\\PrintLayout"; if(!System.IO.Directory.Exists(path)) { System.IO....
Griddle是Sass函数和mixins的系统,带有随附的可视网格覆盖,可帮助您精确进行前端开发。 该系统的目标是协助前端工程师执行参考设计的1:1实现。 这是通过可在浏览器中切换的可视网格覆盖以及一组附带的.scss ...
并可轻松调节以满足设计要求基于百分比的布局网格系统的柔性排水沟捆绑调试功能轻松的系统在列之间切换顺序物品的垂直对齐物品的水平对齐嵌套布局装订边距,填充和宽度帮助器捆绑的彩色调色板,用于文本和背景,高度...
Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ...