Tailwind Telegram

最新推荐文章于 2024-06-02 09:32:14 发布
最新推荐文章于 2024-06-02 09:32:14 发布
阅读量435 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunChow520/article/details/106711596
版权

响应式即时聊天布局方案

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Telegram</title>
    <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
</body>
</html>

页面布局

页面布局

布局采用从左至右三栏布局，分别左侧区域、中间区域、右侧区域。

  • 左侧区域：用户分组和成员列表以及搜索
  • 中间区域：聊天对话
  • 右侧区域：个人资料展示
<div class="relative flex w-full h-screen overflow-hidden bg-gray-100 antialiased">
    <!--left-->
    <div class="relative flex flex-col hidden h-full w-1/3 bg-white border-r border-gray-200 shadow-lg transform trasition-all duration-500 ease-in-out hidden md:block">left</div>
    <!--content-->
    <div class="flex-1 relative flex flex-col">content</div>
    <!--right-->
    <div class="w-1/3 right-0 pb-2 bg-white border-l border-gray-200 flex flex-col hidden xl:block">right</div>
</div>

左侧区域

左侧区域

左侧区域从上到下分为四个部分，分别是

  • 搜索区域
  • 切换控制区域
  • 切换内容区域
  • 固定按钮
<!--left-->
<div class="relative flex flex-col hidden h-full w-1/3 bg-white border-r border-gray-200 shadow-lg transform trasition-all duration-500 ease-in-out hidden md:block">
    <!--search-->
    <div class="px-3 pt-1 text-white flex justify-between"></div>
    <!--tab control-->
    <div class="border-b shadow-bot"></div>
    <!--tab content-->
    <div class="relative mt-2 mb-4 overflow-x-hidden overflow-y-auto scrolling-touch scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray lg:max-h-sm"></div>
    <!--fixed button-->
    <div class="fixed absolute right-0 bottom-0 z-40 mr-4 mb-6"></div>
</div>

搜索区域

搜索区域

搜索区域水平可划分为两部分分别是

  • 侧边栏伸缩按钮
  • 带搜索符号的搜索栏
<div class="px-3 pt-1 text-white flex justify-between">
    <div class="py-2 w-full flex items-center">
        <button class="p-2 rounded-full text-gray-700 focus:outline-none hover:bg-gray-200 hover:text-gray-600"></button>
        <div class="relative pl-2 w-full overflow-hidden text-gray-600 flex items-center focus-within:text-gray-400"></div>
    </div>
</div>

侧边栏伸缩按钮

<button class="p-2 rounded-full text-gray-700 focus:outline-none hover:bg-gray-200 hover:text-gray-600">
    <i class="fas fa-bars w-6 h-6 fill-current text-gray-600" ></i>
</button>

左侧带搜索按钮的搜索栏

搜索栏 
<div class="relative pl-2 w-full overflow-hidden text-gray-600 flex items-center focus-within:text-gray-400">
    <span class="absolute inset-y-0 left-0 pl-4 flex items-center">
        <button class="p-1 focus:outline-none focus:shadow-none">
            <i class="fas fa-search w-6 h-6 fill-current"></i>
        </button>
    </span>
    <input type="search"
           class="w-full pl-12 py-2 bg-gray-200 border border-transparent rounded-tg appearance-none text-sm text-white focus:bg-white focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" placeholder="请输入搜索关键字" autocomplete="off">
</div>

切换控制区域

切换控制区域
  • 控制按钮采用ul-li-a的形式
  • 最后一个li右边距为0
  • 每个li上移1px用于设置底边框2px 
<!--tab control-->
<div class="border-b shadow-bot">
    <ul class="list-none select-no inline-block px-2 flex flex-row items-center text-center">
        <li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
            <a href=""
               class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">所有</a>
        </li>
        <li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
            <a href=""
               class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">工作</a>
        </li>
        <li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
            <a href=""
               class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">
                私有
                <span class="ml-1 w-5 h-5 bg-blue-500 rounded-full text-xs text-white flex items-center justify-center">2</span>
            </a>
        </li>
        <li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
            <a href=""
               class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">群组</a>
        </li>
        <li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
            <a href=""
               class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">频道</a>
        </li>
    </ul>
</div>

切换内容区域

