跳至主要內容

02 【TailWind CSS 初体验】

约 363 字大约 1 分钟...

02 【TailWind CSS 初体验】

经过上一篇 Tailwind CSS 的学习,现在已经安装好了,万事俱备,只欠东风。这篇文章不往后学习,先来找找成就感!,体验一把 Tailwind CSS 的案例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../dist/output.css" />
  </head>
  <body>
    <div class="text-gray-600">
      <header class="mb-5">
        <div class="bg-gray-700 p-4 text-white">Hello world</div>
      </header>
      <main class="container mx-auto">
        <div class="text-center text-5xl">Hello TailWind CSS</div>
        <hr class="my-5" />
        <div class="flex justify-center">
          <a href="./showTwo.html" target="_blank">
            <img
              src="https://www.ziruchu.com/uploads/slideshow/2019061744096.png"
              class="shadow-lg border-2 border-sky-500 my-5 align-middle"
            />
          </a>
        </div>
      </main>
      <footer class="mt-5">
        <div class="bg-gray-300 p-4 text-black">你好,TailWind CSS。</div>
      </footer>
    </div>
  </body>
</html>
image-20220816124340412
image-20220816124340412
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../dist/output.css" />
  </head>
  <body>
    <h1 class="text-lg font-bold tracking-widest uppercase">TailWind CSS</h1>
    <div
      class="leading-9 text-center bg-yellow-500 w-1/2 h-1/3 p-5 my-10 border-2 border-solid border-pink-500 opacity-40 shadow-2xl"
    >
      <p>hello tailwind css</p>
    </div>
    <input type="text" class="border border-pink-500 rounded-lg outline-0 focus:border-blue-500" />
    <div class="md:flex md:flex-wrap m-5">
      <div class="bg-orange-500 p-5 md:w-1/3 md:bg-red-600">Laravel</div>
      <div class="bg-blue-500 p-5 md:w-1/3">Tailwind CSS</div>
      <div class="bg-pink-500 p-5 md:w-1/3">Livewire</div>
    </div>
  </body>
</html>
image-20220816124411029
image-20220816124411029
已到达文章底部,欢迎留言、表情互动~
  • 赞一个
    0
    赞一个
  • 支持下
    0
    支持下
  • 有点酷
    0
    有点酷
  • 啥玩意
    0
    啥玩意
  • 看不懂
    0
    看不懂
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8