TailwindCSS – 使用TailwindCSS创建粘性导航栏
1 使用TailwindCSS创建粘性导航栏 本文将介绍如何使用TailwindCSS创建如下导航栏 1.1 创建一个基础的导航 首先使用TailwindCSS创建一个简单的导航栏，代码如下 <!DOCTYPE html> <html lang="en"> <head&…
- CSS
- 2024-02-02
Javascript – js修改css样式的方式总结
本文对javascript动态修改css的样式进行总结。 1 javascript动态修改css样式 1.1 直接设置样式 比如 element.style.height = '100px'; 如果css样式的属性有"-"号则可以使用中括号的形式 element.style["color-schem…
- Javascript
- 2024-01-29
TailwindCSS – 在WordPress主题开发中使用TailwindCSS
1 在WordPress主题开发中使用TailwindCSS 1.1 在WordPress主题中安装TailwindCSS 在终端工具中进入WordPress主题的文件夹中，使用以下命令安装TailwindCSS npm install -D tailwindcss 1.2 在WordPress主题…
- CSS
- 2024-01-25
TailwindCSS – TailwindCSS安装和开发环境配置
1 TailwindCSS安装和开发环境配置 TailwindCSS提供了官方的安装教程，目前推荐的是使用TailwindCLI的方式，也就是通过npm或者独立的tailwindcss程序安装和配置开发环境。 1.1 安装Node.js 由于要使用npm，所以需要首先安装Node.js，本文就不再赘…
- CSS
- 2024-01-25
CSS – 悬浮卡片样式
1 CSS悬浮卡片样式 如果我们需要制作如下图的悬浮卡片 首先我们先用html搭好网页布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css悬…
- CSS
- 2023-12-27
CSS – 总结ul中li元素横向排列的几种方式
本文将总结如何让ul中的li横向排列的几种方式。 1 使用display:inline属性横向排列li 示例代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <…
- CSS
- 2023-11-03
CSS – 使用Flex实现常用布局
转载自：https://zhuanlan.zhihu.com/p/60516052 ，如侵联删。 1 网格布局 1.1 基本网格布局 最简单的网格布局，就是平均分布。 html代码如下 <div class="Grid"> <div class="Grid-cell">1/2…
- CSS
- 2023-10-28
CSS – Flex布局
转载自：https://github.com/xiangxingchen/blog/issues/6 1 Flex布局 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴…
- CSS
- 2023-10-28
Javascript – 使用AudioContext播放音频
1 Javascript使用AudioContext播放音频 JS中可通过AudioContext管理和播放声音，以下代码可以创建一个AudioContext对象 try { var audio_context = new AudioContext(); } catch (e) { alert ('…
- Javascript
- 2023-10-19
Javascript – Chrome播放音频报错，The AudioContext was not allowed to start. It must be resumed (or created) ，修复音频无法播放的问题
1 Chrome自动播放音频报错，The AudioContext was not allowed to start. It must be resumed (or created) 1.1 问题 今天用js实现一个接收到服务器通知之后自动播放通知音频的功能，用的AudioContext播放音频，示…
- Javascript
- 2023-09-27
CSS – 使用Katex渲染数学公式，数学公式过长超出页面范围的问题修正
1 Katex Katex是一个在web端渲染tex的快速和易于使用的js库，KaTeX 与所有主流浏览器兼容，包括 Chrome、Safari、Firefox、Opera、Edge 和 IE 11。 Katex的Github地址为：https://github.com/KaTeX/KaTeX，官网…
- CSS
- 2023-09-04
Javascript – 接收websocket服务器发送base64编码的音频数据并进行播放
1 Javascript接收websocket服务器发送base64编码的音频数据并进行播放 在js中除了可以播放本地音频之外，在有些情况下音频数据是需要在远程服务器上生成的，在这种情况下需要接收服务器端的音频数据并在本地中使用js播放接收的音频数据。 假设现在音频数据是由一个websocket服务…
- Javascript
- 2023-08-31