切换内容区域 
<!--tab content-->
<div class="relative mt-2 mb-4 overflow-x-hidden overflow-y-auto scrolling-touch scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray lg:max-h-sm">
    <ul class="select-none inline-block px-2 w-full h-screen flex flex-col text-black">
        <li class="mt-200 py-65 pr-3 rounded-lg cursor-pointer flex flex-no-wrap items-center hover:bg-gray-200">
            <div class="w-full flex justify-between focus:outline-none">
                <div class="w-full flex justify-between">
                    <div class="relative ml-2 mr-3 w-12 h-12 bg-blue-500 rounded-full text-xl font-semibold text-white flex items-center justify-center flex-no-shrink">
                        <img src="http://source.unsplash.com/100x100/?avatar" class="w-12 h-12 rounded-full object-cover object-center">
                        <div class="absolute right-0 bottom-0 bg-white rounded-full flex items-center justify-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                        </div>
                    </div>
                    <div class="min-w-0 flex-1 items-center">
                        <div class="mb-1 flex justify-between">
                            <h2 class="text-sm font-semibold">标题</h2>
                            <div class="flex">
                                <i class="fas fa-check w-4 h-4 fill-current text-green-500"></i>
                                <i class="fas fa-check w-4 h-4 fill-current text-transparent"></i>
                                <span class="ml-1 text-xs font-medium text-gray-600">12.52</span>
                            </div>
                        </div>
                        <div class="leading-none truncate text-sm flex justify-between">
                            <span>副标题</span>
                            <span class="w-5 h-5 bg-green-500 rounded-full text-xs text-white text-right flex items-center justify-center">2</span>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

固定按钮

固定按钮 
<!--fixed button-->
<div class="fixed absolute right-0 bottom-0 z-40 mr-4 mb-6 text-white">
    <button class="mr-3 w-12 h-12 bg-blue-500 rounded-full text-xl font-semibold flex items-center justify-center flex-no-shrink focus:outline-none">
        <i class="fas fa-pen w-6 h-6 fill-current"></i>
    </button>
</div>

中间区域

中间区域从上到下划分为两部分，头部标题栏与对话内容和输入框。

  • 中间头部区域
  • 中间内容区域
<!--center-->
<div class="flex-1 relative flex flex-col">
    <!--header-->
    <div class="flex-grow-0 flex-shrink-0 z-20 p-2 w-full bg-white border-b flex"></div>
    <!--content-->
    <div class="flex-1 inset-0 overflow-hidden bg-transparent bg-bottom bg-cover"></div>
</div>

中间头部区域

中间头部 
<!--header-->
<div class="flex-grow-0 flex-shrink-0 z-20 p-2 w-full bg-white border-b flex items-center">
    <!--avatar-->
    <div class="mx-4 w-12 h-12 bg-cover bg-center bg-no-repeat rounded-full cursor-pointer" style="background-image:url('http://source.unsplash.com/100x100/?avatar')"></div>
    <!--title-->
    <div class="flex-1 flex flex-col justify-center overflow-hidden cursor-pointer text-gray-600 font-medium">
        <div class="overflow-hidden leading-tight text-base whitespace-no-wrap">姓名</div>
        <div class="overflow-hidden leading-tight text-sm whitespace-no-wrap">在线</div>
    </div>
    <!--message-->
    <div class="relative pl-2 w-48 border-l-2 border-blue-500 cursor-pointer hidden lg:block">
        <div class="text-base font-medium text-blue-500">固定邮件</div>
        <div class="text-sm font-normal text-gray-800">今日明星赛</div>
    </div>
    <!--action-->
    <button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
        <i class="fas fa-bell fill-current text-gray-600"></i>
    </button>
    <button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
        <i class="fas fa-search fill-current text-gray-600"></i>
    </button>
    <div class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center hidden md:block">
        <i class="fas fa-search fill-current text-gray-600"></i>
    </div>
    <button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
        <i class="fas fa-bars fill-current text-gray-600"></i>
    </button>
</div>

中间内容区域

image.png

中间区域是一个即时通讯的对话界面，这里从上到下划分为三栏。

