legs+ 发表于 2024-12-14 15:26:10

妈的，CSS：

太难搞了，bootstrap还没整明白，tailwind又来了




结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Card Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
</head>
<body class="bg-gray-100">
    <div class="container mx-auto mt-10">
      <h1 class="text-center text-3xl font-bold text-blue-600">
      Tailwind CSS Card Example
      </h1>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-5">
      <div class="bg-white border border-gray-200 rounded-lg shadow-md p-5">
          <h2 class="text-xl font-semibold">Card Title 1</h2>
          <p class="text-gray-700">
            This is a simple card with some text. It can contain any content you
            want.
          </p>
          <button
            class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded"
          >
            Action
          </button>
      </div>
      <div class="bg-white border border-gray-200 rounded-lg shadow-md p-5">
          <h2 class="text-xl font-semibold">Card Title 2</h2>
          <p class="text-gray-700">
            This is another card with different content. Tailwind makes it easy
            to style.
          </p>
          <button
            class="mt-4 bg-green-500 text-white font-bold py-2 px-4 rounded"
          >
            Action
          </button>
      </div>
      <div class="bg-white border border-gray-200 rounded-lg shadow-md p-5">
          <h2 class="text-xl font-semibold">Card Title 3</h2>
          <p class="text-gray-700">
            You can create as many cards as you need using Tailwind CSS.
          </p>
          <button
            class="mt-4 bg-red-500 text-white font-bold py-2 px-4 rounded"
          >
            Action
          </button>
      </div>
      </div>
    </div>
</body>
</html>


孤星88 发表于 2024-12-14 15:50:54

原来Tailwind也是CSS框架啊？我用的是W3.CSS框架。

legs+ 发表于 2024-12-14 16:03:35

孤星88 发表于 2024-12-14 15:50
原来Tailwind也是CSS框架啊？我用的是W3.CSS框架。

我一般手写比较的多，毕竟我还是偏后端。vue用element plus，react用ant design，偶尔穿插一点CSS

我熟悉bootstrap和简单知道点tailwind

但是，w3.css我还是第一次知道，能简单的介绍一下，有什么心得

孤星88 发表于 2024-12-14 16:38:12

legs+ 发表于 2024-12-14 16:03
我一般手写比较的多，毕竟我还是偏后端。vue用element plus，react用ant design，偶尔穿插一点CSS

我熟 ...

原来如此，Bootstrap比较多人用，W3.CSS没有名气。

我是贪W3.CSS有许多现成模板，有几十个，而且是免费的：
https://www.w3schools.com/w3css/w3css_templates.asp

我只改用了几个，心得就说不上了，毕竟我没用过其他CSS框架，无法作比较。

legs+ 发表于 2024-12-14 17:24:56

孤星88 发表于 2024-12-14 16:38
原来如此，Bootstrap比较多人用，W3.CSS没有名气。

我是贪W3.CSS有许多现成模板，有几十个，而且是免费 ...

嗯，w3.css比较适合初学者，没什么生产力

不过，话说回来，css框架不外乎，工具类、布局、组件、表单等等

现在，前端特别卷，很多框架，新技术层出不穷

legs+ 发表于 2024-12-14 17:32:30





页: [1]
查看完整版本: 妈的，CSS：