android 六边形布局,纯CSS响应式六边形网格布局
hexagons.css是一款纯CSS3响应式六边形网格布局系统。通过hexagons.css预设的样式,可以非常轻松的制作出六边形图片网格布局。它的特点还有:
六边形网格会根据容器的宽度自动调整。
六边形网格会保持它们的比例。
每行的六边形图片会在不同的断点时从5个变化到2个。
鼠标滑过六边形时带有标题动画效果。
当前点击的六边形会被高亮,并且可以通过Tab键来切换到下一个六边形。
使用方法
使用该响应式六边形网格布局需要在页面中引入hexagons.css文件。
HTML结构
该响应式六边形网格布局使用无序列表作为它的HTML结构:
-
标题
内容描述
......
自定义六边形网格
六边形的鼠标滑过效果定义在hexagons.css文件中。你可以定义自己的鼠标滑过效果。
在CSS文件中通过media queries(媒体查询)来控制每行的六边形数量。
六边形间隙和尺寸的计算方法
六边形的宽度的计算公式如下:
w = (100 - m) / n
其中:
w代表六边形的宽度。
m代表奇数行六边形的数量。
n代表左侧和右侧margin值。
六边形的高度根据.hex元素的底部padding值来定义。
height = width * sin(60deg)
六边形的水平间距设置为1%的六边形宽度,每一行的第一个六边形都被设置一个左margin值。
m = (w + s)/2
其中:
m代表每行第一个六边形的左外边距。
w代表行六边形的宽度。
s代表六边形的间隙。
六边形的垂直间距与水平间距相同,顶部和底部的外边距为负值。
m = - h + h * cos(60deg) + s * sin (60deg)
其中:
m代表顶部和底部的外边距。
h代表行六边形高度的1/2。
s代表六边形的水平间隙。
android 六边形布局,纯CSS响应式六边形网格布局相关推荐
- html六边形布局,CSS3-纯CSS响应式六边形网格布局
hexagons.css是一款纯CSS3响应式六边形网格布局系统.通过hexagons.css预设的样式,可以非常轻松的制作出六边形图片网格布局.它的特点还有: 六边形网格会根据容器的宽度自动调整. ...
- css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
- 纯CSS响应式的总结
响应式需要兼容的设备及尺寸 手机 (分辨率不统一,320px - 414px) pad(1024px * 768px 横屏 / 768px * 1024px 竖屏 ) pc普屏 (1024px * 7 ...
- CSS - 响应式布局(二)响应式栅格系统
目录 响应式栅格系统 栅格 栅格系统 响应式栅格系统 BootStrap响应式栅格系统 简单说明 利用SCSS实现BootStrap的响应式栅格系统 响应式栅格系统 栅格 在弄清楚响应式栅格系统前,我 ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- 响应式布局html像素值计算,CSS Calc():制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- CSS - 响应式布局(一)媒体查询
目录 响应式布局 引子 理解响应式网页和响应式布局原理 媒体查询 什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法 仿三星官网首页 响应式布局 引子 通过前面两节的学习 CSS - ...
- CSS响应式布局(自适应布局)
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
最新文章
- 在hue当中设置hive当中数据库的控制权限。
- 【数据挖掘】基于密度的聚类方法 - DBSCAN 方法 ( DBSCAN 原理 | DBSCAN 流程 | 可变密度问题 | 链条现象 | OPTICS 算法引入 | 聚类层次 | 族序概念 )
- asp.net webform 使用 html partial,ASP.NET Web Forms
- 51单片机实现4位数以内的加减法
- python 头条 上传_Python+selenium自动化之文件上传
- 95-40-014-生产者-KafkaProducer
- 如何解决mysql数据倾斜_什么是数据倾斜?如何解决数据倾斜?
- 离职阿里4年后,我给年轻人的7点建议
- python pop3_Python POP3 收取邮件
- 如何将Eclipse设置为中文版
- 广州坐标系转换大地2000_实用帖 | 从地方坐标系到2000国家大地坐标系的转换方法...
- Java银行账户管理系统实验总结
- Unix/Linux编程:Xinu中的进程
- 查看获取别人的微信公众号二维码
- Murmur Hash 例子
- CTF--2016中国西安西电华山杯网络安全技能大赛之crackme6
- 高瓴资本+张磊+价值
- 如何调整照片大小kb?将照片缩小到指定的kb方法?
- 【清明特辑】那些虽败犹荣的科技先烈们
- 王延炯_海量数据处理的架构与实践