<!--center-->
<div class="flex-1 relative flex flex-col">
    <!--header-->
    <div class="flex-grow-0 flex-shrink-0 z-20 p-2 w-full bg-white border-b flex items-center">
        <!--avatar-->
        <div class="mx-4 w-12 h-12 bg-cover bg-center bg-no-repeat rounded-full cursor-pointer" style="background-image:url('http://source.unsplash.com/100x100/?avatar')"></div>
        <!--title-->
        <div class="flex-1 flex flex-col justify-center overflow-hidden cursor-pointer text-gray-600 font-medium">
            <div class="overflow-hidden leading-tight text-base whitespace-no-wrap">姓名</div>
            <div class="overflow-hidden leading-tight text-sm whitespace-no-wrap">在线</div>
        </div>
        <!--message-->
        <div class="flex-1 relative pl-2 border-l-2 border-blue-500 cursor-pointer hidden lg:block">
            <div class="text-base font-medium text-blue-500">固定邮件</div>
            <div class="text-sm font-normal text-gray-800">今日明星赛</div>
        </div>
        <!--action-->
        <button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
            <i class="fas fa-bell fill-current text-gray-600"></i>
        </button>
        <button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
            <i class="fas fa-search fill-current text-gray-600"></i>
        </button>
        <div class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center hidden md:block">
            <i class="fas fa-qrcode fill-current text-gray-600"></i>
        </div>
        <button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
            <i class="fas fa-ellipsis-v fill-current text-gray-600"></i>
        </button>
    </div>
    <!--content-->
    <div class="flex-1 inset-0 overflow-hidden bg-transparent bg-bottom bg-cover flex flex-col">
        <!--dialog-->
        <div class="flex-1 w-full self-center">
            <div class="relative px-3 py-1 m-auto flex flex-col">
                <div class="mx-0 my-1 self-center text-xs text-gray-400">频道已创建</div>
                <div class="mx-0 my-1 self-center text-xs text-gray-400">12:21 AM</div>
                <div class="my-2 self-start flex items-center">
                    <img src="http://source.unsplash.com/100x100/?man" class="mr-2 w-12 h-12 rounded-full">
                    <div class="p-4 rounded-t-lg rounded-r-lg bg-white shadow text-sm">不要忘记检查所有的自适应情况</div>
                </div>
                <div class="my-2 self-end flex items-center flex-row flex-row-reverse">
                    <img src="http://source.unsplash.com/100x100/?woman" class="ml-2 w-12 h-12 rounded-full">
                    <div class="p-4 rounded-t-lg rounded-l-lg bg-white shadow text-sm">在编辑器使用按钮来检查</div>
                </div>
            </div>
        </div>
    </div>
    <!--input-->
    <div class="relative p-4 w-full overflow-hidden text-gray-600 focus-within:text-gray-400 flex items-center">
        <span class="absolute inset-y-0 left-0 pl-6 flex items-center">
            <button class="p-1 focus:items-center focus:shadow-none">
                <i class="fas fa-smile w-6 h-6 fill-current"></i>
            </button>
        </span>
        <input type="text" class="appearance-none pl-10 py-2 w-full bg-white border border-gray-300 rounded-full text-sm placeholder-gray-800 focus:outline-none focus:border-blue-500 focus:border-blue-500 focus:shadow-outline-blue" placeholder="" autocomplete="off">
        <span class="absolute inset-y-0 right-0 pr-6 flex items-center">
            <button class="p-1 focus:outline-none focus:shadow-none hover:text-blue-500 align-middle">
                <i class="fas fa-paper-plane w-6 h-6 full-current"></i>
            </button>
        </span>
    </div>
</div>

右侧区域

右侧区域

右侧区域为个人信息展示区域，从上到下分两部分，头部为控制区域，下面为信息内容区域。

头部控制按钮

头部控制区域 
<!--header-->
<div class="p-3 w-full flex items-center justify-between text-gray-500">
    <!--button-->
    <button class="p-2 rounded-full focus:outline-none focus:text-gray-600 hover:bg-gray-200">
        <i class="fas fa-times w-6 h-6 fill-current"></i>
    </button>
    <!--title-->
    <div class="ml-4 mr-auto text-lg font-medium">用户资料</div>
    <!--button-->
    <button class="p-2 rounded-full focus:outline-none focus:text-gray-600 hover:bg-gray-200">
        <i class="fas fa-pen w-6 h-6 fill-current"></i>
    </button>
    <!--button-->
    <button class="ml-1 p-2 rounded-fill focus:outline-none focus:text-gray-600 hover:bg-gray-200">
        <i class="fas fa-ellipsis-v w-6 h-6 fill-current"></i>
    </button>
</div>

个人信息展示

<!--avatar-->
<div class="mb-4 flex justify-center">
    <button class="content-center block p-1 w-32 h-32 overflow-hidden rounded-full text-center focus:outline-none">
        <img src="http://source.unsplash.com/100x100/?lady"
             class="content-center object-cover object-center rounded-full w-full h-full border-2 border-gray-200">
    </button>
</div>
<!--name-->
<div class="text-lg text-center text-gray-800 font-semibold">姓名</div>
<!--online-->
<div class="text-sm text-center text-gray-500 font-medium">在线状态</div>
<!--contact-->
<div class="mt-6 px-3 w-full flex items-center">
    <!--icon-->
    <div class="px-2 rounded-full text-gray-600 hover:text-gray-600">
        <i class="fas fa-university fa-2x fill-current"></i>
    </div>
    <!--text-->
    <div class="ml-4">
        <div class="mr-auto text-sm text-gray-800 font-semibold">毕业院校</div>
        <div class="mt-1 mr-auto leading-none text-sm text-gray-600 font-semibold">专业名称</div>
    </div>
