`

关于960Grid CSS Framework

阅读更多

960Grid官方网站

 

不知道为啥作者不写个文档,虽然框架非常轻量,且用起来很方便简单,也浪费了我2天的时间来熟悉.(老人家是这样的啦,哈哈)

我来写吧,现在完全弄明白了,感觉未来的很长一段时间都会用它为基础.

整个框架就那么几个类:

.container_(number)

.grid_(number)

.prefix_(number)

.suffix_(number)

.pull_(number)

.push_(number)

.alpha

.omega

.clear

.clearfix

基础用法

 

.container_(number)类

.container类提供了3种容器: 12等分, 16等分, 24等分.总宽度总是960px,这也是整个框架的基础容器,也是它的名称的来源.

.container是居中的,解决了各种浏览器的兼容性问题,container本身没有内外间隔(margin和pardding),没有border.

 

.grid_(number)类

写法:

<div class="grid_xx"></div>

 

每个grid就是一个单元格,后面的数字的范围取决于你选择的container类的数字.不能为0.

 

写了个页面的完整代码,基本上代表了960css框架的用法. 

 

 

分享到:
评论

相关推荐

    利用Elements css framework写的一个简单页面框架

    框架通常包含全局样式文件(如reset.css、base.css)和模块化组件样式文件(如buttons.css、grid.css)。这些文件提供了基本的样式规则和组件样式,开发者可以通过引入这些文件来应用框架的样式。 1. **栅格系统**...

    TeutonicCSS一个现代的CSS框架功能多样文档齐全

    它以灵活性和易用性为核心,利用最新的CSS技术,如CSS变量和CSS Grid,帮助开发者高效地创建美观且功能丰富的界面。 ### 一、CSS变量的运用 TeutonicCSS充分利用CSS变量(又称CSS自定义属性),使得样式定制变得...

    ASP.NET MVC with Entity Framework and CSS pdf图书+源代码

    9. **CSS基础**:介绍选择器、盒模型、布局技术(如Flexbox和Grid)以及响应式设计。 10. **CSS预处理器**:可能涉及Sass或Less,如何利用它们提高CSS的可维护性和可扩展性。 11. **JavaScript和jQuery**:虽然主要...

    精选国外15个CSS框架整理.pdf

    这些CSS框架各有特色,有的专注于网格系统,如960 Grid System和YUI Grids CSS,有的强调简洁性和可读性,如CleverCSS,还有些如Emastic和Elements,提供更加全面的解决方案,涵盖工作流程和设计元素。选择合适的CSS...

    精选国外15个CSS框架.pdf

    1. **1.960 Grid System** - 这是一个经典的CSS网格系统,提供了多种列布局,便于创建灵活的网页布局。 - 适用于需要快速构建网页布局的开发者,支持多种断点以实现响应式设计。 2. **WYMstyle CSS Framework** ...

    优秀的CSS 框架整理

    除此之外,还有其他一些框架如ESWAT Web Project Framework、Boilerplate CSS Framework、WYMstyle CSS Framework、960 Grid System和Emastic CSS Framework等,它们各自有独特的特点和优势,例如960 Grid System以...

    vs 2010 CSS3插件

    Visual Studio 2010,是微软提供的一个强大的开发环境,主要用于.NET Framework应用程序的开发。尽管VS 2010在发布时对CSS的支持已经相当全面,但随着Web技术的发展,尤其是CSS3的流行,开发者需要更高效的方式来...

    php程序员用到的手册 php手册 Smarty完全中文手册 Zend_Framework手册 CSS手册

    这些手册涵盖了PHP编程、Smarty模板引擎、Zend Framework框架以及CSS样式表的重要知识,对于PHP程序员来说是必备的参考资料。下面将分别对这四个手册的主要内容进行详细的解释。 1. **PHP手册 (php_manual_zh.chm)*...

    Box-CSS-Framework:Box-CSS框架

    Box-CSS框架的核心特性之一是CSS网格系统,它基于CSS Grid布局,这是一种二维布局模型,允许开发者轻松创建复杂的、响应式的网格布局。CSS Grid可以定义行和列的大小,使得元素能够在网格上精确对齐,大大简化了网页...

    css框架(CSS Frameworks):CSS框架应用

    例如,960 Grid System是一种流行的框架,其基于960像素的页面宽度,提供了12和16列的布局选项,便于构建响应式网页设计。这种网格系统使得页面元素的对齐和定位变得更加简单。 WYMstyle CSS Framework则注重模块化...

    grid-based_framework

    在"grid-based_framework"项目中,我们可以预见到这是一个与HTML和CSS Grid相关的代码库。"grid-based_framework-master"可能是该项目的主分支或主要版本,其中包含了实现网格框架的所有源代码、样式表、示例文件和...

    java+CSS说明

    2. **布局控制**:CSS提供了强大的布局工具,如Flexbox和Grid布局,使得开发者能够创建复杂的页面布局。 3. **响应式设计**:随着移动设备的普及,响应式设计变得越来越重要。CSS媒体查询使得网站能够在不同尺寸的...

    Jaidee Framework:一个简单的响应式前端CSS框架-开源

    Jaidee CSS Framework是简单的开源功能强大的工具,用于开发灵活的网站,移动Web应用程序和在线Web应用程序。 Jaidee Framework具有许多用于Web在线解决方案的工具,例如HTML Framework,Grid System等主要功能1....

    div+css文章,asp.net开发心得

    5. **Grid布局**:为二维布局设计,适用于创建复杂的网格系统,如响应式设计。 6. **响应式设计**:使用`media queries`,根据设备特性调整页面布局,确保在不同设备上都有良好显示效果。 接下来,我们转向`asp.net...

    framework:用于移动优先响应式网站的 HTML、CSS 和 JS 框架

    除此之外,Flexbox和Grid布局也是现代CSS的重要工具,它们简化了创建复杂、响应式的布局任务。 **JavaScript的增强** JavaScript为动态交互提供了可能,使网站能够响应用户的操作。在响应式设计中,JavaScript常...

    备忘单Web-HTML-CSS:Berisi Bahan ajar sebelum terjun ke网站开发,diantarnaya terdapat HTML,CSS Dasar,CSS Layouting,CSS3,CSS Framework(Bootstrap,Materialize))

    浮动布局(Float Layout)通过`float`属性实现多列布局,但现代布局方法如Flexbox(弹性盒子布局)和Grid(网格布局)更强大,它们能更灵活地处理复杂布局,如响应式设计。 【CSS3新特性】 CSS3引入了许多新特性,...

    framework-flexbox:流行的Skeleton CSS样板,带有Flexbox Grid和Normalize 8

    framework-flexbox通过用Flexbox-Grid( )替换其传统的网格系统,使流行的Skeleton样板实现了现代化,并将Normalize更新到版本8 只需将dist /目录中CSS或SCSS文件之一添加到您的项目中(建议将dist / skeleton-...

    ExtExtenders3.10最新版(for+.netframework3.5)

    它包含了一系列的JavaScript和CSS组件,这些组件可以无缝集成到ASP.NET项目中,提供类似于ExtJS的效果。以下是一些核心的ExtExtenders组件和特性: 1. **Grid控件**:提供高度可定制的数据网格,支持分页、排序、...

Global site tag (gtag.js) - Google Analytics