当前位置: 首页 > news >正文

(一)Tailwindcss


文章目录

  • 项目地址
  • 一、常用
    • 1.1 字体
      • 1. 字体大小
      • 2. 字体粗细
      • 3. 文字位置
    • 1.2 宽/高/背景/边框
      • 1. 宽度
      • 2. 背景
      • 3. 边框
      • 4. hover
      • 5. 媒体查询
    • 1.3 FlexBox
      • 1. Flex布局
      • 2. shrink
      • 3. Grid 布局


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

一、常用

1.1 字体

1. 字体大小

在这里插入图片描述

  • 效果

在这里插入图片描述

2. 字体粗细

在这里插入图片描述

3. 文字位置

在这里插入图片描述
在这里插入图片描述

1.2 宽/高/背景/边框

1. 宽度

在这里插入图片描述

2. 背景

在这里插入图片描述

3. 边框

在这里插入图片描述

4. hover

在这里插入图片描述

5. 媒体查询

在这里插入图片描述

1.3 FlexBox

1. Flex布局

在这里插入图片描述

2. shrink

类名等价 CSS行为
flex-1flex: 1 1 0%自动扩张填满剩余空间
flex-autoflex: 1 1 auto会扩张,也会缩小,基础大小由内容决定
flex-initialflex: 0 1 auto不扩张,允许缩小,基础大小由内容决定
flex-noneflex: none不扩张、不缩小,固定大小

3. Grid 布局

在这里插入图片描述

http://www.lryc.cn/news/615859.html

相关文章:

  • 从色彩心理学看嵌入式设备UI设计:原则、挑战与实践
  • Kafka 生产者与消费者分区策略全解析:从原理到实践
  • 阿里云ECS云服务器临时升级带宽方法
  • CentOS7挂载NTFS格式U盘
  • 安卓开发:组件化、模块化、插件化方案对比总结
  • ES 调优帖:Gateway 批量写入性能优化实践
  • Linux 系统中,如何处理信号以避免竞态条件并确保程序稳定性?
  • doubletrouble靶机
  • MVCC和日志
  • Spring Boot整合knife4j实战
  • Mysql笔记-存储过程与存储函数
  • 【C#补全计划】万类之父中的方法
  • 前端开发的奇技淫巧 --- 持续更新中
  • 【Canvas与戳记】黑底金Z字
  • LwIP的内存管理(1)
  • 如何调节天线结构使得两个模式的相位差为90°?如何实现左旋圆极化或右旋圆极化?
  • 软件编程1-shell命令
  • 【话题讨论】GPT-5 发布全解读:参数升级、长上下文与多领域能力提升
  • SpringAi 通过大模型来实现调用自己的Api
  • 基于VuePress2开发文档自部署及嵌入VUE项目
  • vue如何监听localstorage
  • Vue 3 快速入门 第五章
  • vue2升级vue3:单文件组件概述 及常用api
  • Vue.js设计于实现 - 响应式(三)
  • (LeetCode 面试经典 150 题) 104. 二叉树的最大深度 (深度优先搜索dfs)
  • 深入解析微服务分布式事务的原理与优化实践
  • 双非二本如何找工作?
  • CPP继承
  • 40.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--扩展功能--集成网关--初始化网关
  • 【递归、搜索与回溯算法】递归算法