文件名称：CSS-Gallery:纯CSS的交互式数据绑定照片库
文件大小：6.91MB
文件格式：ZIP
更新时间：2024-05-21 06:21:58
CSS
＃CSS-Gallery CSS-Gallery展示了CSS和LESS的真正功能。 这是一个完全交互式的照相馆，完全用CSS和构建，没有任何Javascript。 这个例子有点多余，我不建议您在任何地方都没有Javascript的情况下构建实际的交互式应用程序。 但是，这展示了将逻辑移入CSS的许多技术，这些技术通常比尝试手动维护Javascript代码中的每种可能状态要简单得多。 ＃特征 使用汉堡菜单按类别过滤照片 使用右上方的视图图标在缩略图视图和列表视图之间切换 点击照片可打开显示较大视图的比例缩放灯箱 点击灯箱侧面的箭头可直接切换照片。 #Implementation所有资源都可以在的LESS文件中找到。 这是我使用过的一些更有趣的技术。 用LESS进行数据绑定 相册背后的所有数据和逻辑仅包含在。 HTML源代码仅包含空的占位符； 所有内容和行为都通过该文件中数据提供的LESS
【文件预览】：
CSS-Gallery-gh-pages
----photos()
--------Ada Lovelace.jpg(831KB)
--------Richard Stallman.jpg(632KB)
--------Grace Hopper.jpg(298KB)
--------Bjarne Stroustrup.jpg(95KB)
--------Charles Babbage.jpg(245KB)
--------Douglas Engelbart.jpg(1.27MB)
--------Sergey Brin.jpg(881KB)
--------Steve Jobs.jpg(155KB)
--------Linus Torvalds.jpg(93KB)
--------Dennis Ritchie.jpg(298KB)
--------Barbara Liskov.jpg(285KB)
--------Tim Berners-Lee.jpg(485KB)
--------Shafi Goldwasser.jpg(1.08MB)
--------Vint Cerf.jpg(272KB)
--------Brian Kernighan.jpg(147KB)
----package.json(654B)
----gulpfile.js(734B)
----CNAME(21B)
----index.html(9KB)
----.gitignore(3KB)
----styles()
--------_variables.less(122B)
--------gallery-thumbnails.css.map(2KB)
--------category-filters.css(6KB)
--------lightbox.less(4KB)
--------lightbox.css.map(3KB)
--------_mixins.less(347B)
--------gallery-thumbnails.css(5KB)
--------_data.less(2KB)
--------lightbox.css(17KB)
--------gallery-list.css(9KB)
--------gallery-list.less(1KB)
--------category-filters.less(1KB)
--------shell.less(4KB)
--------category-filters.css.map(598B)
--------gallery-thumbnails.less(1KB)
--------shell.css(8KB)
--------gallery-list.css.map(2KB)
--------shell.css.map(3KB)
----README.md(4KB)
----.editorconfig(101B)
----.gitattributes(378B)