妈的，CSS：

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

太难搞了，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| 字数 32

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

legs+ · 发表于 2024-12-14 16:03:35| 字数 172

孤星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| 字数 235

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| 字数 157

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

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

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

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

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

legs+ · 发表于 2024-12-14 17:32:30| 字数 0

妈的，CSS：

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

点评