在你的hexo博客中使用nodeppt，一款迄今为止

在你的hexo博客中使用nodeppt，一款迄今为止最好的网页版演示库

家好，我是明说网络的小明同学。

今天我和大家分享一个非常酷的网页PPT工具，NODEPPT

NODEPPT这可能是迄今为止最好的网页版演示库

一开始看到这个库的时候，我就喜欢上了。因为他效果非常的棒，而且能够非常好的和hexo结合。这样我们能够一次生成，到哪都可以演示PPT，还能配上相应的技术文档，是不是很酷啊！

NODEPPT Demo

项目的演示网址在这：https://nodeppt.js.org/#slide=1

主要说明了这个库包含什么样的功能

NODE PPT Github

官网地址：https://github.com/ksky521/nodeppt

Hexo中使用PPT Demo

以下是我使用官网的demo制作的一个PPT，注意它是嵌入在我这个网页中的，以下网页你可以左右滑动。

https://dianwoshishi.github.io/nodeppt/slides.html

如果你觉得这个功能很酷，想要添加到你的站点里面去，那么就和我一起往下走吧。

如何在Hexo中添加Nodeppt

前提，确保你的noteppt能够正常使用。这是前提，至于怎么熟练的玩好nodeppt，额…… 还是去官网吧，这里不误导人了。

整体的思路是，两步走：

第一步先使用nodeppt在相应的public目录生成相应的文件,如html,js,img等等
在post中引用相应的文件

首先熟悉nodeppt的build方法

输入nodeppt build --help

Usage: nodeppt build [options] [entry]

build html file

Options:
  -m, --map         Release sourcemap
  -d, --dest <dir>  output directory
  -h, --help        output usage information
  Examples:

    nodeppt build slide.md

我们需要使用的就是这个-d参数。目的是将生成的文件放入网站的public目录下

源文件目录说明

存放源文件的目录结构如下所示

root/public
        ├──nodeppt
root/source
├── slideshare
│   ├── another.md
│   ├── build.sh
│   ├── buildlist.txt
│   ├── makefile
│   └── slides.md

buildlist.txt 代表等待生成的ppt文件列表

slides.md
another.md%

build.sh

在slideshare目录下运行本文件，作用是使用nodeppt按上面文件内容的顺序构建，输出目录为public/nodeppt

NODEPPT=/usr/local/Cellar/node/17.5.0/bin/nodeppt
Destination=../../public/nodeppt/
build_files=$(cat buildlist.txt | xargs)
for file in $build_files
do
    # echo $file
    $NODEPPT build ./$file -d $Destination
done

makefile 本文件主要用于使用一个脚本完成所有的工作

all:
        bash build.sh

至此，你使用在当前目录make就能将生成好的PPT网页放入public目录的noteppt目录中。

那么怎么使用呢？

在上一步中，我们生成了ppt文件，放在了public/nodeppt/中，假设文件名为slides.html

那么我们可以在hexo的post中简单的使用如下命令，就可以引用我们的PPT

<iframe src="../nodeppt/slides.html" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>

需要修改的部分就是iframe中的src部分。

最后放下一个一键上线部署的脚本

all:
    make nodeppt
    hexo g 
    hexo d 

nodeppt:
    $(MAKE) -C source/slideshare/

test:
    make nodeppt
    hexo g
    hexo s

deploy:
    make nodeppt
    hexo g 
    hexo d

最后附上本次示例的PPT

试试看左右滑动

https://dianwoshishi.github.io/nodeppt/use-nodeppt-in-hexo-demo.html

参考资料

静态压缩

https://hasaik.com/posts/495d0b23.html

使用Hexo-Neat成功https://github.com/rozbo/hexo-neat

Hexo静态资源压缩https://www.jianshu.com/p/5e48e532ae58

https://rye-catcher.github.io/2019/10/21/Nodeppt-%E5%85%A5%E5%9D%91%E6%8C%87%E5%8D%97/

给博客文章嵌入 PPT 演示https://hexo.fluid-dev.com/posts/hexo-nodeppt/

