标签：代码 HTML 字体 使用 设计 news 我们 页面

从设计到代码（第 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 检查该网站的导航栏。看看我们上面讨论了哪些知识，哪些知识对您来说是新的。另外，您可以尝试按照我们这里介绍的方法重新实现导航栏。

1. 编写语义 HTML 标签
2. 布局与 柔性
3. 使用边距和填充调整排版

挑战 2

检查您最喜欢的网站的登录页面，分析其字体和布局，并尝试在本地复制它。您可能需要注意这些：

1. 编写语义 HTML 标签
2. 字体的使用
3. 背景色和前景色的组合
4. 利用 柔性 布局
5. 使用边距和填充调整排版

在下周，我们将了解更多关于 柔性 布局，在垂直方向，使用网格进行更复杂的布局，以及不同高度的布局元素。我们还将介绍如何使用外部字体和图标使页面更有趣。

恭喜！你成功了。如果您跟随并发布您的网站，您应该感到非常自豪。如果您在关注时有任何不清楚的部分，请不要犹豫在下面发表评论，我会修复它们。

如果你想了解更多并享受本教程中的形式和节奏，我有 给你的一本书 也。它包含三个项目，结构和这个一样——边做边学，每个部分后面都有详细的解释，最后还有一些挑战。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1850/59053017

标签：代码,HTML,字体,使用,设计,news,我们,页面
From： https://www.cnblogs.com/amboke/p/16640338.html