</div>
<div class="mt-6 px-3 w-full flex items-center">
    <!--icon-->
    <div class="px-2 rounded-full text-gray-600 hover:text-gray-600">
        <i class="fas fa-phone fa-2x fill-current"></i>
    </div>
    <!--text-->
    <div class="ml-4">
        <div class="mr-auto text-sm text-gray-800 font-semibold">0123456789</div>
        <div class="mt-1 mr-auto leading-none text-sm text-gray-600 font-semibold">手机号码</div>
    </div>
</div>
<div class="mt-6 px-3 w-full flex items-center">
    <!--icon-->
    <div class="px-2 rounded-full text-gray-600 hover:text-gray-600">
        <i class="fas fa-envelope fa-2x fill-current"></i>
    </div>
    <!--text-->
    <div class="ml-4">
        <div class="mr-auto text-sm text-gray-800 font-semibold">junchow520@hotmail.com</div>
        <div class="mt-1 mr-auto leading-none text-sm text-gray-600 font-semibold">电子邮箱</div>
    </div>
</div>
<!--tab-->
<ul class="list-none select-none mt-4 px-3 border-b flex flex-row items-center justify-around">
    <li class="flex-auto mx-1 last:mr-0 -mb-px px-4 rounded-t-lg text-center cursor-pointer hover:bg-gray-200">
        <a href=""
           class="block py-3 border-b-4 border-blue-500 leading-normal text-xs text-blue-500 font-bold uppercase">相片</a>
    </li>
    <li class="li flex-auto mx-1 last:mr-0 -mb-px px-4 rounded-t-lg text-center cursor-pointer hover:bg-gray-200">
        <a href=""
           class="block py-3 border-b-4 border-transparent leading-normal text-xs font-bold uppercase">文档</a>
    </li>
