web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网站模板
>
后台模板
HTML5移动优先的响应式动画网格布局模板
分类:
后台模板
日期:
2024-05-14
点击(6)
评论(0)
演 示
免费下载
简介
##### HTML结构 这个网格布局的基本HTML结构如下: ```html
Menu
Close
``` ##### 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; } } ```
相关推荐
设计团队博客css网站模板
无人机数码商店网站模板
移动版猎豹安全浏览器官网html5动画引导页
微信小程序的手势密码
白色简约布局html5模板
响应式商品展示和商品信息比较网格布局界面
广告
广告