`

分享一个CSS3的网格系统架构 - ResponsiveAeon

阅读更多

日期:2012-7-30  来源:GBin1.com

分享一个CSS3的网格系统架构 - ResponsiveAeon

在线演示   本地下载

 

曾经介绍过其它类型的CSS3网格系统 ,今天我们介绍一款能够帮助你快速创建基于HTML5/CSS3的响应式布局框架 - ResponsiveAeon

它拥有一个宽度为1104px并且基于12个列的网格框架系统,提供了一个非常方便的方式使用,只需要使用3个基础class来实现。

整个框架使用#mediaquery实现并且能在任何尺寸的设备上运行。

除了网格系统,这里还提供字体,列表,表,按钮和表单。

下载包包含了IE兼容的javascript文件,modal box并且提供了PSD/AI/PNG文件。

 

来源:分享一个CSS3的网格系统架构 - ResponsiveAeon

分享到:
评论

相关推荐

    AtomicGrid一个使用CSS网格实现的轻量级网格系统

    Atomic Grid 是一个基于CSS网格布局的轻量级网格系统,专为前端开发者设计,用于创建响应式和灵活的网页布局。这个系统的核心理念是利用CSS Grid Layout模块来简化页面元素的定位和对齐,提供了一套简洁的API,使得...

    css3动画演示3D网格效果

    `matrix3d()`接受16个参数,定义了一个4x4的矩阵,控制元素的3D变换。这16个参数分别代表变换矩阵的各个元素,对于初学者来说可能较为复杂,但可以借助在线工具来生成。 3. **rotateX(), rotateY(), rotateZ()**:...

    css3响应式图片网格布局

    本资源“css3响应式图片网格布局”正是基于这个理念,利用CSS3的强大功能来实现一个灵活且适应性强的图片展示系统。在这个模板中,透明背景的运用为设计增添了一分现代感,同时也允许内容与背景产生互动,增强了视觉...

    LessGridBoilerplate一个轻量级的12列CSS网格系统

    Less Grid Boilerplate(LGBO)作为一个基于CSS Grid和LESS构建的轻量级12列CSS网格系统,为开发者提供了一种高效、灵活的解决方案。本文将详细探讨其原理、优势以及如何在项目中应用。 一、CSS Grid简介 CSS Grid...

    移动优先的12列响应式CSS网格系统

    移动优先的12列响应式CSS网格系统是现代网页设计中的一个重要概念,它基于CSS3技术,特别是媒体查询(Media Queries)和Flexbox或Grid布局,以实现灵活、自适应的网页布局。在这个系统中,网页的设计首先考虑的是...

    css3-image-float-reversal.rar

    在CSS3中,浮动(Float)属性是一种布局技术,它允许元素脱离其正常文档流并在其父元素中向左或向右移动,直到其边缘接触到包含框或另一个浮动元素的边缘。这个特性在网页设计中尤其常见,用于创建多列布局、图像...

    CSS3网格的三个新特性详解

    `calc()`函数是CSS3中的一个强大工具,它允许我们进行动态计算以确定元素的宽度或高度。特别是在网格布局中,我们可以使用`calc()`来减去边距或其他间距,从而确保元素的总宽度不会超过容器宽度。例如,如果我们想...

    pillscss是一款简单实用的响应式12列CSS网格系统

    **Pills.CSS:一款创新的响应式12列CSS网格系统** Pills.CSS是一个轻量级、易用的响应式CSS框架,专为快速构建整洁、灵活的网页布局而设计。它的核心在于其独特的12列网格系统,该系统允许开发者通过简单的类名来...

    js加CSS3立体式等距网格和三维网格效果.zip

    【标题】"js加CSS3立体式等距网格和三维网格效果.zip" 涵盖的知识点主要集中在JavaScript(简称JS)与CSS3这两个前端开发技术上,它们共同创造出动态且具有视觉冲击力的立体网格和三维网格效果。在网页设计和开发中...

    CSS3鼠标悬停图片网格切片动画特效

    在本文中,我们将深入探讨如何使用CSS3来创建一个具有鼠标悬停图片网格切片动画特效的交互式设计。这个特效在用户将鼠标光标移动到图片上时,会呈现出2张图片切片的动态过渡效果,从而为网站增添视觉吸引力。 首先...

    GridGarden一个学习CSS网格布局的游戏

    1. **定义网格容器**:在CSS网格布局中,首先我们需要创建一个网格容器,使用`display: grid`或`display: inline-grid`属性设置元素为网格容器。 2. **定义网格线与轨道**:网格线用于定位网格单元格,网格轨道是...

    CSS-The-Definitive-Guide-4th-zh-CN, CSS权威指南第四版中文翻译.zip

    3. **布局技术**:包括流体布局、网格布局、Flexbox(弹性盒子布局)和Grid(CSS Grid布局)。这些技术帮助开发者创建响应式的、灵活的网页布局。 4. **定位**:CSS提供了相对定位、绝对定位、固定定位等多种方式,...

    gridkissPostCSS插件让CSS网格变得超级简单

    标题中的"gridkissPostCSS插件"是一个用于简化CSS网格布局的工具,它通过PostCSS这个现代化的CSS处理器来实现。PostCSS是一种允许开发者使用未来CSS语法的工具,它会将这些先进的语法转换为目前浏览器能理解的形式。...

    创意css3网格布局带动画效果.rar

    这个“创意css3网格布局带动画效果”的压缩包文件包含了一个使用CSS3实现的创新网格布局,同时结合了动画效果,提升了用户体验。下面我们将详细探讨相关的知识点。 1. CSS3 Grid Layout(网格布局): CSS3 Grid...

    ps+div+css打造蓝色后台--login页面设计

    - **流体网格系统**:采用流体网格布局,确保页面在不同设备上的美观和可用性。 - **弹性盒子(Flexbox)和网格(Grid)布局**:利用这些现代CSS布局模型,可以轻松实现复杂的响应式设计。 ### 4. Login页面设计的...

    响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版

    而Grid则提供了一个二维布局系统,允许精确控制行和列,非常适合构建复杂的响应式网格。 此外,CSS3的过渡(Transitions)、动画(Animations)和变换(Transforms)也极大地丰富了用户体验。这些功能可以实现平滑...

    Chrome的Css网格高亮器

    CSS网格布局是现代Web设计中的一个重要概念,它允许我们创建二维布局,将页面划分为行和列,形成一个网格系统。CSS Grid提供了强大的定位功能,使得元素可以轻松地对齐到网格上,无论是简单的两列布局还是复杂的多列...

    EPICSSNS-CSS-4.5.0-LINUX 32位版本 EPICS Control System Studio (CS

    EPICS CSS 4.5.0-LINUX 32位版本是专为Linux操作系统设计的一个发行版,适用于32位架构的系统。 EPICS CSS的核心功能包括: 1. **图形化编程**:CSS提供了直观的图形用户界面,允许用户通过拖放方式创建、配置和...

    CSS3实现网格响应动画 CSS3实现网格响应动画网页特效.zip

    本资源"CSS3实现网格响应动画 CSS3实现网格响应动画网页特效.zip"着重于利用CSS3来创建动态且适应不同屏幕尺寸的网格系统。下面我们将深入探讨这个主题中的关键知识点。 1. **CSS3 Grid Layout**: CSS3 Grid布局是...

    css-layout-and-positioning-css布局与定位

    在网页设计中,CSS(Cascading Style Sheets)...在“css-layout-and-positioning-master”这个压缩包中,可能包含了一系列关于CSS布局与定位的实例和教程,通过学习和操作这些文件,你可以更好地理解和应用这些概念。

Global site tag (gtag.js) - Google Analytics