</ul>
JunChow520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tailwind-scrollbar:Tailwind CSS的滚动条插件
04-28
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。 安装 yarn add -D tailwind-scrollbar 或者 npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中。 plugins : [ // ... require ( 'tailwind-scrollbar' ) , ] , 用法 注意：此插件为滚动条设置样式； 它不会强迫他们出现。 使用典型CSS技术迫使内容溢出并触发滚动条。 对于每个要设置样式的元素，请添加.scrollbar或.scrollbar-thin类。 然后，您可以添加任何所需的scrollbar-track-{color} ， scrollbar-thumb-{color}或hover:
Tailwind Header
JunChow
06-04 286
自适应页头 header 页头（header）由三部分构成分别是Logo区域、搜索区域、导航区域 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/fo...
推荐使用：tailwind-scrollbar-hide - 美化并隐藏滚动条的Tailwind插件
最新发布
gitblog_00089的博客
06-02 360
推荐使用：tailwind-scrollbar-hide - 美化并隐藏滚动条的Tailwind插件 项目地址:https://gitcode.com/reslear/tailwind-scrollbar-hide 项目介绍 tailwind-scrollbar-hide 是一个专为Tailwind CSS设计的插件，它允许你在不牺牲可滚动功能的情况下，优雅地隐藏页面或元素的滚动条。不仅如此，这个...
推荐开源项目：Tailwind CSS Scrollbar 插件
gitblog_00027的博客
05-17 418
推荐开源项目：Tailwind CSS Scrollbar 插件 项目地址:https://gitcode.com/adoxography/tailwind-scrollbar 在前端开发中，定制滚动条的样式往往是一项挑战，因为浏览器之间的差异和兼容性问题。为此，我们向您隆重推荐 tailwind-scrollbar —— 一个专为Tailwind CSS设计的插件，它提供了跨浏览器的滚动条样式配...
tailwindcss-scrollbar:Tailwindcss插件来自定义浏览器滚动条
05-13
tailwindcss-滚动条 Tailwindcss插件可自定义浏览器滚动条。 安装 # Using npm npm install -D @gradin/tailwindcss-scrollbar # Using Yarn yarn add -D @gradin/tailwindcss-scrollbar 然后将插件添加到tailwind.config.js文件。 module . exports = { theme : { // ... } , plugins : [ require ( '@gradin/tailwindcss-scrollbar' ) , ] , } 配置 您可以自定义滚动条的大小和颜色。 module . exports = { theme : { // ... } , plugins : [
Tailwind最新版
03-16
【Tailwind最新版】是当前前端开发领域备受瞩目的一个工具，它是一个实用的CSS框架，专注于提供一组实用的预定义样式，以帮助开发者快速构建响应式和一致性的用户界面。Tailwind尤其受到React和Vue.js社区的热烈欢迎...
Tailwind-Test：TailWindCSS的测试项目
02-12
【Tailwind CSS简介】 Tailwind CSS 是一个高度可定制的utility-first CSS框架，它专注于提供基本样式，允许开发者快速构建自定义设计。不同于其他预设样式的CSS框架（如Bootstrap），Tailwind 更像是一种工具集，...
tailWindcss 官方网站模版
02-27
**TailWindCSS官方模板详解** TailWindCSS是一个实用的、基于类的CSS框架，它允许开发者通过HTML属性快速地定制和构建独特的用户界面。官方提供的模板集合，如`syntax`、`salient`、`keynote`和`pocket`，为开发者...
tailwind-colors:Tailwind CSS颜色配置工具
04-26
顺风颜色 以编辑颜色顺风CSS的工具与Vue公司制造- 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint
Tailwind-boilerplate:基于TailwindCSS的前端开发样板
04-09
尾风样板基于TailwindCSS的前端开发样板一个新的基于TailwindCSS的项目入门的简单样板。 它包括支持TailwindUI的其他插件： @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography 已经定义了各种...
tailwindcss-plugin-line-clamp:一个Tailwind CSS插件，用于线夹
05-26
由于使用了官方的TailwindCSS插件，该软件包已不再维护，请改用 Tailwind CSS插件–线夹 安装 安装插件： # Using npm npm install @neupauer/tailwindcss-plugin-line-clamp --save-dev # Using Yarn yarn add @neupauer/tailwindcss-plugin-line-clamp -D 将其添加到您的tailwind.config.js文件中： // tailwind.config.js module . exports = { // ... plugins : [ require ( "@neupauer/tailwindcss-plugin-line-clamp" ) ] , } ; 配置 默认情况下，提供了一些线夹具，但是你可以重写或它们与延长lin
TailwindCSS一个实用第一的CSS框架用于快速构建自定义UI
08-08
Tailwind CSS 一个实用第一的CSS框架，用于快速构建自定义UI
Tailwind Responsive
JunChow
06-19 557
关键词：响应式设计 首先需要区分下响应式与自适应之间的区别 自适应：一套模板适应所有终端，每种设备上看到的版式都是一样的，俗称宽度自适应。 响应式：一套模板适应所有终端，但每种设备看到的版式可以是不一样的。 虽然响应式或自适应设计带来设备兼容、工作量大、代码累赘、加载时间长的缺点，但跨平台和终端能“一次设计普遍适用”。可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现...
Tailwind Pseudo Class
JunChow
06-19 589
CSS伪类（pseudo-class）用来添加选择器的特殊效果，CSS伪类选择器会根据条件匹配组件，但不一定是由DOM树定义的。CSS伪类是添加到选择器上的关键字，用于为指定要选择的元素的特殊状态添加样式。 CSS伪类允许设置元素状态的样式，以及DOM树种现有但不能通过其他选择器作为目标的元素，而无需添加任何选择器。 CSS伪类选择器可以分为伪类（pseudo-class）和伪元素（pseudo-...
Bootstrap4样式之flex样式
weixin_45884768的博客
03-17 2401
1、开启Flex布局样式 使用.d-flex和.d-inline-flex实现开启flex布局样式，也可以使用.d-[sm|md|lg|xl]-*之前再不同屏幕开启flex布局样式 <div class="d-flex"> <div class="p-2 border border-success w-25">项目1</div> <div class=...
记录Vue3中引入tailwindcss和antDesign Vue，使用message出现的样式问题
weixin_52020362的博客
11-30 1921
记录Vue3中引入tailwindcss和antDesign Vue，使用message出现的样式问题
tailwindcss使用插件自定义隐藏滚动条类
IU
01-25 674
在tailwindcss.config.js中。
vue3.0用render创建button组件
放风喽的博客
08-13 1513
一、前言 2021年8月13日耗费一天时间按照navie-ui的button源码，自己写了一个button组件， 二、代码 <script> import {defineComponent,h} from "vue"; import myload from "../myload/index.vue" export default defineComponent({ name: "", props:{ loading:{ default:false, typ
tailwind使用
05-24
Tailwind是一个CSS框架，可以帮助开发者快速构建UI。以下是使用Tailwind的基本步骤： 1. 在你的项目中安装Tailwind。可以通过npm或yarn进行安装。 2. 在你的CSS文件中使用@tailwind指令，例如：@tailwind base; @...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值