Discuz! Board

 找回密碼
 立即註冊
搜索
熱搜: 活動 交友 discuz
查看: 39|回復: 0

像扑克牌一样散布在他的页面上的图片

[複製鏈接]

1

主題

1

帖子

5

積分

新手上路

Rank: 1

積分
5
發表於 15:08:39 | 顯示全部樓層 |閱讀模式
左:对于较小的尺寸,我将图像组变成水平滚动面板。中:在中等尺寸的屏幕上,我垂直分散图像以保持纵向的视觉层次结构。右:对于更大的屏幕,我水平重新排列图像。(大预览) 这些乍一看似乎是随机排列的图片,但它们是故意放置的,并让布罗多维奇的设计充满了动感。今天,即使在设计灵活的布局时,我们也可以使用相同的技术。 对于我的第一个受布罗多维奇启发的设计,我在视口上散布了四个不同大小的图像。我可以根据屏幕尺寸水平、垂直甚至对角地排列这些图片。 为了帮助我设计跨屏幕尺寸的一致体验,我用一系列简短的草图制作了故事板。 左:在中等尺寸。

的屏幕上,我垂直分散图像以保持纵向的视觉层次结构。右:对于更大的屏幕,我水平重新排列图像。(大预览) 为了开发此设计,我结合使用了 CSS 网格、Flexbox 和转换。我的标记是最小且有意义的,仅使用三个元素进行布局;一个顶级标题、运行文本 Whatsapp 号码列表 的主要元素以及包含四个图像的图形元素:复制 对于较小的屏幕,我只需要颜色和排版的基础样式,因为正常流程可以处理我的单列布局。在正常流程中,元素根据文档的书写模式依次显示。如果您对这些概念不熟悉,写了一本很棒的入门书。 为了开发与大屏幕尺寸一致的小屏幕设计,我在水平滚动的图形元素内交替旋转图像。由于浏览器默认将 Flex 容器设置为不换行并沿水平轴排列其 Flex 项目,因此我只需要应用 到我的图形元素: figure { display: flex; } 复制 通过确保我的图形永远不会超过我的视口的宽度并将水平溢出设。



置为滚动,我开发了一个简单的滚动面板,它可以包含我需要的尽可能多的图像: 复制 为了用图像填充所有水平空间,我使用了 flex-grow 属性。flex-grow 控制元素扩展以占据容器中可用空间的比例,-则相反。此属性指定当容器比其组合宽度窄时元素尺寸减小的比率。我希望我的弹性项目能够增长以填充任何可用空间,但不缩小制 主体:120+ 原生 React UI 组件与 全兼容 尝试 都允许元素的宽度完全流动,对它们的宽度或窄度没有限制。有时,弹性项目在增大或缩小之前应以特定尺寸开始。在 中,-为元素在弯曲之前提供了一个起始宽度:复制 为了从样式表中节省一些字节,我可以使用 flex 简写将这三个属性合并为一个。 在 Flexbox 和 Grid 之间进行选择 们经常问我何时使用 或 Grid。当然,我的答案取决于他们正在实现的元素的样式。对于我的四幅图形图像集,我可以使。


回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|自動贊助|z

GMT+8, 00:27 , Processed in 0.050209 second(s), 18 queries .

抗攻擊 by GameHost X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回復 返回頂部 返回列表
一粒米 | 中興米 | 論壇美工 | 設計 抗ddos | 天堂私服 | ddos | ddos | 防ddos | 防禦ddos | 防ddos主機 | 天堂美工 | 設計 防ddos主機 | 抗ddos主機 | 抗ddos | 抗ddos主機 | 抗攻擊論壇 | 天堂自動贊助 | 免費論壇 | 天堂私服 | 天堂123 | 台南清潔 | 天堂 | 天堂私服 | 免費論壇申請 | 抗ddos | 虛擬主機 | 實體主機 | vps | 網域註冊 | 抗攻擊遊戲主機 | ddos |