<html lang="en">
<body
className={`antialiased`}
>
{/*居中显示 sm屏开始 页面最大宽度 max-w-xl*/}
<div className="mx-auto p-4 sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
<Navbar />
{children}
<Footer />
</div>
</body>
</html>
- mx-auto：左右两边居中
- 如果设置了sm、md、lg、xl等屏幕宽度 标签，那么当前生效范围则为：sm <= 当前尺寸 < md 的范围生效
- max-w-xl：最大宽度，sm:max-w-xl 表示sm屏开始最大宽度尺寸xl，如果后续没有设置比sm更大的屏幕尺寸样式则一直按照sm的来用。
{/*设置更宽的字间距*/}
<p className={"hidden md:block text-lg font-medium tracking-wider"}>TrendLama.</p>
- tracking-wider：设置更宽的字体间距
- hidden：默认隐藏
- md:block：当md屏幕尺寸的时候开始显示
{/*w-full 填满容器 元素左右贴边对齐，不加w-full则是根据内容左右两边对齐，一般导航栏、页眉、页脚用的多*/}
<nav className={"w-full flex items-center justify-between border-b border-gray-200 pb-4"}>
- w-full 填满容器 元素左右贴边对齐，不加w-full则是根据内容左右两边对齐，一般导航栏、页眉、页脚用的多
- border-b：显示下边栏
- border-gray-200：设置边栏颜色
<input type="text" id={"search"} placeholder={"Search..."} className={"text-sm outline-0"} />
- outline-0：当鼠标点进input时候不显示input边框
<div className={"hidden sm:flex items-center gap-2 rounded-md ring-1 ring-gray-200"}>
- sm:flex：默认是隐藏hidden，当屏幕尺寸达到sm的时候就显示，接着后续又做了flex items-center的操作，简单写作sm:flex
- 这里没有写成 hidden sm:block flex items-center，因为 sm:block 和 flex 同时存在时，flex 会覆盖 block，导致 sm:block 完全失效 —— 写了等于白写，还误导阅读者
- gap-2：gap最常搭配flex、grid使用
- ring-1：指定边框大小、ring-gray-200指定边框颜色
<div className={"mt-16 flex flex-col items-center md:flex-row md:items-start bg-gray-800 p-8 rounded-lg"}>
- flex flex-col md:flex 默认flex-col垂直列显示，当达到md屏幕尺寸的时候切换到flex-row按行显示
<div className={"relative aspect-[3/1] mb-12"}>
<Image src={"/featured.png"} alt={"Featured Product"} fill />
</div>
- aspect-[3/1] 设置元素宽高比
- Image使用fill属性它会让图片“填充”父容器，并使用 position: absolute 定位，这样父级元素需要定义relative
{/*使用grid网格样式 默认显示1列 在sm屏幕尺寸开始显示2列 在xl屏幕尺寸开始显示3列 在2xl屏幕尺寸开始显示4列*/}
<div className={"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-12"}>
- 主要用于产品列表展示的时候，根据不同屏幕尺寸大小显示不同列数的商品
<div className="relative aspect-[2/3]">
<Image src={product.images[product.colors[0]]} alt={product.name} fill className={"object-cover hover:scale-105 transition-all duration-300"} />
</div>
- 这里 Image使用了object-cover
- 当图片的宽高比与容器的宽高比不匹配时：
object-cover: 图片会填满整个容器，保持原始比例，多余的部分会被裁剪掉object-contain: 图片会完整显示在容器内，保持原始比例，可能会有留白object-fill: 图片会拉伸以填满容器，可能会变形
- hover:scale-105 当鼠标悬停图片上的时候会 触发缩放1.05倍操作，效果: 当鼠标悬停时，图片会轻微放大
- transition-all: 对所有可过渡的CSS属性应用过渡效果，效果: 让所有样式变化都有平滑的过渡动画
- duration-300: 设置过渡动画的持续时间为300毫秒， 效果：动画效果会在0.3秒内完成
视觉表现
- 默认状态: 图片正常显示，
object-cover 确保填充容器
- 鼠标悬停时: 图片平滑地放大到105%大小
- 鼠标离开时: 图片平滑地缩回原始大
{/*SIZES 上下结构 上面文字 下面尺寸选择*/}
<div className="flex flex-col gap-1">
<span className={"text-gray-500"}>Size</span>
{/*遍历商品尺寸数组*/}
<select name="size" id="size" className={"ring ring-gray-300 rounded-md px-2 py-1"}>
{product.sizes.map((size) => (
<option key={size} value={size}>{size.toUpperCase()}</option>
))}
</select>
</div>
- 下拉选框select默认没有外部边框，这里使用ring显示边框（表单元素一般使用ring做边框显示）
- ring-1 明确指定宽度: 添加1px的外边框
- ring 默认宽度: 使用Tailwind的默认ring宽度，默认值: 通常是3px（取决于你的Tailwind配置）
- ring-0 // 0px - 无边框
- ring-1 // 1px - 很细
- ring-2 // 2px
- ring // 3px - 默认（相当于ring-3）
<div className="h-screen flex items-center justify-center">
<Button>Click me</Button>
</div>
- h-screen: 是一个用于设置元素高度的工具类，其作用是将当前元素的高度设置为当前视口的完整高度。
