tailwind自适应页面布局效果
代码语言:html
所属分类:布局界面
代码描述:tailwind自适应页面布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;0,900;1,500&display=swap'); body { font-family: "Muli"; } </style> </head> <body translate="no"> <div class="flex flex-wrap"> <div class="w-full sm:w-8/12 mb-10"> <div class="container mx-auto h-full sm:p-10"> <nav class="flex px-4 justify-between items-center"> <div class="text-4xl font-bold"> Plant<span class="text-green-700">.</span> </div> <div> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 469.333 469.333" style="enable-background:new 0 0 469.333 469.333;" xml:space="preserve" class="w-8"> <g> <g> <path d="M468.523,6.592C466.88,2.603,462.976,0,458.667,0C44.694,0,0,171.563,0,245.333c0,26.539,5.888,51.328,17.515,73.664 c1.792,3.456,5.333,5.653,9.216,5.739c3.669-0.107,7.531-1.941,9.472-5.333C64.15,271.104,143.296,151.893,274.006,88.555 c5.355-2.56,11.755-0.363,14.293,4.907c2.56,5.312,0.341,11.712-4.949,14.272c-9.856,4.779-19.328,9.984-28.608,15.381 c-3.541,2.069-6.976,4.267-10.453,6.421c-5.227,3.243-10.389,6.549-15.424,9.963c-5.013,3.371-9.963,6.827-14.827,10.368 c-1.515,1.109-2.965,2.24-4..........完整代码请登录后点击上方下载按钮下载查看
网友评论0