虽然开始要费时间学习, 但是磨刀不误砍柴工,学习CSS框架能够节省更多的开发时间,显著提高工作效率。下面是作用960网格系统的方法。
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<div class="container_12">
<div class="container_16">
<div class=″container_16″>
<div class=″grid_4″>宽度为:60px*4=240px-20px=220px(20px为左右各10px间隙)</div>
<div class=″grid_12″>宽度为:60px*12=720px-20px=700px(20px为左右各10px间隙)</div>
</div>
alpha类:左边间隙为0,margin-left: 0; omega类:右边间隙为0,margin-right: 0;
使用方法:
<div class=”grid_2 alpha”>左边间隙为0</div>
<div class=”grid_2 omega”>右边间隙为0</div>
prefix:左边留空 suffix:右边留空
代码如下:
<div class="container_16">
<div class="grid_1 prefix_13 suffix_2">
<p>
宽度为40px,左留空13*60px=780px;右留空2*60px=120px
</p>
</div>
</div>
块与块之间必须添加"clear"以清除浮动
<div class="container_16">
<h2>
16 Column Grid
</h2>
<div class="grid_16">
<p>
940px
</p>
</div>
<!-- end .grid_16 -->
<div class="clear"> </div>
<div class="grid_1">
<p>
40px
</p>
</div>
<!-- end .grid_1 -->
<div class="grid_15">
<p>
880px
</p>
</div>
</div>
<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”comments” class=”grid_2 omega”>comments</div>
</div>
由于CSS使用优先级的形式来觉得如何解释样式,而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同,浏览器会优先选择你的CSS文件中的样式。
此文由站长百科用户Zhou3158于2010年2月3日 (星期三) 07:32最后更改于站长百科
地址: http://www.zzbaike.com/wiki/960%E7%BD%91%E6%A0%BC%E7%B3%BB%E7%BB%9F%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95。
分享到:
相关推荐
960GS/960网格系统,更为灵活的网格设计,辅助网页设计师更好的进行设计
960px 网格系统 , 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局.... 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等
960网格系统 (960 Grid System)是目前比较流行的一种 Web 网页设计模式。该系统非常适合网页效果图的制作,你可以轻松的设计出一张简单而又标准的网页效果图。960网格系统图样会提供HTML和CSS代码,因此,写代码的...
960网格系统 由内森·史密斯(Nathan Smith)创建。 有关更多信息,请参见官方网站:http: 要安装Adobe Fireworks扩展,只需双击/app_plugins/fireworks目录中包含的*.mxp文件。 如果您运行的是Windows 7,则需要...
fluid960gs:Fluid 960网格系统
Unsemantic 响应式网格系统是 960 网格系统的后继接班人,开发者就是 960gs 的作者。它以 960 Grid 类似的方式工作,但不是一组列数,它是完全基于百分比。例如,如果你想要一个 50% 列宽,简单地使用类=“grid-50”...
讨论用于自适应960网格系统的jQuery插件的开发的文章
自动检测使用“960网格系统”的站点; 单击地址栏中的“960”图标以在您的网页上覆盖网格。 找到 CSS 类 container_12、16 或 24 时会触发自动检测。 可以使用弹出窗口更改颜色(默认情况下禁用); 要激活它,请...
在使用960网格系统的网页上叠加“ 960.gs”指南。 自动检测到使用“ 960网格系统”的站点; 点击地址栏中的“ 960”图标,即可在您的网页上覆盖一个网格。 找到CSS类container_12、16或24时触发自动检测。 可以使用...
9六十 一个简单易用的960px固定无响应网格系统
960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。
ios网格系统用于设计 iOS 应用程序的 Fireworks 网格系统。关于 iOS 网格系统该扩展是为 Adobe Fireworks 制作的,经过优化,可帮助您为 2013 年 2 月的所有 Apple 移动设备(纵向和横向模式)创建设计。它也将...
具有相似命名的样式化组件的网格系统 特征 容器:用于带有计算填充的包装组件 行:用于使用属性flex-wrap的包装组件 列:用于具有响应视图的包装组件 显示弹性和内联弹性 正在安装 注意!:在安装网格样式的组件之前...
这个PSD是使用960网格系统设计的,我最新设计的表哥作业www.bgzuoye.com也是960网格系统排版的,后期加了响应式设计,手机平板PC端都良好的显示,bootstrap3.0框架,durpal架构,感兴趣的同学欢迎交流!
超级简单,略带语义的网格系统 它是如何工作的 Lining 使用生成 CSS,为您的 Web 布局提供基本结构。 在lining.scss文件中,您将看到如下所示的 mixin: @include lining-fixed(12, 960px, fixed); 每一行都为特定...
回应式:否网站:http: 960网格系统简单的网格系统960网格系统旨在通过提供常用的尺寸(基于960像素的宽度)来简化Web开发工作流程。 有两种变体:12列和16列,可以单独使用或串联使用。 回应式:是网站:...
Bootstrap v4 flexbox网格系统作为Tailwind CSS插件。 检查。 安装 npm i -D tailwind-bootstrap-grid 在tailwind.js文件中: module . exports = { plugins : [ require ( 'tailwind-bootstrap-grid' ) ( { ...
概述 已经有很多网格系统,但这是我现在在几个项目中自己使用的一种。 我决定将它记录下来并张贴在这里,以便我可以跟踪更改和更新,而不是为每个新项目对其进行除尘和更新。 网格是一个 12 列响应式网格,可以是...
matlab 代码字号节奏网格发生器 节奏网格是一种用于布局设计的...此外,字体度量浏览器可用于测试您的系统字体是否符合网络“保险箱”约定 (500UPM),作为与推荐的 UPM 大小的差异。 请参阅interface/safe-box.html 。