daisyUI

安装

1
npm i -D daisyui@latest

daisyUI 依赖 Tailwind|Tailwind CSS 框架，需要同时安装，然后在

tailwind.config.js 配置文件中添加：

1
module.exports = {
2
  //...
3
  plugins: [require("daisyui")],
4
}

使用

导航栏顶部固定并模糊

导航栏组件：

1
<div class="navbar bg-base-100">
2
  <a class="btn btn-ghost text-xl">daisyUI</a>
3
</div>

修改后：

1
<div class="navbar sticky top-0 backdrop-blur-lg z-10">
2
  <a class="btn btn-ghost text-xl">daisyUI</a>
3
</div>

sticky:使元素设置为粘性定位，使其在滚动时保持在屏幕上方
top-0: 使元素的顶部边缘固定在父容器的顶部，即将其置于屏幕顶部
backdrop-blur-lg: 使元素的背景模糊化
z-10: 使元素的堆叠顺序设置为 10，使其位于其他具有默认堆叠顺序的元素之上

页脚固定

使用 flex-grow 实现：

1
<div class="flex flex-col h-screen">
2
    <div class="bg-red-500">header</div>
3
    <div class="bg-green-500 flex-grow">content</div>
4
    <div class="bg-blue-500">footer</div>
5
</div>