从设计到代码（第 4 天）
从设计到代码（第 4 天）
我最近正在开发一门课程，名为 三周内完成三个网页设计 .最初它是一个为期 3 周的研讨会材料，旨在成为一个包含许多实践的动手密集型研讨会。主要目标是教没有太多开发经验的人使用 HTML 和 CSS 来重现专业的设计模型——这就是为什么它被称为从设计到代码。
而且我发现即使是工作室中最简单的项目也太长了，所以我决定将它分成三个并形成一个系列。如果您想从一开始就学习该主题，请跟随。
这是 4 部分教程中的第 4 部分，如果您错过了，请查看 第 1 天 , 第 2 天 和 第 3 天 .
最近的新闻
接下来是页面的最后一部分：新闻列表。第一步又是什么？没错，写HTML。在写HTML的时候，我们可以大致分析一下哪些元素需要标注 班级 .在这个阶段你不需要完美。
因为以后在使用 CSS 选择器的时候，如果我们发现一些需要特别注意的元素，我们总是可以回过头来将它们添加到标签中。
新闻列表比较简单，由一个标题和四篇文章组成，每篇文章都有一张图片和一段文字描述。
HTML for the news
注意我们在这里使用的新标签， 文章 . 文章 表示一个独立的实体，比如一条新闻、一条推文、一篇博客等。在编写 HTML 时，我们还需要考虑如何使内容具有语义，即可以直接在编辑器中读取 HTML 代码。许多网页在早期（现在也是）充满了冗余和无意义的标签。当我们写一个页面的时候，我们需要从一开始就考虑可读性和可维护性。
Without CSS
嗯，这看起来不是很吸引人。让我们为其添加一些样式。
Basic Styles for news
添加后 弹性：1 ，新闻正确排列：
Flex 1
现在让我们找一些真实的游戏封面，让它看起来很真实。
Images are now broken
哎呀，整个页面似乎搞砸了！但别担心。您只需要将图像的大小指定为百分比，以便图像自动缩放到其容器大小：
.news img {
宽度：100%；
边界半径：1rem；
}
图片现在可以正确缩放：
Images resized
此外，我们注意到字体比模型中的字体太粗大，标题和图像之间的间距也太近了。
让我们修复它：
. 新闻 p {
字体大小：14px；
字体粗细：较轻；
} h4 {
保证金：1rem 0；
}
现在最终的结果是这样的：
Final look of news section
看起来好多了，不是吗？这样就完成了本页的大部分内容。有些部分我故意省略了，比如图标的使用，按钮的阴影。这些主题将在接下来的章节中与设计一起讨论。
发布您的设计
恭喜，您已经完成了模型的第一次复制。我相信你对你的工作很满意，你真的应该。所以让我们与您的朋友分享这份喜悦吧！
如何在公共平台上发布您的页面，以便世界任何地方的任何人都可以访问它？我们可以使用类似的工具来做到这一点 网络化 或者 涌 .
如果你不想在你的机器上安装一些额外的软件，那么 网络化 会更容易。注册账号后，只需拖拽本地目录即可 第 1 周 到它的网站。几分钟后 网络化 将完成部署并为您提供可以与他人共享的 URL。很简单。
Using Netlify to deploy your site
此外，我们将介绍一些关于使用 涌 在这里发表你的作品。首先，你需要安装[ 节点.js](https://nodejs.org/en/) .安装后，您将拥有 npm 命令行中的包管理器。
现在，让我们安装命令行工具 涌 .您需要在终端程序中执行它：
npm install --global 激增
然后进入你的工作目录，也就是 第 1 周 ：
cd ~/tutorial/3w3ps/week-1
涌
此时， 涌 会提示你登录或创建账号，然后会随机给你分配一个域名，完成部署。
Using the Surge command line tool
您现在可以访问公共网络中的 URL 或与他人共享。
Published to the internet (credit to Roman Zakhareko for the design)
概括
本周，我们学习了如何解构模型并编写相应的 HTML 文档，学习了如何使用 柔性 layout 来实现导航栏，如何控制元素的均匀分布，学习如何对文档流之外的元素使用绝对定位，以及其他一些常见的排版技术（如使用 填充 和 利润 ）， ETC。
我相信你已经迫不及待地想用你新获得的技能做点什么，所以这里有一些有趣的挑战。
挑战一
找到您经常访问的网站，并使用 Chrome 的 DevTool 检查该网站的导航栏。看看我们上面讨论了哪些知识，哪些知识对您来说是新的。另外，您可以尝试按照我们这里介绍的方法重新实现导航栏。
- 编写语义 HTML 标签
- 布局与
柔性 - 使用边距和填充调整排版
挑战 2
检查您最喜欢的网站的登录页面，分析其字体和布局，并尝试在本地复制它。您可能需要注意这些：
- 编写语义 HTML 标签
- 字体的使用
- 背景色和前景色的组合
- 利用
柔性布局 - 使用边距和填充调整排版
在下周，我们将了解更多关于 柔性 布局，在垂直方向，使用网格进行更复杂的布局，以及不同高度的布局元素。我们还将介绍如何使用外部字体和图标使页面更有趣。
恭喜！你成功了。如果您跟随并发布您的网站，您应该感到非常自豪。如果您在关注时有任何不清楚的部分，请不要犹豫在下面发表评论，我会修复它们。
如果你想了解更多并享受本教程中的形式和节奏，我有 给你的一本书 也。它包含三个项目，结构和这个一样——边做边学，每个部分后面都有详细的解释，最后还有一些挑战。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
