当前位置:主页 > CSS3库 > 图库 / 图片 >

使用CSS网格实现简单快速的照片库 - Gallery
栏目分类:图库 / 图片   发布日期:2021-08-27   浏览次数:

仅使用CSS 网格布局构建的最小响应式照片库。

使用:

1. 在文档中加载图库样式表。

<!-- 默认-->
<link rel="stylesheet" href="./Gallery.css" />
 
<!-- 允许双行 -->
<link rel="stylesheet" href="./Gallery-OCO.css" />
 
<!-- 禁用调整容器大小 -->
<link rel="stylesheet" href="./RO/Gallery.css" />
 
<!-- 禁用调整容器大小 -->
<!-- 允许双行 -->
<link rel="stylesheet" href="./RO/Gallery.css" />


2. 将您的图像添加到照片库:

<div class="gallery">
  <div class="double-column">
    <img src="images/1.webp">
  </div>
  <div class="double-row">
    <img src="images/2.jpg">
  </div>
  <div>
    <img src="images/3.jpg">
  </div>
  <div>
    <img src="images/4.jpg">
  </div>
  ...
</div>


官方网站:https://github.com/Gnkalk/Vanilla-Gallery

相关热词: 照片库CSS网格Gallery

上一篇:没有了
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库