遂记录下几个常用的方法，都比较简单。 水平居中直接加上<center>标签即可，或者设置margin:auto;当然...
import{ useEffect, useState }from"react";exportdefaultfunctionIndexPage() {const[isIE, setIsIE] =useState(false);useEffect(() =>{setIsIE(/MSIE|Trident/.test(window.navigator.userAgent));return() =>{}; }, []);return<div>Hello {isIE ? "IE" : "Modern Browsers"}!</div>; } 不过实际用...
<ahref="#"class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"><divclass="flex items-center space-x-3"><svgclass="h-6 w-6 stroke-sky-500 group-hover:stroke-white"fill="none"viewBox...
<divclass="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"> <divclass="flex-shrink-0"> <imgclass="h-12 w-12"src="/img/logo.svg"alt="ChitChat Logo"> </div> <div> <divclass="text-xl font-medium text-black">ChitChat</div> <pclass="text-...
-- 汉堡菜单按钮 --><divclass="flex md:hidden"><buttontype="button"class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100"aria-controls="mobile-menu"aria-expanded="false"><spanclass="sr-only">打开主菜单</span><!-- 汉堡菜单...
<div className='flex sticky justify-between items-center h-20 max-w-full mx-auto px-4 text-white top-0'> <img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9'/> <ul className='hidden md:flex'> <NavLink to="/" activeClassName="active" ><li className='...
实践才是最好的老师,通过这段时间的实践,通过不断地思考和优化项目结构、组件,以及功能的实现。尽管这只是一个简单的项目,但我已经不再是简单的复制粘贴,而是把它当成一件新鲜的事物,用来检验自己的学习成果。我发现Tss 非常适合模块化开发,随着熟练度提高用起来也越来越顺手。
<divclass="space-y-2"><buttonclass="w-full px-4 py-2 bg-gray-100 rounded-lg flex items-center justify-between"onclick="document.getElementById('content').classList.toggle('hidden')"><span>展开面板</span><svgclass="w-4 h-4 transform transition-transform duration-200":class="{'rotate...
</div> 这里,.grid和.grid-cols-3定义了一个栅格布局,它包含三个列。.gap-4设置了列之间的间距。每个列都使用实用程序类来设置背景颜色和内容。 2.4 响应式图片与视频 响应式图片和视频是响应式设计中的一个重要方面,它们允许你根据屏幕尺寸自动调整图片和视频的大小。Tailwind CSS ...
<form class="w-full max-w-sm"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/3"> <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name"> Full Name </label> </div> <div class="md:w-2/3"> <input cl...