分时显示不同图片，文案
根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。
123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti ...
web APIS和js基础关联性JS组成
JS基础阶段以及Web APIs阶段JS 基础阶段
我们学习的是 ECMAScript 标准规定的基本语法
要求同学们掌握 JS 基础语法
只学习基本语法，做不了常用的网页交互效果
目的是为了 JS 后面的课程打基础、做铺垫
Web APIs 阶段
Web APIs 是 W3C 组织的标准
Web APIs 我们主要学习 DOM 和 BOM
Web APIs 是我们 JS 所独有的部分
我们主要学习页面交互功能
需要使用 JS 基础的课程内容做基础
JS 基础学习 ECMAScript 基础语法为后面作铺垫， Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果
API 和 Web APIAPIAPI（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API ...
vue一套用于构建用户界面的渐进式JavaScript框架
构建用户界面：将数据通过某种办法变成用户可以看见的界面。Vue 并不关心怎么得到数据（发送请求、模拟数据或者是死数据），Vue 只关心在得到数据之后如何将它变成界面；
渐进式：所谓的渐进式是指 Vue 可以自底向上逐层应用。如果应用比较简单，那么只需要一个轻量小巧的核心库（压缩完之后只有 100kb 左右）；如果是一个比较复杂的应用，则可以引入各式各样的 Vue 插件；
vue的特点
采用组件化模式，提高代码复用率、且让代码更好维护。
代码利用率：将一个框里的所有功能变成一个文件，就是组件。
代码维护：就是如果你改了news.vue组件里面的css样式，也不会影响到其他两个组件。
在 Vue 中，一个 .vue 文件就是一个组件，它包含了 html 结构、css 样式以及 js 交互。
就比如说你看到别人设计的activity.vue这个组件，觉得很好想要，就可以直接引用这个vue组件。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。
命令式编码：告诉怎么做（按照指定的步骤执行，缺一不可），就比如说 ...
前提编程语言编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。
实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。
如今通用的编程语言有两种形式：汇编语言和高级语言。
汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。
1234C语言：puts("你好");PHP：echo "你好&quo ...
垂直居中CSS 没有给我们提供文字垂直居中的代码。这里我们可以使用一个小技巧来实现。
解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。
例如height=50px，我们就可以把line-height=50px，就实现了垂直居中。
CSS Grid Generator（表格布局）CSS Grid Generator (cssgrid-generator.netlify.app)
Get Waves（svg波形）Get Waves – Create SVG waves for your next design
选择所有的偶数:nth-child(even)
12/* 选择所有的偶数小li */.fr ul li:nth-child(even) {}
伪元素::after在元素后面放东西
123.arrow-icon::after { content: '1';}
网站favicon 图标把png图片转换为ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www ...
先完成最大的盒子box和基础的css部分1<div class="box"></div>
12345678910111213* { margin: 0; padding: 0;}body { background-color: #f5f5f5;}.box { width: 298px; height: 415px; background-color: #fff; margin: 100px auto; /* 在网页中水平居中 */}
然后图片部分123<div class="box"> <img src="img.jpg" alt=""></div>
直接插入图片的话，图片会超出盒子的部分，我们就要设置图片的大小。
123.box img { width: 100%;}
评论部分1234 ...
https://www.eacls.top/posts/4ddffcd0/https://opeach.cn/posts/decb.html
在front-matter添加highlight_shrink: true/false来单独配置文章展开代码框。
true：关闭代码框，要点击 > 才打开
false：打开代码框
页面加载动画 preloader
123456789# 加载动画 Loading Animationpreloader: enable: false # source # 1. fullpage-loading # 2. pace (progress bar) source: 1 # pace theme (see https://codebyzach.github.io/pace/) pace_css_url:
Snackbar 弹窗
123456789# Snackbar 弹窗# https://github.com/polonel/SnackBar# position 弹窗位置# 可选 top-left / top-center ...
butterfly魔改
未读记录魔改
https://zsyyblog.com/
https://yisous.xyz/
导航栏部分准备工作
在BLOG\themes\butterfly\source\css创建nav-menus.css文件
在BLOG\themes\butterfly\source\js创建nav-menus.js文件
导航栏最开始的样子
本地搜索功能
安装插件
1npm install hexo-generator-search --save
主题配置文件_config.butterfly.yml：
123456# Local searchlocal_search: enable: true labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示
分离搜索栏与菜单栏关于Butterfly的导航栏的一些教程 | ...
1234567891011121314151617181920212223<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>点击图片后放大缩小旋转</title><link rel="stylesheet" type="text/css" href="css/boxImg.css"></head><body style="background:#222222"><img modal="zoomImg" src="img/bz1.png" height="150px" alt=""> <img modal="zoomImg" src="img/bz2. ...
