当前位置：首页 > 网站模板 > 后台模板

HTML5移动优先的响应式动画网格布局模板

分类：后台模板日期：2024-05-14 点击(6) 评论(0)

简介

##### HTML结构
这个网格布局的基本HTML结构如下：

```html
<div class="container">
  <button class="menu-toggle" id="menu-toggle" ><span>Menu</span></button>
 
  <div class="sidebar" id="theSidebar" >
    <button class="close-button fa fa-fw fa-close"></button>
    
  </div>
  <div class="main" id="theGrid" >
    <section class="grid">
      <header class="top-bar">
        
      </header>
      <a class="grid__item" href="#">
        
      </a>
      <a class="grid__item" href="#">
        
      </a>
      
      <footer class="page-meta">
        
      </footer>
    </section>
    <section class="content">
      <div class="scroll-wrap">
        <article class="content__item">
          
        </article>
        <article class="content__item">
          
        </article>
        
      </div>
      <button class="close-button"><i class="fa fa-close"></i><span>Close</span></button>
    </section>
  </div>
</div>
```
#####  CSS样式
这个网格布局的Sass代码分为一个基本样式：_base.scss和两个demo单独的样式：style1.scss和style2.scss。另外还有一个用于媒体查询的_mediaqueries.scss。你可以通过这些Sass文件来制作自己的页面样式。如果你不使用Sass，可以直接修改对应的CSS文件。

下面是第一个demo中sass文件的代码：

```html
$item_width: 300px;
$sidebar_width: 300px;
$color_primary: #f5f5f5;
$color_secondary: #fff;
$color_link: #81c483;
$anim-time: 0.5s;
 
@import "base";
@import "mediaqueries";   
```             
媒体查询文件中定义了各种屏幕尺寸对应的网格数量和大小（不使用像素）。

```html
/* Viewport sizes based on column number and sidebar */
$viewport_xs:   $item_width + $sidebar_width; /* 1 column */
$viewport_s:  $item_width * 2 + $sidebar_width; /* 2 columns */
$viewport_m:  $item_width * 3 + $sidebar_width; /* 3 columns */
$viewport_l:  $item_width * 4 + $sidebar_width; /* 4 columns */
$viewport_xl:   $item_width * 5 + $sidebar_width; /* 5 columns */
$viewport_xxl:  $item_width * 6 + $sidebar_width; /* 6 columns */
 
@media screen and (min-width: $viewport_xs) {
  html, 
  body, 
  .container, 
  .main {
    height: 100vh;
  }
 
  .main {
    height: 100%;
    margin-left: $sidebar_width;
  }
 
  .content__item {
    font-size: 1em;
  }
 
  .grid__item {
    padding: 45px 45px 30px;
  }
}
 
@media screen and (min-width: $viewport_s) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
 
  /* 2 columns */
  .grid__item {
    width: 50%;
    border: none;
  }
 
  .grid__item::before {
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 1px solid rgba(74,74,74,0.075);
    transition: opacity 0.3s;
  }
 
  .grid__item:hover::before,
  .grid__item:focus::before {
    border: 3px solid rgba(129,196,131,0.5);
  }
 
  .grid__item--loading.grid__item::before {
    opacity: 0;
  }
}
 
@media screen and (min-width: $viewport_m) {
  /* 3 columns */
  .grid__item {
    width: 33.333%;
  }
}
 
@media screen and (min-width: $viewport_l) {
  /* 4 columns */
  .grid__item {
    width: 25%;
  }
}
 
@media screen and (min-width: $viewport_xl) {
  /* 5 columns */
  .grid__item {
    width: 20%;
  }
}
 
@media screen and (min-width: $viewport_xxl) {
  /* 6 columns */
  .grid__item {
    width: 16.66%;
  }
}
 
/* small screen changes for sidebar (it becomes an off-canvas menu) */
@media screen and (max-width: $viewport_xs - 1px) {
  .sidebar {
    transform: translate3d(-100%,0,0);
  }
  .sidebar.sidebar--open {
    transform: translate3d(0,0,0);
  }
  .sidebar.sidebar--open ~ .main {
    pointer-events: none;
  }
  .top-bar {
    padding: 22px 15px 10px 60px;
  }
  .menu-toggle {
    display: inline-block;
  }
  .sidebar .close-button {
    opacity: 1;
    top: 15px;
    right: 15px;
    pointer-events: auto;
  }
  .title--full {
    font-size: 2em;
  }
  .content__item {
    padding: 80px 20px 40px;
  }
  .close-button {
    padding: 10px 20px;
  }
  .close-button::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: $color_secondary;
    border-bottom: 1px solid $color_primary;
    width: 100vw;
    height: 50px;
    pointer-events: none;
    z-index: -1;
  }
}       
```

web299.com

HTML5移动优先的响应式动画网格布局模板

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面