vue+tailwind自适应响应式个人中心动态博客页面代码

代码语言:html

所属分类:响应式

代码描述:vue+tailwind自适应响应式个人中心动态博客页面代码

代码标签: vue tailwind 自适应 响应式 博客

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
        body {
          font-family: "Nunito", sans-serif;
        }
        .panel {
          width: 100%;
        }
        .main {
          width: 100%;
        }
        @media (min-width: 1024px) {
          .panel {
            width: 20%;
          }
          .main {
            width: 60%;
          }
        }
    </style>


</head>

<body>
    <div class="lg:flex container mx-auto p-3" id="app">
        <div class="panel p-2">
            <div class="rounded overflow-hidden shadow-lg my-3">
                <img src="//repo.bfw.wiki/bfwrepo/image/6130b86635bc9.png" class="w-full" />
                <div class="flex justify-center -mt-8">
                    <img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="rounded-full border-solid border-white border-2 -mt-3">
                </div>
                <div class="text-center px-3 pb-6 pt-2">
                    <h3 class="font-bold text-md">Aubree Gilmour</h3>
                    <p class=&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0