一文搞懂弹性盒子flex布局
什么是flex布局 flex布局又称为弹性盒子模型，它有自己的一套属性，效率高，学习成本低，兼容性强！ 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于 HTML 页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 名词定义 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。 定义弹性盒子 弹性盒子是css3新增的属性，因此弹性盒子模型及其属性存在浏览器兼容问题。具 ...
HTML5中audio与video
音频 HTML5中提供的音频API标签为<audio></audio>，使用示例如： <audio src="野狼disco.m4a" controls></audio> 兼容写法 <audio controls> <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'> <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'> <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'> 您的浏览器不支持，<a href="resource/audio/OUTPUT.mp3">请下载</a> </audio> 当浏览器不支持或者当前音乐地址失效时会分别访问source提供的路径，如果全部失效则提示最下边的文本。 音乐属性 属性名 说 ...
Github之Actions自动发布GitHub Release
前言 此文以node项目为例，目录存在package.json，其他项目如果参考本教程需自行创建json文件用于记录当前版本。 { "version":"1.1.1" } 上述代码仅作为JSON文件示例。 先来看看actions官方提供的发布demo - name: 创建GitHub Release id: create_release uses: actions/create-release@latest env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: tag的名称 release_name: 发布的名字 body: 发布的内容 draft: false prerelease: false 以上几个需要我们自己填写的只有tag_name、release_name、body。因此我们只需要动态获取这三个变量即可实现按照我们的需求进行发布。 获取tag_name tag_name一 ...
如何为评论系统快速添加表情
为你的Valine、Waline、Twikoo评论丰富表情吧。阿鲁小表情，哔哩哔哩表情····
三、移动端轮播图的实现
布局 <div id="app"> <div id="swiper-container"> <!-- 幻灯片的结构 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/1.jpg"></div> <div class="swiper-slide"><img src="./img/2.jpg"></div> <div class="swiper-slide"><img src="./img/3.jpg"></div> <div class="swiper-slide"><img src="./img/4.jpg"></div> <div class="swiper-slide"><img src="./img/5.jpg"></div> </div> <!-- 导航点 ...
Github之Actions自动发布npm包
前言 在将我们的源代码推送到GitHub时并希望他能自动构建并将包发布到npm。 其实做法也简单，大致思路：获取仓库源代码->安装插件->构建->推送 一、生成TOKEN 这一步很重要，在npm中生成自己的TOKEN。TOKEN类型一定要选择Automation，生成后将其保存，因为一会儿要在GitHub密钥中填写这个值。 二、配置仓库secrets 进入你的代码仓库，单击设置 点击Secrets，并新建一个键为NPM_TOKEN，值为上一步生成的TOKEN的密钥 三、编写构建配置 name: Node.js Package on: push: branches: - master jobs: publish-npm: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x] steps: # from: https://github.com/actions/checkout ...
四、Webpack其他补充
多页面打包 使用glob插件并通过 yarn add glob html-webpack-plugin -D 配置 /** * @description: * @author: 小康 * @url: https://xiaokang.me * @Date: 2021-01-02 17:18:46 * @LastEditTime: 2021-01-02 17:18:46 * @LastEditors: 小康 */ const glob = require('glob') const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const setMPA = () => { const entry = {} const htmlWebpackPlugins = [] const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js')) Obje ...
三、Webpack优化配置
性能优化 性能优化包含开发环境优化和生产环境优化。 开发环境 优化打包构建速度 优化代码调试 生产环境 优化打包构建速度 优化代码运行的性能 开发环境 HMR 即热更新：一个模块发生变化，只会重新打包这一个模块。 在devServer中开启 { devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true, // 开启HMR功能 // 当修改了webpack配置，新配置要想生效，必须重新webpack服务 hot: true } } 样式文件 样式文件可以使用热更新，因为style-loader内部实现了 js文件 默认不使用HMR功能，需要手动修改支持HMR。且只能处理非入口文件。 if (module.hot) { // 一旦 module. ...
二、Webpack进阶玩法
说明 由于webpack5正式版刚发布不久，仍有插件不支持webpack5，因此此文以webpack4为例进行撰写。 webpack@4.44.1 webpack-cli@3.3.12 提取CSS成单独文件 安装插件 yarn add mini-css-extract-plugin -D 配置文件：将MiniCssExtractPlugin.loader替换曾经的style-loader /** * @description: * @author: 小康 * @url: https://xiaokang.me * @Date: 2020-12-31 19:32:48 * @LastEditTime: 2020-12-31 19:32:48 * @LastEditors: 小康 */ const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('m ...