添加自定义网页

https://www.jianshu.com/p/524b073f9b37

原文的体验更好

https://dianwoshishi.github.io/post/NODEPPT%E8%BF%99%E5%8F%AF%E8%83%BD%E6%98%AF%E8%BF%84%E4%BB%8A%E4%B8%BA%E6%AD%A2%E6%9C%80%E5%A5%BD%E7%9A%84%E7%BD%91%E9%A1%B5%E7%89%88%E6%BC%94%E7%A4%BA%E5%BA%93?dianwoshishi.github.io/post/NODEPPT%E8%BF%99%E5%8F%AF%E8%83%BD%E6%98%AF%E8%BF%84%E4%B

文主要内容

过渡：transition
2D 转换 transform
3D 转换 transform
动画：animation

过渡：transition

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition 包括以下属性：

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

上面的四个属性也可以写成综合属性：

 transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
 transition: all 3s linear 0s;

其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。

如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：

如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下

案例：小米商品详情

效果如下：

2D 转换

转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。

转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。

在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。

2D转换包括：缩放、移动、旋转。

1、缩放：scale

格式：

 transform: scale(x, y);
 transform: scale(2, 0.5);

参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。

取值：大于1表示放大，小于1表示缩小。不能为百分比。

格式举例：

效果：

上图可以看到，给 box1 设置 2D 转换，并不会把兄弟元素挤走。

2、位移：translate

格式：

 transform: translate(水平位移, 垂直位移);
 transform: translate(-50%, -50%);

参数解释：

参数为百分比，相对于自身移动。
正值：向右和向下。负值：向左和向上。如果只写一个值，则表示水平移动。

格式举例：

效果：

上图中，因为我在操作的时候，鼠标悬停后，立即进行了略微的移动，所以产生了两次动画。正确的效果应该是下面这样的

应用：让绝对定位中的盒子在父亲里居中

我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。

可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：

 div {
 width: 600px;
 height: 60px;
 position: absolute; 绝对定位的盒子
 left: 50%; 首先，让左边线居中
 top: 0;
 margin-left: -300px; 然后，向左移动宽度（600px）的一半
 }

如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。

现在，我们还可以利用偏移 translate 来做，这也是比较推荐的写法：

div {
 width: 600px;
 height: 60px;
 background-color: red;
 position: absolute; 绝对定位的盒子
 left: 50%; 首先，让左边线居中
 top: 0;
 transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】
 }

3、旋转：rotate

格式：

 transform: rotate(角度);
 transform: rotate(45deg);

参数解释：正值顺时针；负值：逆时针。

效果：

注意，上方代码中，我们给盒子设置了 transform 中的 rotate 旋转，但同时还要给盒子设置 transition 过渡。如果没有这行过渡的代码，旋转会直接一步到位，效果如下：（不是我们期望的效果）

案例1：小火箭

上方代码中，我们将 transform 的两个小属性合并起来写了。

案例2：扑克牌

rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性。格式如下：

 transform-origin: 水平坐标 垂直坐标;
 transform-origin: 50px 50px;
 transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点

我们来看一下 rotate 结合 transform-origin 的用法举例。

代码如下：

效果如下：

4、倾斜

3D 转换

1、旋转：rotateX、rotateY、rotateZ

3D坐标系（左手坐标系）

如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。

浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。

旋转的方向：（左手法则）

左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。

从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。

格式：

 transform: rotateX(360deg); //绕 X 轴旋转360度
 transform: rotateY(360deg); //绕 Y 轴旋转360度
 transform: rotateZ(360deg); //绕 Z 轴旋转360度

格式举例：

（1）rotateX 举例

效果：

上方代码中，我们最好加个透视的属性，方能看到3D的效果；没有这个属性的话，图片旋转的时候，像是压瘪了一样。

而且，透视的是要加给图片的父元素 div，方能生效。我们在后面会讲解透视属性。

（2）rotateY 举例：

效果：

