当前位置：首页 > 网页特效 > 其他

pills-简单实用的响应式12列CSS网格系统

分类：其他日期：2024-05-14 点击(2) 评论(0)

简介

使用该CSS网格额系统需要在页面中引入pills.css文件。

```html
<link type="text/css" rel="stylesheet" href="css/pills.css"> 
```           
#####  HTML结构
在页面的head中添加下面的meta标签，设置视口的宽度为设备的宽度。该标签可以确保视口在移动设计或平板电脑上不被缩放。

```html
<meta name="viewport" content="width=device-width,initial-scale=1">  
```     
##### 12列网格系统

pills.css使用.row class类来作为行包裹元素，使用.columns来标注列，由于pills.css是12列的网格系统，如果你需要一行占满12列，相应的class为twelve columns。

```html
<div class="row">
    <div class="twelve columns">
    </div>
</div>     
```             
下面是一行中有2列，它们分别占4个网格和8个网格。

```html
<div class="row">
    <div class="four columns">
    </div>
    <div class="eight columns">
    </div>
</div>  
```              
你也可以在columns中嵌套.row。

```html
<div class="row">
    <div class="four columns">
    </div>
    <div class="eight columns">
        <div class="row">
            <div class="six columns">
            </div>
            <div class="six columns">
            </div>
        </div>
    </div>
</div>          
```        
要进行列偏移，可以执行下边的代码：

```html
<div class="row">
      <div class="eight columns offset by-four">
</div>   
```               
百分比网格系统模式

pills.css还有另外一种百分比网格系统模式。这种模式中一行用.whole表示，1/2行用.half表示。你可以将一行等分为5分，每一份用.one-fifth表示，则.two-fifths表示2/5份，以此类推。也可以将一行等分为4份，每一份用.one-quarter表示，或将一行等分为3份，每一份用.one-third表示。

网格占据一行：

```html
<div class="row">
    <div class="column whole">
    </div>
</div>      
```            
2个网格等分一行：

```html
<div class="row">
    <div class="column half">
    </div>
    <div class="column half">
    </div>
</div>        
```          
嵌套结构：

```html
<div class="row">
    <div class="column one-fourth">
    </div>
    <div class="column three-fourths">
        <div class="row">
            <div class="column two-fifths">
            </div>
            <div class="column three-fifths">
            </div>
        </div>
    </div>
</div>          
```        
偏移网格：

```html
<div class="row">
      <div class="column two-thirds offset by-one-third">
</div>  
```

web299.com

pills-简单实用的响应式12列CSS网格系统

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果