安装主题本站基于 Hexo 搭建，用的是🦋Butterfly 主题，你也可以使用其他的主题。 访问Butterfly 主题网页，安装 hexo-theme-butterfly 主题，此时你就可以在【博客目录\themes】下看到 butterfly 文件夹。 1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 如果后续想升级主题，在根目录下运行 ‘npm update hexo-theme-butterfly’ 。 注：升级前请先备份 ‘butterfly’ 文件夹，更新会覆盖新的包，有可能会出现 ‘bug’。 应用主题修改博客目录下的 _config.yml 文件，把主题改为 butterfly ，大概在100行那里。 1theme: butterfly 安装插件如果你  hexo s 时，显示 `扩展包含/layout.pug 块内容包含 ./includes/mixins/post-u ...

初始化 Hexo 在目标路径（自己创建的路径）打开 CMD 命令窗口(（也可以用  Git ）执行以下代码初始化项目。 1hexo init blog-demo(项目名) 注意：这个方式是在你自己创建的目录下重新再创建一个文件夹目录，你可以省略 blog-demo ,可以直接 hexo init 。 进入你的博客路径，输入以下命令，安装相关的依赖。 1npm i 初始化完成后，你的目录下有以下文件及文件夹（如图所示）： 配置解释 配置 解释 scaffolds 生成文章的一些模板 node_modules 依赖包 source 用来存放你的文章 themes 主题 npmignore 发布时忽略的文件（可忽略） _config.landscape.yml 主题的配置文件 _config.yml 博客的配置文件 package.json 项目名称、描述、版本、运行和开发等信息 输入 hexo s （server 的简写）。 此时我们只需要在浏览器下输入地址：http://localhost:4000/ ， ...

准备工作（小白必看）nodejsgitvscodeIDM下载链接：nodejs ​ 这里我准备的是历史版本的下载链接，好像最新版的不更新npm，需要自己去手动更新，总之特别麻烦，尽量下载旧版本。下载链接：git ​ 一键next下去就行，如果有什么特殊需求自行配置，路径什么的自己更改 下载链接：Typroa ​ 这里我准备的下载包，是某个大神经过破解的版本。下载链接：vscode，这是我使用的编辑器 ，你也可以用其他的，不一定要使用我的这个 ​ 注：这是我打包好的下载链接,后续可能会更新，自己去网页搜索下载。当然，下载速度不敢恭维，你可以使用CDN加速下载,或者使用IDM来下载,下面的是国内加速的使用方式,IDM下载在隔壁 123456国内加速链接:vscode.cdn.azure.cn<!-- 原下载链接 -->https://az764295.vo.msecnd.net/stable/30d9c6cd9483b2cc586687151bcbcd635f373630/VSCodeUserSetup-x64-1.68.1.exe<!-- 更改后的链接，新版 ...

CSS定位：掌握元素的精准布局 摘要：CSS定位是实现网页元素精准布局的重要技术之一。本文将介绍CSS中的定位机制，包括相对定位、绝对定位和固定定位，以及如何使用这些定位方法实现元素在页面中的准确定位和布局。 引言：在网页设计和开发中，准确地控制元素的位置和布局是至关重要的。CSS提供了多种定位方法，使开发人员能够精确地定位元素，并实现各种复杂的布局效果。本文将介绍CSS中的定位机制，包括相对定位、绝对定位和固定定位，帮助您掌握元素的精准布局。 相对定位：相对定位是相对于元素在文档流中的原始位置进行定位。通过设置元素的position属性为relative，并使用top、right、bottom、left等属性，可以调整元素相对于原始位置的偏移量。相对定位不会使元素脱离文档流，仍然占据其原有的空间。 12345.relative { position: relative; top: 10px; left: 20px;} 绝对定位：绝对定位是相对于最近的非静态定位父元素进行定位。通过设置元素的position属性为absolute，并使用top、ri ...

CSS文档流简单使用：构建基本网页布局 摘要：CSS文档流是Web开发中重要的概念，它决定了元素在页面中的布局方式。本文将介绍CSS文档流的基本概念和简单使用方法，帮助您了解如何利用文档流创建基本的网页布局。 引言：在Web开发中，实现灵活且有效的网页布局是至关重要的。CSS文档流是指浏览器根据HTML文档中元素的顺序和默认样式进行布局的方式。深入理解CSS文档流的原理和使用方法，可以帮助开发人员更好地控制页面布局。本文将介绍CSS文档流的基本概念和简单使用方法，帮助您构建基本的网页布局。 块级元素和行内元素：在CSS文档流中，元素被分为块级元素和行内元素两种类型。块级元素（block-level elements）独占一行，并且默认情况下会铺满父容器的宽度，如<div>、<p>等。行内元素（inline elements）不会独占一行，它们会根据其内容的大小进行排列，如<span>、<a>等。 块级元素布局：通过合理地使用块级元素，可以实现基本的网页布局。通过设置块级元素的display属性为block，可以使其独占一行，并设置 ...

CSS弹性盒子简单使用：创建灵活的布局 摘要：CSS弹性盒子（Flexbox）是一种强大的布局技术，可以帮助开发人员快速创建灵活的网页布局。本文将介绍CSS弹性盒子的基本概念和简单使用方法，帮助您了解如何利用弹性盒子模型构建适应不同屏幕尺寸和内容变化的布局。 引言：在现代Web开发中，网页布局的灵活性和自适应性变得尤为重要。CSS弹性盒子模型提供了一种简单而强大的方法，通过定义弹性容器和弹性项目的属性，使得网页布局能够根据不同屏幕尺寸和内容变化自动适应。本文将介绍CSS弹性盒子模型的基本概念和简单使用方法，帮助您快速上手创建灵活的布局。 弹性容器的设置：要使用弹性盒子模型，首先需要将容器元素设置为弹性容器。通过将容器的display属性设置为flex，即可将其定义为弹性容器。例如： 123.container { display: flex;} 弹性项目的排列：在弹性容器中，弹性项目默认水平排列。可以通过设置容器的flex-direction属性来改变项目的排列方向。例如，将项目垂直排列： 1234.container { display ...

深入理解CSS盒子模型：构建灵活布局的基石 摘要：CSS盒子模型是Web开发中最基础、最重要的概念之一。它定义了HTML元素在页面中的布局和尺寸计算方式。本文将深入探讨CSS盒子模型的组成部分、计算方式以及常见应用场景，帮助您全面掌握盒子模型的核心概念，实现灵活且精确的页面布局。 引言：在Web开发中，理解CSS盒子模型是建立坚实布局基础的关键。每个HTML元素都被视为一个盒子，这个盒子的大小、边框、内边距和外边距都由盒子模型来决定。正确理解盒子模型的组成部分和计算方式，能够帮助开发人员更好地控制元素的外观和布局。在本文中，我们将详细介绍CSS盒子模型的概念和原理，并提供一些实际应用示例，帮助您全面掌握这一重要概念。 盒子模型的组成部分：CSS盒子模型由四个主要组成部分组成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域包含了元素的实际内容，内边距是内容区域与边框之间的空白区域，边框定义了元素的边界，外边距则是元素与其他元素之间的空白区域。 盒子模型的计算方式：在CSS中，元素的宽度和高度是由内容区域的大小、内边距、 ...

深入了解CSS关系选择器：精确定位元素的艺术 摘要：CSS关系选择器是Web开发中不可或缺的工具之一。它们通过定义元素之间的关系来精确选择和样式化HTML元素。本文将深入探讨CSS关系选择器的不同类型和用法，帮助您掌握这一强大的选择器，提升网页设计的灵活性和个性化。 引言：CSS关系选择器是Web开发人员的得力助手，它们使我们能够根据元素之间的关系更精确地选择特定的HTML元素。不同类型的关系选择器使得我们可以定位并样式化具有特定关系的元素，从而实现更精细的布局和视觉效果。在本文中，我们将深入探讨CSS关系选择器的多种类型，介绍它们的语法和示例，帮助您更好地理解和应用这些强大的选择器。 后代选择器：后代选择器（Descendant Selector）通过元素之间的嵌套关系选择元素。它使用空格来表示嵌套关系，可以选择指定元素下的所有后代元素。例如，要选择所有<ul>元素内的<li>元素，可以使用以下选择器： 123ul li { /* 样式定义 */} 这样，所有嵌套在<ul>元素内的<li>元素都将被选择并应用 ...

探索CSS表格属性：创建灵活美观的网页表格 引言：表格是Web开发中常用的元素之一，用于展示和组织数据。CSS表格属性为我们提供了广泛的控制选项，使我们能够创建具有吸引力和功能性的网页表格。无论您是初学者还是有经验的开发人员，深入了解CSS表格属性对于创建灵活美观的表格至关重要。本文将引导您逐步了解一些常用的CSS表格属性及其用法。 一、表格布局属性：表格布局属性用于控制表格的整体布局和尺寸。以下是一些常见的表格布局属性： width：用于设置表格的宽度，可以使用像素、百分比或自适应的值。 border-collapse：用于定义表格边框的合并方式，可以是”collapse”（合并边框）或”separate”（分离边框）。 table-layout：用于设置表格的布局算法，可以是”fixed”（固定布局）或”auto”（自动布局）。 二、表格边框属性：表格边框属性用于控制表格和单元格边框的样式和宽度。以下是一些常见的表格边框属性： border：用于设置表格和单元格的边框样式和宽度，可以指定边框的颜色、样式和宽度。 border-color：用于设置边框的颜色。 border ...