企业官网建设流程全解析

vue做网站首页,wordpress手机版弹出式导航,如何做交易网站,php网站部署步骤1. 前言 前端开发一直有一个老大难的问题#xff0c;那就是——瀑布流布局。 效果需求并不复杂#xff1a;卡片错落#xff0c;参差有致#xff0c;看起来高级#xff0c;滚动起来流畅。 就是这样一个看似简单的效果#xff0c;其实已经困扰了前端开发者好多年。 要引…1. 前言前端开发一直有一个老大难的问题那就是——瀑布流布局。效果需求并不复杂卡片错落参差有致看起来高级滚动起来流畅。就是这样一个看似简单的效果其实已经困扰了前端开发者好多年。要引入 JavaScript 库要让内容智能填充要实现响应式布局写无数个媒体查询要实现无限滚动加载要用 JavaScript 处理复杂的布局逻辑……现在经过 Mozilla、苹果 WebKit 团队、CSS 工作组和所有浏览器的多轮讨论它终于有了终极解决方案这就是CSS Grid Lanes。且让我们先翻译它为“CSS 网格车道”吧。之所以叫车道想象一下高速公路有好几条车道车辆会自动选择最短的那条车道排队。CSS Grid Lanes 就是这个原理——你先定义好有几条“车道”列网页内容会自动填充到最短的那一列就像车辆自动选择最不拥堵的车道一样。具体使用起来也很简单三行代码就能实现.container{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}2. 实现原理现在让我们来细致讲解下如何实现开头图中的瀑布流效果。首先是 HTML 代码mainclasscontainerfigureimgsrcphoto-1.jpg//figurefigureimgsrcphoto-2.jpg//figurefigureimgsrcphoto-3.jpg//figure!-- etc --/main然后是 CSS 代码.container{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}代码一共 3 行。display: grid-lanes创建网格容器使用瀑布流布局。grid-template-columns创建车道我们将值设为repeat(auto-fill, minmax(250px, 1fr))意思是至少 250 像素宽的灵活列。浏览器决定创建多少列并填充所有可用空间。gap: 16px表示车道之间有 16px 的间歇。就是这么简单。3 行 CSS 代码无需任何媒体查询或容器查询我们就创建了一个适用于所有屏幕尺寸的灵活布局。更绝的是这种布局能让用户通过 Tab 键在各个栏目之间切换访问所有当前可见的内容而不是像以前那样先滚动到第一列底部然后再返回第二列顶部。它也支持你实现无限循环加载随着用户滚动页面内容无限加载而无需使用 JavaScript 来处理布局。3. 功能强大3.1. 不同车道尺寸Grid Lanes 充分利用了 CSS Grid 的强大功能grid-template-*来定义车道所以很容易创建出富有创意的布局。例如我们可以创建一个布局其中窄列和宽列交替出现——即使列数随视口大小而变化第一列和最后一列也始终是窄列。实现也很简单grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)minmax(16rem,2fr))minmax(8rem,1fr);效果如下3.2. 跨车道由于我们拥有网格布局的全部功能我们当然也可以跨越车道。效果如下实现代码main{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(20ch,1fr));gap:2lh;}article{grid-column:span 1;}media(1250px width){article:nth-child(1){grid-column:span 4;}article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6), article:nth-child(7), article:nth-child(8){grid-column:span 2;}}3.3. 放置项目我们也可以在使用网格车道时显式地放置项目。这时无论有多少列标题始终位于最后一列。实现代码为main{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(24ch,1fr));}header{grid-column:-3 / -1;}4. 改变方向网格车道也可以双向排列上面的所有示例创建的是“瀑布式”布局内容以列的形式排列。网格车道也可以用于创建另一种方向的布局即“砖块式”布局。当使用grid-template-columns定义列时浏览器会自动创建瀑布式布局如下所示.container{display:grid-lanes;grid-template-columns:1fr 1fr 1fr 1fr;}如果你想要反方向的砖块布局使用grid-template-rows.container{display:grid-lanes;grid-template-rows:1fr 1fr 1fr;}5. 容差“容差”是为 Grid Lanes 创建的一个新概念。它允许你调整布局算法在决定放置项目位置时的精确度。回到高速公路的比喻假设 1 号车道前面的车比 2 号车道长了 1 厘米下一辆车要排到哪条车道如果严格按“哪条短选哪条”它会选 2 号车道。但 1 厘米的差距根本不重要这样来回切换车道反而让人困惑。“容差”就是告诉系统“差距小于这个值就当作一样长”。容差默认值是 1em大约一个字的高度。为什么容差很重要呢因为用键盘 Tab 键浏览网页的人比如视障用户会按内容顺序跳转。如果布局乱跳他们会很迷惑。合适的容差能让浏览体验更流畅。6. 现在能用吗目前可以在 Safari 技术预览版 234 中体验其他浏览器还在开发中。苹果 WebKit 团队从 2022 年中就开始实现这个功能现在基本语法已经稳定了。虽然还有些细节在讨论比如属性命名但核心用法不会变。你可以访问 webkit.org/demos/grid3 看各种实际例子。7. 最后我是冴羽10 年笔耕不辍专注前端领域更新了 10 系列、300 篇原创技术文章翻译过 Svelte、Solid.js、TypeScript 文档著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。欢迎围观我的“网页版朋友圈”关注我的公众号冴羽或搜索 yayujs每天分享前端知识、AI 干货。