该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中，您将使用 CSS 向您的网站添加特色引语，如演示网站的第六部分所示。您可以使用此部分来展示最喜欢的名言、关于您的工作的见证或给您的网站访问者的信息。如果您愿意，您也可以将此报价超链接到另一个网页。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。 先决条件 要遵循本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 为特色报价部分创建样式规则 要创建特色引述部分，您将创建一个类来设置容器的样式和一个类来设置特色文本的样式。在您的styles.css文件中，添加以下代码片段： 样式文件 . . . /* Section 6: Featured Quote */ .column-quote { width: 90%; height: 475px; padding: 40px; padding-left:70px; padding-right: 70px; ..
Category : 教程系列
该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中，您将学习如何理解和创建用于样式化和控制 HTML 内容布局的CSS 规则（也称为规则集）。<h1>在解释 CSS 规则的每个组件之前，本教程将从一个示例 CSS 规则开始，该规则将HTML 元素设为蓝色，以研究 CSS 规则的工作原理。 先决条件 要遵循本教程，请确保您已按照上一教程如何设置 CSS 和 HTML 练习项目 中的说明设置必要的文件和文件夹。 探索示例 CSS 规则 下面是一个 CSS 规则的例子。将以下规则写入您的styles.css文件： 样式文件 h1 { color: blue; } 保存您的styles.css文件。请注意，您已color: blue向右缩进两个空格。这种缩进是编写 CSS 样式规则的推荐最佳实践，因为它使开发人员更容易阅读代码。 ..
介绍 Reactstrap提供了预构建的 Bootstrap 4 组件，可以提供很大的灵活性和预构建的验证。这使我们能够快速构建漂亮的表单，保证给人留下深刻印象并提供直观的用户体验。 在本教程中，您将使用 Reactstrap 在 React 应用程序中构建登录表单。 先决条件 Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 对 React 有一定的了解。您可以阅读我们的“如何在 React.js 中编码”系列。 对 Bootstrap 4 有一定的了解，可以阅读Bootstrap 4.6官方文档。 本教程已通过 Node v16.2.0、npmv7.14.0、reactv17.0.2、reactstrapv8.9.0 和bootstrapv4.6.0 验证。 步骤 1 — 设置项目 从使用create-react-app生成 React App 开始，然后安装依赖项： npx create-react-app reactstrap-example 切换到新的项目目录： cd reactstrap-example 现在，您可以运行 React 应用程序： npm start 修复项目的任何错误或问题。并localhost:3000在网络浏览器中访问。 一旦你有了一个可用的 React 应用程序，你就可以安装reactstrap： npm install ..
该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中，您将通过使用CSS 类设置八个 HTML容器的样式来重新创建演示网站“项目”部分的平铺布局。您还将向这些元素添加伪类，以便当用户将鼠标悬停在它们上面时它们会改变颜色。如果您想个性化尺寸，请随意将 Sammy 的信息换成您自己的信息。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。<div>hover 先决条件 要遵循本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 添加和样式化标题标题 首先，将标题“项目”添加到网页上的新部分，确保不要删除您从之前的教程中添加的任何内容。</div>在index.html文件中的最后一个结束标记后添加以下代码片段： 索引.html . . . <!–Section 3: Projects–> <h2 >Projects</h2> . . . 此代码片段的第一行是一条注释，用于标记您将添加以创建网站第三部分的代码。注释用于保存代码的解释性注释以备将来参考，浏览器不会向站点访问者显示（除非他们查看网页的源代码）。第二行添加标题文本“项目”并为其指定标题元素<h2>。 接下来，您将通过创建一个section-heading类来设置标题标题的样式。返回styles.css文件并将以下代码片段复制并粘贴到文件底部： 样式文件 . . . /* ..
如何使用 CSS Workshop Kit 材料构建网站 该研讨会工具包旨在帮助讲师指导观众从头到尾完成重新创建和个性化CSS 网站的步骤。该工具包中的材料可以在两个 90 分钟的课程或一个三个小时的课程中涵盖，但有些小组可能需要更少的时间。参与者将了解 CSS 并准备好部署到云中的个人网站。 研讨会参加者应该对 HTML 有一定的了解。如果参会者不熟悉 HTML，他们可以在开始本次研讨会之前学习如何使用 HTML 构建网站系列。 该研讨会工具包的目的是为演讲者提供一套完整的资源，以主持关于使用 CSS 构建网站的研讨会。这包括： 幻灯片和演讲者笔记引导参与者建立他们的网站项目、动手练习和概念解释。 一个在线教程系列，其中包含可复制的代码片段、概念概述以及用于进一步自定义项目网站的其他 CSS 课程和技巧。 一个演示网站，向参与者展示他们将在研讨会结束时构建的内容。 此研讨会工具包页面旨在帮助教师为研讨会做准备并为学生提供一个起点。教师应将学生指向此页面，以便他们可以访问幻灯片（其中包含有用的链接）、补充教程系列和演示网站。 如果需要，学生可以通过阅读下面的介绍来准备研讨会，并确保他们在研讨会开始前准备好先决条件。 希望了解如何在 DigitalOcean 上免费发布网站的参与者可以访问我们的教程如何使用 DigitalOcean 应用程序平台将静态网站部署到云端。 介绍 这个基于项目的教程系列将通过使用我们的演示站点作为模型构建个人网站，向您介绍层叠样式表 (CSS)，这是一种用于控制网站呈现的样式表语言。虽然我们的演示站点以鲨鱼萨米为特色，但如果您希望个性化您的站点，您可以用自己的信息来切换萨米的信息。 除了 HTML 和 JavaScript，CSS 是万维网的核心技术之一。如果您对 HTML 有一定的了解并希望提高您的前端开发技能，那么学习 CSS 是一个很好的下一步。 本教程系列的前半部分将通过动手练习介绍 CSS，本教程系列的后半部分将提供重新创建演示网站的步骤。如果您想立即开始构建演示网站，您可以从教程如何设置您的 CSS 和 HTML 网站项目开始，然后从那里继续。 在本 CSS 教程系列结束时，您将准备好将网站部署到云的文件，并了解如何使用 HTML 和 ..
介绍 PostgreSQL也称为“Postgres”，是一种开源关系数据库管理系统 (RDBMS)。近年来，它的受欢迎程度急剧增长，许多开发人员和公司将他们的数据从其他数据库解决方案迁移到 Postgres。 迁移数据库的前景可能令人生畏，尤其是在从一个数据库管理系统迁移到另一个数据库管理系统时。pgLoader是一个开源的数据库迁移工具，旨在简化迁移到 PostgreSQL 的过程。它支持从多种文件类型和 RBDMS（包括MySQL和SQLite）迁移到 PostgreSQL。 本教程提供了有关如何安装 pgLoader 并使用它通过 SSL 连接将远程 MySQL 数据库迁移到 PostgreSQL 的说明。在本教程即将结束时，我们还将简要介绍一些 pgLoader 可能有用的不同迁移场景。 先决条件 要完成本教程，您需要具备以下条件： 访问两台服务器，每台服务器都运行 Ubuntu 18.04。两台服务器都应该有一个防火墙和一个配置了 sudo 权限的非 root 用户。要设置这些，您可以按照我们的 Ubuntu 18.04 初始服务器设置指南进行操作。 MySQL 安装在其中一台服务器上。要进行设置，请按照我们关于如何在 Ubuntu 18.04 上安装 MySQL 的指南的步骤 1、2 和 3进行操作。请注意，为了完成此处链接的所有先决条件教程，您需要配置MySQL根用户以使用密码进行身份验证，如MySQL 安装指南的第 3 步所述。 PostgreSQL 安装在另一台服务器上。要进行设置，请完成我们的指南如何在 Ubuntu 18.04 上安装和使用 PostgreSQL 的第 1 步。 您的MySQL ..
他们说好东西会留给等待的人，当谈到网络上的文字装饰时，事实证明这是非常正确的。在CSS文本装饰模块3级定义了Web上的一些伟大的新的方法来装饰文本，浏览器终于开始对他们有很好的支持。使用border-bottom代替适当的文本下划线以获得不同的下划线颜色的时代可能最终会过去。 结果可能会有所不同：支持仍然有限，因此本文中的示例可能无法正确显示，具体取决于您使用的浏览器。 文字装饰 该文本装饰用财产只有约值之间的选择无，下划线，上划线和线路通过，但随着新的建议是将成为新的简写文本的装饰色，文字装饰风格和文本- 装饰线属性。例如，这是一个彩色双下划线： .fancy { -webkit-text-decoration: hotpink double underline; text-decoration: hotpink double underline; } 花式下划线 文字装饰颜色 就像你想象的那样工作。终于有办法改变文字装饰颜色了！ 文字装饰风格 text-decoration-style用于定义文本装饰的类型，新推荐带来两个新值：double和wavy： .wavy { text-decoration: underline; -webkit-text-decoration-color: salmon; text-decoration-color: salmon; -webkit-text-decoration-style: wavy; text-decoration-style: wavy; } 波浪形装饰 文字装饰线 text-decoration-line接受underline、overline、line-through和blink 的值（但是不推荐使用blink ）： .strike { -webkit-text-decoration-color: red; text-decoration-color: red; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; } 罢工这个 文字装饰跳过 使用text-decoration-skip我们可以避免在其应用的元素的部分上进行装饰步骤。可能的值是objects，spaces，ink，edges和box-decoration。 ink：最后，一种防止文本装饰重叠字形下行的方法： .ink ..
介绍 应用经常需要执行POST和GET其他HTTP请求。 Flutter 提供了一个支持发出 HTTP 请求的http包。 在本文中，您将创建一个示例 Flutter 应用程序，该应用程序使用该http包执行 HTTP 请求以显示占位符信息。 先决条件 要完成本教程，您需要： 下载并安装Flutter。 下载并安装Android Studio 或 Visual Studio Code。 建议为您的代码编辑器安装插件： Flutter和Dart为 Android Studio 安装的插件。 Flutter 为 Visual Studio Code 安装的扩展。 本教程通过 Flutter v1.22.2、Android SDK v30.0.2、Android Studio v4.1 验证。 步骤 1 — 设置项目 为了进行设置，您将创建一个示例 Flutter 应用程序。 为 Flutter 设置环境后，您可以运行以下命令来创建新应用程序： flutter create flutter_http_example 导航到新的项目目录： cd flutter_http_example ..
介绍 平滑滚动是指用户不是单击按钮并立即被带到同一页面的不同部分，而是通过滚动动画导航到那里。这是网站上那些微妙的 UI 功能之一，可以产生审美差异。 在本文中，您将使用react-scrollnpm 上的包来实现平滑滚动。 先决条件 您将需要以下内容来完成本教程： 有效的 Git 安装。要进行设置，请查看Git 入门教程。 Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境教程来完成。 本教程已通过 Node v13.14.0、npm v6.14.5、reactv16.13.1 和react-scrollv.1.7.16 验证。 快速入门：使用 react-scroll 您将在本教程中构建一个简单的应用程序，但如果您想快速了解其react-scroll工作原理，请随时参考以下简要步骤： 安装react-scroll： npm i -S react-scroll 导入react-scroll包： import { Link, animateScroll as scroll } from “react-scroll”; 添加链接组件。该<Link />组件将指向您的应用程序的某个区域： <Link to=”section1″> 让我们更深入地探索并构建一个平滑滚动的小型 React 应用程序。 第 1 步 – 安装并运行 React 应用程序 为方便起见，本教程将使用一个入门 ..
介绍 Seafile是一个开源、自托管、文件同步和共享平台。用户可以在自己的服务器上存储和选择性地加密数据，存储空间是唯一的限制。使用 Seafile，您可以使用跨平台同步和受密码保护的链接共享文件和文件夹，这些链接指向具有到期日期的文件。文件版本控制功能意味着用户可以恢复已删除和修改的文件或文件夹。 在本教程中，您将在 Ubuntu 20.04 服务器上安装和配置 Seafile。您将使用 MariaDB 为 Seafile 的不同组件存储数据，并使用 Apache 作为代理服务器来处理 Web 流量。完成本教程后，您将能够使用 Web 界面从桌面或移动客户端访问 Seafile，允许您与服务器上的其他用户或群组或公众同步和共享您的文件。 先决条件 在开始本指南之前，您需要具备以下条件： 按照 Ubuntu 20.04初始服务器设置教程设置一台至少具有 2GB RAM 的 Ubuntu 20.04 服务器，包括 sudo 非 root 用户和防火墙。 安装并配置了 MariaDB 数据库服务器。按照如何在 Ubuntu 20.04 上安装 MariaDB教程中的步骤进行操作。 按照如何在 Ubuntu 20.04 上安装 Apache Web 服务器，为注册域配置虚拟主机的 Apache Web 服务器。 按照此如何在 Ubuntu 20.04 上使用 ..