（3）rotateZ 举例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .rotateZ {
 width: 330px;
 height: 227px;
 margin: 100px auto;
 /* 透视*/
 perspective: 200px;
 }
 img {
 transition: all 1s;
 }
 .rotateZ:hover img {
 transform: rotateZ(360deg);
 }
 </style>
</head>
<body>
<div class="rotateZ">
 <img src="images/z.jpg" alt=""/>
</div>
</body>
</html>

效果：

案例：百度钱包

现在有下面这张图片素材：

要求做成下面这种效果：

上面这张图片素材其实用的是精灵图。实现的代码如下：

2、移动：translateX、translateY、translateZ

格式：

 transform: translateX(100px); //沿着 X 轴移动
 transform: translateY(360px); //沿着 Y 轴移动
 transform: translateZ(360px); //沿着 Z 轴移动

格式举例：

（1）translateX 举例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .box {
 width: 200px;
 height: 200px;
 background: green;
 transition: all 1s;
 }
 .box:hover {
 transform: translateX(100px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

（2）translateY 举例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .box {
 width: 200px;
 height: 200px;
 background: green;
 transition: all 1s;
 }
 .box:hover {
 transform: translateY(100px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

（3）translateZ 举例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 body {
 /* 给box的父元素加透视效果*/
 perspective: 1000px;
 }
 .box {
 width: 250px;
 height: 250px;
 background: green;
 transition: all 1s;
 margin: 200px auto
 }
 .box:hover {
 /* translateZ必须配合透视来使用*/
 transform: translateZ(400px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

上方代码中，如果不加透视属性，是看不到translateZ的效果的。

3、透视：perspective

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。

格式有两种写法：

作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。

4、3D呈现（transform-style）

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：

 transform-style: preserve-3d; //让 子盒子 位于三维空间里
 transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）

案例：立方体

动画

动画是CSS3中具有颠覆性的特征，可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。

之前,我们在 js 中定义一个函数的时候，是先定义，再调用：

 js 定义函数：
 function fun(){ 函数体 }
 调用：
 fun();

同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：

 定义动画：
 @keyframes 动画名{
 from{ 初始状态 }
 to{ 结束状态 }
 }
 调用：
 animation: 动画名称 持续时间；

其中，animation属性的格式如下：

 animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
 animation: move1 1s alternate linear 3;
 animation: move2 4s;

定义动画的格式举例：

注意好好看代码中的注释。

效果如下：

2、动画属性

我们刚刚在调用动画时，animation属性的格式如下：

animation属性的格式如下：

 animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
 animation: move1 1s alternate linear 3;
 animation: move2 4s;

可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。

（1）动画名称：

 animation-name: move;

（2）执行一次动画的持续时间：

 animation-duration: 4s;

备注：上面两个属性，是必选项，且顺序固定。

（3）动画的执行次数：

 animation-iteration-count: 1; //iteration的含义表示迭代

属性值infinite表示无数次。

（3）动画的方向：

 animation-direction: alternate;

属性值：normal 正常，alternate 反向。

（4）动画延迟执行：

 animation-delay: 1s;

（5）设置动画结束时，盒子的状态：

 animation-fill-mode: forwards;

属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。

（6）运动曲线：

 animation-timing-function: ease-in;

属性值可以是：linear ease-in-out steps()等。

注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。

steps()的效果

我们还是拿上面的例子来举例，如果在调用动画时，我们写成：

 animation: move2 4s steps(2);

效果如下：

有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。

step()举例：时钟的简易模型

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 div {
 width: 3px;
 height: 200px;
 background-color: #000;
 margin: 100px auto;
 transform-origin: center bottom; /* 旋转的中心点是底部 */
 animation: myClock 60s steps(60) infinite;
 }
 @keyframes myClock {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
 }
 </style>
</head>
<body>
<div></div>
</body>
</html>

上方代码，我们通过一个黑色的长条div，旋转360度，耗时60s，分成60步完成。即可实现。

效果如下：

动画举例：摆动的鱼

现在，我们要做下面这种效果，为了作出上面这种效果，要分成两步。

（1）第一步：让鱼在原地摆动

鱼在原地摆动并不是一张 gif动图，她其实是由很多张静态图间隔地播放，一秒钟播放完毕，就可以了

图片的url是http://img.smyhvae.com/20180209_1245.gif，图片较大，如无法观看，可在浏览器中单独打开。

上面这张大图的尺寸是：宽 509 px、高 2160 px。

我们可以理解成，每一帧的尺寸是：宽 509 px、高 270 px。270 * 8=2160。让上面这张大图，在一秒内从 0px 的位置往上移动2160px，分成8步来移动。就可以实现了。

代码是：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .shark {
 width: 509px;
 height: 270px; /*盒子的宽高是一帧的宽高*/
 border: 1px solid #000;
 margin: 100px auto;
 background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
 animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧， */
 }
 @keyframes sharkRun {
 0% {
 }
 /* 270 * 8=2160 */
 100% {
 background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
 }
 }
 </style>
</head>
<body>
<div class="sharkBox">
 <div class="shark"></div>
</div>
</div>
</body>
</html>

我们不妨把上面的动画的持续时间从1s改成 8s，就可以看到动画的慢镜头

这下，你应该恍然大悟了。

（2）第二步：让鱼所在的盒子向前移动。

实现的原理也很简单，我们在上一步中已经让shark这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 sharkBox向前移动，即可。完整版代码是：

最后效果很好

这是我在学习CSS3动画的时候收藏的一篇好文，现在分享在这里，既方便大家学习参考，也方便日后查阅，最后感谢作者

链接文章

https://www.cnblogs.com/qianguyihao/p/8435182.html

在完成前面的基本概念的学习以后，今天开始我们来学习HTML。

在百度上搜索HTML，你会看到一大片的描述，很多读者会陷入迷惑中，到底什么是HTML？我们在这里给出一些关键概念的理解。首先我们要明确的是，我们通过编写HTML的代码并通过浏览器运行，就能得到我们想到的界面。HTML提供了很多基本的元素、标签用于我们构建界面，你可能你并不明白什么是元素和标签，没关系我们可以直接开始一个例子来讲解和体会这些概念。

先练后理，我认为是很好的一个学习办法。因为计算机包含了太多东西，先想理清楚所有的知识在开始写软件，这是不现实的。

<!-- 首先，利用VS Code 创建一个demo.html，并在里面完成一下代码的编写，如图一所示 -->

<!-- 这些都是注释，并不会影响实际的效果 -->
<!-- 下面的代码是一个HTML的基本框架，我们会通过注释的方式一一讲解-->

<!-- 第一行代码是用于表示这是一个HTML的文档，这样浏览器就会用正确的方式展示这个页面 -->
<!DOCTYPE html>
  
<!-- html标签是每个HTML文档的开始 -->
<html lang="en">

<!-- head标签主要提供一些基本的设置，其中title是指你打开页面的时候，显示的结果 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- body标签是页面的内容部分，我们想向界面添加新的元素的话，就在这里添加 -->
<body>
    
</body>

</html>

注释：在HTML中，使用语法 可以在代码中书写注释，注释是指在代码中没有实际的功能，主要是用于给其他程序员提供一些信息，就如例子中，我们的注释就是告诉你第一步该怎么做，实际上它不会变成页面中的任何一部分
标签：在HTML中，用<>括起来的称为标签，一般来说，标签是构建界面的基本单元，就像造房子一样，标签就是一块一块的砖，或者是一些水泥用于粘合，一根钢筋之类的。而我们在写界面的时候，只需要合理的使用这些已经提供好的标签，就能够完成。标签有很多是成对的，比如body标签，它的形式是<body> </body>，在这对标签的中间，可以放其他的内容。
属性：标签里面的形式如xx="yy"的称为属性，属性就是更好的控制标签的效果。

图一

在没有给上面的代码添加任何东西的时候，打开的效果如图二，你会发现上面显示的Document就是我们在title里面设置的值。

任务一：修改代码里面<title> </title>两个标签中间的值，从Document改为我的主页，并且查看打开页面是否生效

图二


<!DOCTYPE html>
  
<!-- html标签是每个HTML文档的开始 -->
<html lang="en">

<!-- head标签主要提供一些基本的设置，其中title是指你打开页面的时候，显示的结果 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- body标签是页面的内容部分，我们想向界面添加新的元素的话，就在这里添加 -->
<body>
    
</body>

</html>

图三

非常简单并且快速，我们只需要向body标签内部添加h1和h2标签，在界面中就能出现对应的标题和二级标题。那么我们还有什么标签呢？我们可以简单的介绍几个

<a>标签，超链接标签。这个非常常见，平时你在网站上看到的可以点击的链接，都是可以通过这个标签来完成的。
<button>标签，按钮。平时你看到的按钮都是可以通过这个标签来完成的

任务二：百度搜索HTML标签了解一下，还有哪些常见的标签。

<!-- 首先，利用VS Code 创建一个demo.html，并在里面完成一下代码的编写，如图一所示 -->

<!-- 这些都是注释，并不会影响实际的效果 -->
<!-- 下面的代码是一个HTML的基本框架，我们会通过注释的方式一一讲解-->

<!-- 第一行代码是用于表示这是一个HTML的文档，这样浏览器就会用正确的方式展示这个页面 -->
<!DOCTYPE html>
  
<!-- html标签是每个HTML文档的开始 -->
<html lang="en">

<!-- head标签主要提供一些基本的设置，其中title是指你打开页面的时候，显示的结果 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- body标签是页面的内容部分，我们想向界面添加新的元素的话，就在这里添加 -->
<body>
    <!-- body中间添加新的内容来丰富我们的界面 -->
      
    <!-- h1标签是用于在界面中添加一个 一级标题 -->
    <!-- 如果你需要添加一个标题，那肯定就会用h1标签 -->
    <h1> HTML课堂开课啦 </h1>

	 	<!-- 同样的,h2标签是用于在界面中添加一个 二级标题 -->
    <!-- 让我们看看效果 -->
    <h2> 二级标题-HTML课堂开课啦 </h2>
    
    <!-- 添加的新标签，效果如图四 -->
    <!-- 这里开始涉及到属性，href属性是用于指定当你点击这个超链接的时候，跳转到网站 -->
    <!-- href="www.baidu.com"  意味着会跳转到百度，快试试吧！--> 
    <a href="www.baidu.com">超链接</a>
    <button>一个按钮</button>
    <!-- 同样的，这里的src属性是指定显示的图片地址，你可以试试改为其他地址 -->
    <img src="http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1583627811&t=0dcfb9b5461a7ceaf634f834e00ef93a" alt="">
</body>

</html>

图四

任务三：从了解到标签里面选几个添加到代码中，并验证效果

本节我们完成了基本的HTML的认识，我们能够清楚的知道，界面是完全由我们写的代码控制的。我们需要什么组件，就通过对应的标签就能够完成效果。有的同学会觉得当前的页面很丑，但是不用着急，因为那是CSS部分的知识了。就像修房子一样，HTML是造房子，CSS就是装修的事儿了。

小建议：

多使用搜索引擎去搜索问题，从新手到入门，搜索是最需要锻炼的一个能力
多练习，每个标签都是可以加一个到代码里面看看效果的，何乐而不为？

谢谢大家的阅读，有任何问题可以提出来，一定会尽力解答。

在线咨询

上一篇：浏览器内核大揭秘
下一篇：uniapp纯CSS实现圆形进度条组件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在你的hexo博客中使用nodeppt，一款迄今为止

家好，我是明说网络的小明同学。

NODEPPT这可能是迄今为止最好的网页版演示库

NODEPPT Demo

NODE PPT Github

Hexo中使用PPT Demo

如何在Hexo中添加Nodeppt

首先熟悉nodeppt的build方法

源文件目录说明

那么怎么使用呢？

最后附上本次示例的PPT

参考资料

静态压缩

添加自定义网页

原文的体验更好

过渡：transition

2D 转换

动画

您的项目需求