TailwindCSS – 使用TailwindCSS创建粘性导航栏
1 使用TailwindCSS创建粘性导航栏 本文将介绍如何使用TailwindCSS创建如下导航栏 1.1 创建一个基础的导航 首先使用TailwindCSS创建一个简单的导航栏，代码如下 <!DOCTYPE html> <html lang="en"> <head&…
- CSS
- 2024-02-02
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
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
CSS – 使图片居中显示的方式总结
在CSS中居中图片是我们在写web时经常需要实现的需求，本文简单的总结几种在css如何使图片居中显示的方式。 1 text-align居中 图片标签img是一个内联元素，而text-align属性居中只对块级元素有效，所以我们需要使用div包含img，然后设置这个div的text-align属性为c…
- CSS
- 2023-08-28