作为一名前端开发人员，工作的一部分就是应用不同的技术和方法来实现所需的 UI 和 UX。也许您与设计团队合作并实现他们的设计。我知道当我查看设计时（即使我知道我不会构建它），我的前端大脑也会开始触发与任务相关的所有事情。
让我们看看我的意思。
查看来自 Riko Sapto Dimo 的 美食菜谱网站的精美 Dribbble 作品。
这是一个非常吸引人的设计，其中包含大量需要从前端网页设计和开发角度考虑的内容。
我们将主要讨论设计模式选择和 HTML/CSS 技术选择。前端开发的工作远不止这些。可访问性！性能！语义！设计系统！ 这些也都是非常重要的方面。
多行填充文本
啊，是的，文本具有跟随文本行长度的背景的这种外观。我们过去将其称为 多行填充文本，并研究了许多实现方法。处理它的最简单、最现代的方法是使用box-decoration-break。
查看 Chris Coyier 在 CodePen 上撰写的名为 使用 box-decoration-break 实现多行填充 的 Pen (@chriscoyier)。
Flexbox 头部
该头部区域非常适合使用 Flexbox。它是一个单向布局，包含不同大小的元素以及它们之间的不同间距。用 Flexbox 表达它将比任何其他方法都更容易，并且不需要任何固定大小或魔法数字——更不用说灵活了！
网格布局
此处页面整体布局可以用 CSS 网格 精美地表达。请记住，Flexbox 和网格并不矛盾。放置在网格单元格中的元素可以是 Flexbox！就像上面的头部一样，这非常有意义。作为网格单元格的主内容区域和页脚，可能都可以使用这两种方法。
垂直书写
这并非最容易实现的事情！您最好的选择是使用书写模式。 Jen Simmons 已经写过这方面的内容，以下是一个演示
查看 Jen Simmons 在 CodePen 上撰写的名为 书写模式演示——标题 的 Pen (@jensimmons)。
行截断
看起来我们在这里进行了一些截断。从整体性能的角度来看，我们可能希望发送的数据仅为几行长。但是，如果必须，前端也可以提供帮助。此处显示三行文本，末尾带有省略号。也许设计确实需要副本始终最多为三行。这称为 行截断。
查看 Chris Coyier 在 CodePen 上撰写的名为 行截断 的 Pen (@chriscoyier)。
自定义字体
与当今大多数网站一样，此设计也使用了自定义网络字体。对于如此醒目的设计，我会非常小心我的 字体加载技术。我的直觉告诉我，我更喜欢 FOIT 而不是 FOUT，理想情况下，我会尽可能地缓存该字体文件，这样我们就不会经常遇到这两种情况。
图像上的文本
“晚餐菜单”文本正位于下方一些繁忙的照片图像之上。尽管如此，它仍然可读，这主要是因为文本的亮白色与较暗的图像形成对比。 我们过去详细介绍过对此进行思考。白色文本放在较暗的图像上通常是最佳选择，并且足够暗，以至于几乎任何图像都可以。不过，还有其他选择，例如渐变和 模糊（此处的页脚也使用了模糊）。
查看 Chris Coyier 在 CodePen 上撰写的名为 ByKwaq 的 Pen (@chriscoyier)。
SVG 图标/星级评定
设计中散布着许多简单的矢量图标。这些肯定是 SVG 图标系统的最佳选择。 这是我目前推荐的 SVG 图标系统方法。 内联 SVG。简单而强大。
这些星级评定可能也属于 SVG 领域。 这是一个不错的选项集合。 从单选按钮逐步增强似乎始终是一种明智的方法
查看 Jake Albaugh 在 CodePen 上撰写的名为 CSS：单选输入星级 的 Pen (@jakealbaugh)。
汉堡菜单
在像这样的较大屏幕设计中，它可能显得有些多余，尤其是在导航已经可见的情况下。但是，如今很难避免这种情况，并且需要说明的是，无论您在网站的哪个位置查看，都需要对用户进行培训，让他们了解网站导航可能发生的位置。
查看 Eric Grucza 在 CodePen 上撰写的名为 带文本更改的汉堡菜单翻转 的 Pen (@egrucza)。
设计中还有其他我没有提到的内容会立即让您想到吗？
Chris，我看到了一些可能有用的额外内容
如果获得的背景图像太亮，并且想要将其变暗而无需返回给设计师使图像变暗，则 CSS mask-image 会很有用
组件！只是关于如何“分割”事物的总体思考（超出 Flexbox 头部和 CSS 网格）。可重用内容，例如圆形图像头像、星级系统等。
颜色和类型系统。不仅是如何加载这些内容，还包括获取蓝色的色调、字体缩放的层次结构等，以便我们可以继续保持这些类型系统的一致性和在网站其他部分的有用性
我的第一个想法……移动端设计在哪里？
我也是这么想的。我的大脑开始尝试分解将它“折叠”到移动端的多种方法。
这也是我的第一个想法。以及我将如何拆分/共享/加载多个样式表之间的 CSS。
一系列文章，将 Dribbble（或其他）的设计实际编码出来，将会非常棒。概述用于实现这些功能的技术很酷，但使用 Flexbox 和 CSS Grid 的实际代码来真正将这些功能变为代码将非常棒，并且可以作为优秀的教程。我知道我个人不太擅长理论示例，但看到一些实际应用的东西，才能真正理解它。
我很高兴地说，我刚刚发布了一系列文章中的第一篇，我在其中探索了 Dribbble 设计的编码——https://medium.com/p/dribbble-designs-in-code-part-1-venue-landing-page-bc5b7f22b986
它比这里描述的要简单得多，因为这是我的第一个 :) 非常欢迎反馈！
我想的是，“我做不了其中一些东西——我必须支持 IE10！”所以，我必须查找旧的方法。
我不能使用 box-decoration-break，但 box-shadow 方法似乎有效。
图像模糊看起来很丑，但可以实现。https://www.jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
其他的似乎都兼容。我很高兴我不再需要支持 IE7 了。
像往常一样，很棒的文章，Chris！ :)
关于 flexbox 页眉的一个快速评论。我认为即使它不需要多维布局，您也可以使用 css 网格获得相同级别的灵活性。
太棒了！
你能解释一下代码的作用吗，特别是 grid: auto / auto-flow auto;
我尝试查找 grid: 的组合含义，但我不确定……所以希望你能给个提示。=)
@Michael： “grid:” 只是网格布局（即 grid-template-rows/columns/area/auto-flow 等）的简写——这里特别地将 grid-auto-flow 设置为 column（斜杠右侧），从而创建所需的水平对齐页眉元素的效果。
有关可能需要使用此简写的原因的更多详细信息，请阅读 Rachel Andrews 在此处的精彩文章：https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/#the-grid-shorthand-the-explicit-and-implicit-grid
我想看看那个页眉的 flex 代码。你是如何实现不同的宽度和间距的？我仍然没有完全掌握 flex……
Tom，顶部使用 flex box 你会使用 justify-content: space-between 和 align-items: center。大多数项目将作为子项直接位于主导航 div 中。但是，您可以看到导航链接特别地进行了分组。您需要将它们放在另一个 div 中，该 div 可能是 display: inline 或使用嵌套 flex box 取决于情况。您可以使用 basis 参数设置项目的初始宽度，但我发现尽可能使用默认值并且不过度复杂化是最好的。像这样的导航按钮通常会为这些元素分配默认的填充，这将为您提供正确的布局。您希望让 justify-content: space-between 为您完成工作。
右侧的元素也是如此。它们将使用类似的方法进行分组。
我认为使用网格实际上会更容易。
是的，它是一个单向布局，但 flex 无法提供网格可以提供的间距控制。
我使用过一点 Flex——在一个当前项目中使用——但间距一直是均匀的。正是不同的事物宽度让我感到困惑。在我用 flex-basis 控制像这样的宽度的这段时间里，它实际上什么也没做。没有任何变化。我仍在学习这个和网格。
网格是一个令人兴奋的新组件，但为本文中显示的页眉设置网格并不容易。设置三个属性（display: flex、justify-content: space-between 和 align-items: center），就完成了。此外，目前 IE 对网格的支持只有大约 25%。IE 的普及率下降到接近 12%，但这是全球和全国的统计数据。如果您以企业、银行或金融科技为目标，您会发现存在更高的 IE 使用率统计数据，不幸的是。
另一个问题可能是如何处理那个大型背景图像。由于很大一部分似乎是纯色（或纹理），因此它可能是多个背景规则的良好用例。我还遇到过客户不希望主要内容块（在本例中位于左侧）永远覆盖背景图像部分的情况——解决这个问题会更具挑战性——也许是 shape-outside。这里面的内容很棒（一如既往）。谢谢，Chris！
我发现单选按钮是选择评级的绝佳选择，但当您处理部分值时，它并不是真正用于显示评级的。为此，我发现这是一个很好的替代方案。
每次我收到设计时，这都是我的一部分，我开始逐步了解技术、现代规范和浏览器提供给我们的功能。
我从这篇文章中学到的是，在 2018 年，我们仍在使用一堆技巧来使事情正常工作。
用于星级评定系统的这些单选按钮无法访问 :/
标签中没有文本。您可以在输入元素上添加 aria-label=”# 星星” 来解决此问题。
我想知道他们是如何在页脚中实现模糊背景的？这是我从未见过解决的问题。
backdrop-filter: blur();
-webkit-backdrop-filter: blur();
我的第一个想法之一是“哪些元素我可以重用以及如何重用”。我立即注意到了星级评定，以及平均评分和评论数量；圆形缩略图及其与文本内容块的放置（页眉中的个人资料、页脚中的菜谱、“尝试烹饪这个”在主要内容中）。我喜欢将任何网站视为 UI，并根据更小、可重用、可变的元素来实现它。