b2bchain区块链学习技术社区
本文介绍了回到地面求职学习资料，有助于帮助完成毕业设计以及求职，是一篇很好的资料。
对技术面试,学习经验等有一些体会，在此分享。
在之前的几个章节，为了方便我们都是使用云端代码编辑器来编写并运行代码的。这样的好处是可以快速上手编写代码，但是不利于我们了解代码运行的原理。现在，让我们一起回到地面，从最基础的地方去理解它。
这一小节，我们一起实现下面这个个人网站，让我们开始吧。
准备工作
上文所说的「地面」指的是相对于 codepen.io 这种在线工具，你自己的电脑，我们一般称之为「本地（Local）」。之所以在 Codepen 上写代码可以所见即所得，是因为它为我们准备好了编写代码所需要的编辑器和运行代码所需要的环境，也就是我们和计算机交流的地方和计算机展现结果给我们的舞台。但是在本地，就需要我们自己去准备这些了。
让我们先下载一个代码编辑器——VSCode，这是微软出品的一款免费代码编辑器，好看又好用。选择适合你的操作系统的版本，安装即可，过程不再赘述。
有了代码编辑器，还差一个代码运行环境，这个就不需要安装了，其实我们的老朋友浏览器就是。
创建一个最简单的页面
做好了准备工作，现在让我们一起来开始一个最小的项目——一个简单的欢迎页面。在你的电脑上创建一个文件夹，叫做 hello-world。我是 Mac 电脑，我一般习惯创建在用户目录（侧边小房子图标）下，如果你是 Windows 用户，可以选一个非 C 盘的目录。
接下来，打开 VSCode，点击左侧的「打开文件夹」按钮来打开这个文件夹。
打开后，左侧目录区显示的是空的，因为这个文件夹中还没有任何文件。
鼠标移动到左侧目录区，在上方「HELLO-WORLD」那里会显示四个操作 icon。第一个就是创建文件，点击它分别创建三个文件：index.html、script.js 和 style.css，这就是我们所熟悉的网页三剑客。
现在，我们开始编写页面结构。点击左侧目录的 index.html，打开它并在里面写上这段代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello world</title> </head> <body> <h1>Welcome to web world!</h1> </body> </html>
这是最简单的一段 HTML 代码，但是却完整地包含了该有的元素。
第一行 <!DOCTYPE html> 声明了你的文档是 HTML5 内容（HTML 的最新标准），要求浏览器用 HTML5 标准来解析；后面是文档的主体部分，最外层一定是一个 <html>，而且只能有一个，里面分为两部分：<head> 和 <body>；<head> 里面包含这个网页的基本信息，比如在浏览器中打开时显示的图标、标题等，还可以在这里引入一些外部样式和 js 代码；<meta> 标签用来设置网页的一些元信息，比如作者、描述、关键词等，示例中我们设置了它的字符编码为 UTF-8（万维网的最主要的编码形式）；<title> 标签设置了网页的标题为 Hello world；<body> 中包含的是在界面中显示的具体内容，这里只显示了一个最大号的标题。
现在在文件夹中双击 index.html 文件，或者右键选择用浏览器打开，就可以看到你写的第一个网页了。可以看到，在顶部标签上显示的是我们设置的标题「Hello world」，地址栏显示的是这个网页的磁盘路径，内容显示的就是我们写的大标题。它还没有图标，显示的是一个默认的地球。
现在，让我们来给网页加一个图标，让它看起来美美的。网页的图标一般是 ico 格式的（PNG 和 SVG 格式也可以），我一般在 Figma 里面设计好之后用 Favvy Favicon Exporter 插件导出。
上面的插件会导出一个压缩包，解压后把里面的 favicon.ico 复制到我们的 hello-word 文件夹。
接下来，在 index.html 中的 <head> 标签中添加一行：<link rel="icon" href="./favicon.ico">。保存后刷新页面可以看到在浏览器标签上就出现了一个图标。这里 ./favicon.ico 表示的是文件相对路径，./ 表示当前文件夹，所以 ./favicon.ico 就表示当前文件夹下的 favicon.ico 文件，不过 ./ 可以省略。在后面我们引用 CSS 和 JavaScript 的时候也会这么写。
开始设计制作个人网站
这就是一个最简单的页面，它还没有什么内容。接下来我们先花五分钟在 Figma 里面设计一个个人网站，让后用代码实现它。
写代码的时候有一个思维特别重要——模块化思维，就是说在我们看到设计图这一刻，脑海中应该立即把它划分为一个个模块。上图这个网站很简单，我们可以大致将其划分为导航栏、文字简介、作品列表三部分，每一部分还可以再分。有了模块，我们就可以按模块来一个个实现了。
导航栏
首先，我们在 index.html 里面写一下导航栏的基本结构，为了更好地语义化网页，我们使用 <header> 和 <nav> 标签。
<header class="header"> <nav class="nav"> <a href="/"> <img src="./images/icon.png"/> </a> <a href="/">首页</a> <a href="writing">写作</a> </nav> <div class="social"> <a href="https://figma.com/@leadream"> <img src="./images/Figma.svg"/> </a> <a href="https://github.com/leadream"> <img src="./images/github.svg"/> </a> <a href="https://space.bilibili.com/336488122"> <img src="./images/Bilibili.svg"/> </a> </div> </header>
注意保持正确的缩进，这样将鼠标移到代码行号上方可以看到很多折叠符号（朝下的箭头），点击它们我们可以折叠代码。如下图，折叠后可以看到这个导航栏最外层是一个 <header>，里面有一个 <nav> 和 <div>，分别是左边的导航链接和右边的社交平台连接。
对于书写多行类似的代码，这里有一个小技巧。按住 Option（Alt）键，用鼠标点击多个地方就可以生成多个光标，你就可以同时编辑多行啦。怎么样？是不是有点像小时候被罚抄作业同时握住三支笔一起写？
哦，不要忘了，我们代码中 logo 和社交平台的图标地址都是 ./images/ 开头的，表明这些图片都被放在了 images 文件夹下。
现在，我们的网站长这个样子，还很朴素。
现在我们来写一些样式吧。还记得最开始创建的 style.css 文件吗？在 VSCode 里面打开它，开始写样式吧。
这个导航栏在 Figma 中是用 Auto Layout 做的，它和弹性布局很像，所以我们可以用 flex 布局。一般我们直接给这个元素的 display 设置为 flex，justify-content 设置为 space-between 就可以了，这两行样式的意思是让 header 内的元素横向排成一排，在中间穿插相等的空白的间距。同时，参考设计图，我们还给它添加了内边距。
.header { display: flex; justify-content: space-between; padding: 16px 108px; }
现在刷新网页，可以发现没有任何变化，这是因为我们还没有把样式文件引入呢。在 index.html 的代码 <head> 标签中添加一行 <link rel="stylesheet" type="text/css" href="./style.css">，它的作用就是引入样式文件。现在，它长这个样子：
用浏览器的审查元素功能查看一下 <header> 元素，可以发现它内部的元素现在在一排了，就是不怎么整齐，也有了内边距（绿色部分）。还有一点不知道大家发现没有，这个 <header> 竟然没有贴着浏览器的边缘，旁边还有一些空白的地方。这是因为浏览器默认 <body> 元素有一些外边距，我们可以自己写样式把它覆盖掉。不过，浏览还有很多奇怪的样式不是我们希望的，所以我一般使用 normalize.css 这个 CSS 库来覆盖掉它们。
它其实就是写了很多样式来覆盖掉浏览器默认的一些元素样式，具体覆盖了哪些你可以查看源码，我就不多说了。现在我们到其网站下载这个文件（点击 Download 按钮后会进入到代码页面，直接按 Cmd+S 就可以保存这份文件），把它放在当前文件夹下面并引入。
现在我们一起修改一下样式，让导航栏对齐一点。添加了很多行样式，因为不能使用《今天听什么歌》里面提到的 SCSS，所以只能一级一级层叠地写 CSS 选择器。导航栏算是初步完成啦。
现在样式的完整代码如下：
/* 导航栏 */ .header { display: flex; justify-content: space-between; padding: 16px 108px; } a { text-decoration: none; color: #333; transition: color 0.2s; } a:hover { color: #12D7F2; } .header .nav { display: flex; align-items: center; font-size: 16px; } .header .nav a { margin-right: 32px; } .header .nav img { width: 32px; } .header .social { display: flex; align-items: center; } .header .social a { margin-right: 12px; } .header .social a:last-child { margin-right: 0; }这些样式里面值得一说的是弹性布局（Flex），它和 Figma 里面的自动布局（Auto Layout）很像。比如下图，我把代码和设计图进行了对比，它们基本一致。最外层 <header> 标签设置为 flex 布局，它里面有两个元素 <nav> 和 <div>，再设置 <header> 的 justify-content 为 space-between，也就是两个元素中间被空间充满，这样这两个元素就分别位于导航栏两侧了。可以看到右边的设置面板选的也是 Space between，这和 CSS 简直是一样的 。
文字简介
现在我们来一起实现下面两段文字简介，这个就很简单了，一个标题一个段落完事。它的 HTML 代码和 CSS 代码如下：
/* 文字简介 */ .introduction { max-width: 484px; margin: 64px 0; padding: 16px 108px; } .introduction h3 { margin: 0; margin-bottom: 4px; font-size: 28px; line-height: 42px; } .introduction p { margin: 0; line-height: 24px; }因为标题 <h3> 和段落 <p> 默认带有上下外边距，所以我们使用 margin: 0; 将其去掉，并重新调整了标题的下方外边距。同时，我们根据设计稿的标注重新设置了标题的字号，以及它俩的行高，使其看起来更接近设计稿。为了避免文本在宽屏幕上显示很宽不好看，我们给它俩的容器添加了 max-width: 484px; 来限制其最大宽度。
在之前的几个章节，为了方便我们都是使用云端代码编辑器来编写并运行代码的。这样的好处是可以快速上手编写代码，但是不利于我们了解代码运行的原理。现在，让我们一起回到地面，从最基础的地方去理解它。
这一小节，我们一起实现下面这个个人网站，让我们开始吧。
准备工作
上文所说的「地面」指的是相对于 codepen.io 这种在线工具，你自己的电脑，我们一般称之为「本地（Local）」。之所以在 Codepen 上写代码可以所见即所得，是因为它为我们准备好了编写代码所需要的编辑器和运行代码所需要的环境，也就是我们和计算机交流的地方和计算机展现结果给我们的舞台。但是在本地，就需要我们自己去准备这些了。
让我们先下载一个代码编辑器——VSCode，这是微软出品的一款免费代码编辑器，好看又好用。选择适合你的操作系统的版本，安装即可，过程不再赘述。
有了代码编辑器，还差一个代码运行环境，这个就不需要安装了，其实我们的老朋友浏览器就是。
创建一个最简单的页面
做好了准备工作，现在让我们一起来开始一个最小的项目——一个简单的欢迎页面。在你的电脑上创建一个文件夹，叫做 hello-world。我是 Mac 电脑，我一般习惯创建在用户目录（侧边小房子图标）下，如果你是 Windows 用户，可以选一个非 C 盘的目录。
接下来，打开 VSCode，点击左侧的「打开文件夹」按钮来打开这个文件夹。
打开后，左侧目录区显示的是空的，因为这个文件夹中还没有任何文件。
鼠标移动到左侧目录区，在上方「HELLO-WORLD」那里会显示四个操作 icon。第一个就是创建文件，点击它分别创建三个文件：index.html、script.js 和 style.css，这就是我们所熟悉的网页三剑客。
现在，我们开始编写页面结构。点击左侧目录的 index.html，打开它并在里面写上这段代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello world</title> </head> <body> <h1>Welcome to web world!</h1> </body> </html>
这是最简单的一段 HTML 代码，但是却完整地包含了该有的元素。
第一行 <!DOCTYPE html> 声明了你的文档是 HTML5 内容（HTML 的最新标准），要求浏览器用 HTML5 标准来解析；后面是文档的主体部分，最外层一定是一个 <html>，而且只能有一个，里面分为两部分：<head> 和 <body>；<head> 里面包含这个网页的基本信息，比如在浏览器中打开时显示的图标、标题等，还可以在这里引入一些外部样式和 js 代码；<meta> 标签用来设置网页的一些元信息，比如作者、描述、关键词等，示例中我们设置了它的字符编码为 UTF-8（万维网的最主要的编码形式）；<title> 标签设置了网页的标题为 Hello world；<body> 中包含的是在界面中显示的具体内容，这里只显示了一个最大号的标题。
现在在文件夹中双击 index.html 文件，或者右键选择用浏览器打开，就可以看到你写的第一个网页了。可以看到，在顶部标签上显示的是我们设置的标题「Hello world」，地址栏显示的是这个网页的磁盘路径，内容显示的就是我们写的大标题。它还没有图标，显示的是一个默认的地球。
现在，让我们来给网页加一个图标，让它看起来美美的。网页的图标一般是 ico 格式的（PNG 和 SVG 格式也可以），我一般在 Figma 里面设计好之后用 Favvy Favicon Exporter 插件导出。
上面的插件会导出一个压缩包，解压后把里面的 favicon.ico 复制到我们的 hello-word 文件夹。
接下来，在 index.html 中的 <head> 标签中添加一行：<link rel="icon" href="./favicon.ico">。保存后刷新页面可以看到在浏览器标签上就出现了一个图标。这里 ./favicon.ico 表示的是文件相对路径，./ 表示当前文件夹，所以 ./favicon.ico 就表示当前文件夹下的 favicon.ico 文件，不过 ./ 可以省略。在后面我们引用 CSS 和 JavaScript 的时候也会这么写。
开始设计制作个人网站
这就是一个最简单的页面，它还没有什么内容。接下来我们先花五分钟在 Figma 里面设计一个个人网站，让后用代码实现它。
写代码的时候有一个思维特别重要——模块化思维，就是说在我们看到设计图这一刻，脑海中应该立即把它划分为一个个模块。上图这个网站很简单，我们可以大致将其划分为导航栏、文字简介、作品列表三部分，每一部分还可以再分。有了模块，我们就可以按模块来一个个实现了。
导航栏
首先，我们在 index.html 里面写一下导航栏的基本结构，为了更好地语义化网页，我们使用 <header> 和 <nav> 标签。
<header class="header"> <nav class="nav"> <a href="/"> <img src="./images/icon.png"/> </a> <a href="/">首页</a> <a href="writing">写作</a> </nav> <div class="social"> <a href="https://figma.com/@leadream"> <img src="./images/Figma.svg"/> </a> <a href="https://github.com/leadream"> <img src="./images/github.svg"/> </a> <a href="https://space.bilibili.com/336488122"> <img src="./images/Bilibili.svg"/> </a> </div> </header>
注意保持正确的缩进，这样将鼠标移到代码行号上方可以看到很多折叠符号（朝下的箭头），点击它们我们可以折叠代码。如下图，折叠后可以看到这个导航栏最外层是一个 <header>，里面有一个 <nav> 和 <div>，分别是左边的导航链接和右边的社交平台连接。
对于书写多行类似的代码，这里有一个小技巧。按住 Option（Alt）键，用鼠标点击多个地方就可以生成多个光标，你就可以同时编辑多行啦。怎么样？是不是有点像小时候被罚抄作业同时握住三支笔一起写？
哦，不要忘了，我们代码中 logo 和社交平台的图标地址都是 ./images/ 开头的，表明这些图片都被放在了 images 文件夹下。
现在，我们的网站长这个样子，还很朴素。
现在我们来写一些样式吧。还记得最开始创建的 style.css 文件吗？在 VSCode 里面打开它，开始写样式吧。
这个导航栏在 Figma 中是用 Auto Layout 做的，它和弹性布局很像，所以我们可以用 flex 布局。一般我们直接给这个元素的 display 设置为 flex，justify-content 设置为 space-between 就可以了，这两行样式的意思是让 header 内的元素横向排成一排，在中间穿插相等的空白的间距。同时，参考设计图，我们还给它添加了内边距。
.header { display: flex; justify-content: space-between; padding: 16px 108px; }
现在刷新网页，可以发现没有任何变化，这是因为我们还没有把样式文件引入呢。在 index.html 的代码 <head> 标签中添加一行 <link rel="stylesheet" type="text/css" href="./style.css">，它的作用就是引入样式文件。现在，它长这个样子：
用浏览器的审查元素功能查看一下 <header> 元素，可以发现它内部的元素现在在一排了，就是不怎么整齐，也有了内边距（绿色部分）。还有一点不知道大家发现没有，这个 <header> 竟然没有贴着浏览器的边缘，旁边还有一些空白的地方。这是因为浏览器默认 <body> 元素有一些外边距，我们可以自己写样式把它覆盖掉。不过，浏览还有很多奇怪的样式不是我们希望的，所以我一般使用 normalize.css 这个 CSS 库来覆盖掉它们。
它其实就是写了很多样式来覆盖掉浏览器默认的一些元素样式，具体覆盖了哪些你可以查看源码，我就不多说了。现在我们到其网站下载这个文件（点击 Download 按钮后会进入到代码页面，直接按 Cmd+S 就可以保存这份文件），把它放在当前文件夹下面并引入。
现在我们一起修改一下样式，让导航栏对齐一点。添加了很多行样式，因为不能使用《今天听什么歌》里面提到的 SCSS，所以只能一级一级层叠地写 CSS 选择器。导航栏算是初步完成啦。
现在样式的完整代码如下：
/* 导航栏 */ .header { display: flex; justify-content: space-between; padding: 16px 108px; } a { text-decoration: none; color: #333; transition: color 0.2s; } a:hover { color: #12D7F2; } .header .nav { display: flex; align-items: center; font-size: 16px; } .header .nav a { margin-right: 32px; } .header .nav img { width: 32px; } .header .social { display: flex; align-items: center; } .header .social a { margin-right: 12px; } .header .social a:last-child { margin-right: 0; }这些样式里面值得一说的是弹性布局（Flex），它和 Figma 里面的自动布局（Auto Layout）很像。比如下图，我把代码和设计图进行了对比，它们基本一致。最外层 <header> 标签设置为 flex 布局，它里面有两个元素 <nav> 和 <div>，再设置 <header> 的 justify-content 为 space-between，也就是两个元素中间被空间充满，这样这两个元素就分别位于导航栏两侧了。可以看到右边的设置面板选的也是 Space between，这和 CSS 简直是一样的 。
文字简介
现在我们来一起实现下面两段文字简介，这个就很简单了，一个标题一个段落完事。它的 HTML 代码和 CSS 代码如下：
/* 文字简介 */ .introduction { max-width: 484px; margin: 64px 0; padding: 16px 108px; } .introduction h3 { margin: 0; margin-bottom: 4px; font-size: 28px; line-height: 42px; } .introduction p { margin: 0; line-height: 24px; }因为标题 <h3> 和段落 <p> 默认带有上下外边距，所以我们使用 margin: 0; 将其去掉，并重新调整了标题的下方外边距。同时，我们根据设计稿的标注重新设置了标题的字号，以及它俩的行高，使其看起来更接近设计稿。为了避免文本在宽屏幕上显示很宽不好看，我们给它俩的容器添加了 max-width: 484px; 来限制其最大宽度。
在之前的几个章节，为了方便我们都是使用云端代码编辑器来编写并运行代码的。这样的好处是可以快速上手编写代码，但是不利于我们了解代码运行的原理。现在，让我们一起回到地面，从最基础的地方去理解它。
这一小节，我们一起实现下面这个个人网站，让我们开始吧。
准备工作
上文所说的「地面」指的是相对于 codepen.io 这种在线工具，你自己的电脑，我们一般称之为「本地（Local）」。之所以在 Codepen 上写代码可以所见即所得，是因为它为我们准备好了编写代码所需要的编辑器和运行代码所需要的环境，也就是我们和计算机交流的地方和计算机展现结果给我们的舞台。但是在本地，就需要我们自己去准备这些了。
让我们先下载一个代码编辑器——VSCode，这是微软出品的一款免费代码编辑器，好看又好用。选择适合你的操作系统的版本，安装即可，过程不再赘述。
有了代码编辑器，还差一个代码运行环境，这个就不需要安装了，其实我们的老朋友浏览器就是。
创建一个最简单的页面
做好了准备工作，现在让我们一起来开始一个最小的项目——一个简单的欢迎页面。在你的电脑上创建一个文件夹，叫做 hello-world。我是 Mac 电脑，我一般习惯创建在用户目录（侧边小房子图标）下，如果你是 Windows 用户，可以选一个非 C 盘的目录。
接下来，打开 VSCode，点击左侧的「打开文件夹」按钮来打开这个文件夹。
打开后，左侧目录区显示的是空的，因为这个文件夹中还没有任何文件。
鼠标移动到左侧目录区，在上方「HELLO-WORLD」那里会显示四个操作 icon。第一个就是创建文件，点击它分别创建三个文件：index.html、script.js 和 style.css，这就是我们所熟悉的网页三剑客。
现在，我们开始编写页面结构。点击左侧目录的 index.html，打开它并在里面写上这段代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello world</title> </head> <body> <h1>Welcome to web world!</h1> </body> </html>
这是最简单的一段 HTML 代码，但是却完整地包含了该有的元素。
第一行 <!DOCTYPE html> 声明了你的文档是 HTML5 内容（HTML 的最新标准），要求浏览器用 HTML5 标准来解析；后面是文档的主体部分，最外层一定是一个 <html>，而且只能有一个，里面分为两部分：<head> 和 <body>；<head> 里面包含这个网页的基本信息，比如在浏览器中打开时显示的图标、标题等，还可以在这里引入一些外部样式和 js 代码；<meta> 标签用来设置网页的一些元信息，比如作者、描述、关键词等，示例中我们设置了它的字符编码为 UTF-8（万维网的最主要的编码形式）；<title> 标签设置了网页的标题为 Hello world；<body> 中包含的是在界面中显示的具体内容，这里只显示了一个最大号的标题。
现在在文件夹中双击 index.html 文件，或者右键选择用浏览器打开，就可以看到你写的第一个网页了。可以看到，在顶部标签上显示的是我们设置的标题「Hello world」，地址栏显示的是这个网页的磁盘路径，内容显示的就是我们写的大标题。它还没有图标，显示的是一个默认的地球。
现在，让我们来给网页加一个图标，让它看起来美美的。网页的图标一般是 ico 格式的（PNG 和 SVG 格式也可以），我一般在 Figma 里面设计好之后用 Favvy Favicon Exporter 插件导出。
上面的插件会导出一个压缩包，解压后把里面的 favicon.ico 复制到我们的 hello-word 文件夹。
接下来，在 index.html 中的 <head> 标签中添加一行：<link rel="icon" href="./favicon.ico">。保存后刷新页面可以看到在浏览器标签上就出现了一个图标。这里 ./favicon.ico 表示的是文件相对路径，./ 表示当前文件夹，所以 ./favicon.ico 就表示当前文件夹下的 favicon.ico 文件，不过 ./ 可以省略。在后面我们引用 CSS 和 JavaScript 的时候也会这么写。
开始设计制作个人网站
这就是一个最简单的页面，它还没有什么内容。接下来我们先花五分钟在 Figma 里面设计一个个人网站，让后用代码实现它。
写代码的时候有一个思维特别重要——模块化思维，就是说在我们看到设计图这一刻，脑海中应该立即把它划分为一个个模块。上图这个网站很简单，我们可以大致将其划分为导航栏、文字简介、作品列表三部分，每一部分还可以再分。有了模块，我们就可以按模块来一个个实现了。
导航栏
首先，我们在 index.html 里面写一下导航栏的基本结构，为了更好地语义化网页，我们使用 <header> 和 <nav> 标签。
<header class="header"> <nav class="nav"> <a href="/"> <img src="./images/icon.png"/> </a> <a href="/">首页</a> <a href="writing">写作</a> </nav> <div class="social"> <a href="https://figma.com/@leadream"> <img src="./images/Figma.svg"/> </a> <a href="https://github.com/leadream"> <img src="./images/github.svg"/> </a> <a href="https://space.bilibili.com/336488122"> <img src="./images/Bilibili.svg"/> </a> </div> </header>
注意保持正确的缩进，这样将鼠标移到代码行号上方可以看到很多折叠符号（朝下的箭头），点击它们我们可以折叠代码。如下图，折叠后可以看到这个导航栏最外层是一个 <header>，里面有一个 <nav> 和 <div>，分别是左边的导航链接和右边的社交平台连接。
对于书写多行类似的代码，这里有一个小技巧。按住 Option（Alt）键，用鼠标点击多个地方就可以生成多个光标，你就可以同时编辑多行啦。怎么样？是不是有点像小时候被罚抄作业同时握住三支笔一起写？
哦，不要忘了，我们代码中 logo 和社交平台的图标地址都是 ./images/ 开头的，表明这些图片都被放在了 images 文件夹下。
现在，我们的网站长这个样子，还很朴素。
现在我们来写一些样式吧。还记得最开始创建的 style.css 文件吗？在 VSCode 里面打开它，开始写样式吧。
这个导航栏在 Figma 中是用 Auto Layout 做的，它和弹性布局很像，所以我们可以用 flex 布局。一般我们直接给这个元素的 display 设置为 flex，justify-content 设置为 space-between 就可以了，这两行样式的意思是让 header 内的元素横向排成一排，在中间穿插相等的空白的间距。同时，参考设计图，我们还给它添加了内边距。
.header { display: flex; justify-content: space-between; padding: 16px 108px; }
现在刷新网页，可以发现没有任何变化，这是因为我们还没有把样式文件引入呢。在 index.html 的代码 <head> 标签中添加一行 <link rel="stylesheet" type="text/css" href="./style.css">，它的作用就是引入样式文件。现在，它长这个样子：
用浏览器的审查元素功能查看一下 <header> 元素，可以发现它内部的元素现在在一排了，就是不怎么整齐，也有了内边距（绿色部分）。还有一点不知道大家发现没有，这个 <header> 竟然没有贴着浏览器的边缘，旁边还有一些空白的地方。这是因为浏览器默认 <body> 元素有一些外边距，我们可以自己写样式把它覆盖掉。不过，浏览还有很多奇怪的样式不是我们希望的，所以我一般使用 normalize.css 这个 CSS 库来覆盖掉它们。
它其实就是写了很多样式来覆盖掉浏览器默认的一些元素样式，具体覆盖了哪些你可以查看源码，我就不多说了。现在我们到其网站下载这个文件（点击 Download 按钮后会进入到代码页面，直接按 Cmd+S 就可以保存这份文件），把它放在当前文件夹下面并引入。
现在我们一起修改一下样式，让导航栏对齐一点。添加了很多行样式，因为不能使用《今天听什么歌》里面提到的 SCSS，所以只能一级一级层叠地写 CSS 选择器。导航栏算是初步完成啦。
现在样式的完整代码如下：
/* 导航栏 */ .header { display: flex; justify-content: space-between; padding: 16px 108px; } a { text-decoration: none; color: #333; transition: color 0.2s; } a:hover { color: #12D7F2; } .header .nav { display: flex; align-items: center; font-size: 16px; } .header .nav a { margin-right: 32px; } .header .nav img { width: 32px; } .header .social { display: flex; align-items: center; } .header .social a { margin-right: 12px; } .header .social a:last-child { margin-right: 0; }这些样式里面值得一说的是弹性布局（Flex），它和 Figma 里面的自动布局（Auto Layout）很像。比如下图，我把代码和设计图进行了对比，它们基本一致。最外层 <header> 标签设置为 flex 布局，它里面有两个元素 <nav> 和 <div>，再设置 <header> 的 justify-content 为 space-between，也就是两个元素中间被空间充满，这样这两个元素就分别位于导航栏两侧了。可以看到右边的设置面板选的也是 Space between，这和 CSS 简直是一样的 。
文字简介
现在我们来一起实现下面两段文字简介，这个就很简单了，一个标题一个段落完事。它的 HTML 代码和 CSS 代码如下：
/* 文字简介 */ .introduction { max-width: 484px; margin: 64px 0; padding: 16px 108px; } .introduction h3 { margin: 0; margin-bottom: 4px; font-size: 28px; line-height: 42px; } .introduction p { margin: 0; line-height: 24px; }因为标题 <h3> 和段落 <p> 默认带有上下外边距，所以我们使用 margin: 0; 将其去掉，并重新调整了标题的下方外边距。同时，我们根据设计稿的标注重新设置了标题的字号，以及它俩的行高，使其看起来更接近设计稿。为了避免文本在宽屏幕上显示很宽不好看，我们给它俩的容器添加了 max-width: 484px; 来限制其最大宽度。
部分转自互联网，侵权删除联系
最新评论