百分百网格效果-html代码-BFW代码库

百分百网格效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Percentage grid system</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    /* GRID SYSTEM */
.module {
  float: left;
  width: 98%;
  margin-left: 2%;
  margin-bottom: 2%;
  background-color: #212121;
  padding: 1em;
  min-height: 60px;
  transition: all 0.3s linear;
}
.grid {
  margin-left: -2%;
  padding: 2%;
  *zoom: 1;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
@media only screen and (min-width: 481px) {
  .tablet-1 {
    width: 6.33333333%;
  }
  .tablet-1:after {
    content: ' (8%)';
    color: #666;
  }
  .tablet-2 {
    width: 14.66666667%;
  }
  .tablet-2:after {
    content: ' (17%)';
    color: #666;
  }
  .tablet-3 {
    width: 23%;
  }
  .tablet-3:after {
    content: ' (25%)';
    color: #666;
  }
  .tablet-4 {
    width: 31.33333333%;
  }
  .tablet-4:after {
    content: ' (33%)';
    color: #666;
  }
  .tablet-5 {
    width: 39.66666667%;
  }
  .tablet-5:after {
    content: ' (42%)';
    color: #666;
  }
  .tablet-6 {
    width: 48%;
  }
  .tablet-6:after {
    content: ' (50%)';
    color: #666;
  }
  .tablet-7 {
    width: 56.33333333%;
  }
  .tablet-7:after {
    content: ' (58%)';
    color: #666;
  }
  .tablet-8 {
    width: 64.66666667%;
  }
  .tablet-8:after {
    content: ' (67%)';
    color: #666;
  }
  .tablet-9 {
    width: 73%;
  }
  .tablet-9:after {
    content: ' (75%)';
    color: #666;
  }
  .tablet-10 {
    width: 81.33333333%;
  }
  .tablet-10:after {
    content: ' (83%)';
    color: #666;
  }
  .tablet-11 {
    width: 89.66666667%;
  }
  .tablet-11:after {
    content: ' (92%)';
    color: #666;
  }
  .tablet-12 {
    width: 98%;
  }
  .tablet-12:after {
    content: ' (100%)';
    color: #666;
  }
}
@media only screen and (min-width: 1024px) {
  .desktop-1 {
    width: 6.33333333%;
  }
  .desktop-1:after {
    content: ' (8%)';
    color: #666;
  }
  .desktop-2 {
    width: 14.66666667%;
  }
  .desktop-2:after {
    content: ' (17%)';
    color: #666;
  }
  .desktop-3 {
    width: 23%;
  }
  .desktop-3:after {
    content: ' (25%)';
    color: #666;
  }
  .desktop-4 {
    width: 31.33333333%;
  }
  .desktop-4:after {
    content: ' (33%)';
    color: #666;
  }
  .desktop-5 {
    width: 39.66666667%;
  }
  .desktop-5:after {
    content: ' (42%)';
    color: #666;
  }
  .desktop-6 {
    width: 48%;
  }
  .desktop-6:after {
    content: ' (50%)';
    color: #666;
  }
  .desktop-7 {
    width: 56.33333333%;
  }
  .desktop-7:.........完整代码请登录后点击上方下载按钮下载查看