目录
- HTML部分
- CSS部分
- JavaSript部分
- 图片
HTML部分
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Login Template</title>
<meta name="author" content="David Grzyb">
<meta name="description" content="">
<!-- Tailwind -->
<link href="./tailwind.min.css" rel="stylesheet">
<style>
.font-family-karla {
font-family: karla;
}
</style>
</head>
<body class="bg-white font-family-karla h-screen">
<div class="w-full flex flex-wrap">
<!-- Login Section -->
<div class="w-full md:w-1/2 flex flex-col">
<div class="flex flex-col justify-center md:justify-start my-auto pt-8 md:pt-0 px-8 md:px-24 lg:px-32">
<p class="text-center text-3xl">欢迎</p>
<form class="flex flex-col pt-3 md:pt-8" onsubmit="event.preventDefault();">
<label for="name" class="text-lg">用户名</label>
<input type="text" id="name" placeholder="用户名" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline">
<div class="flex flex-col pt-4">
<label for="email" class="text-lg">邮箱</label>
<input type="email" id="email" placeholder="your@email.com" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="flex flex-col pt-4">
<label for="password" class="text-lg">密码</label>
<input type="password" id="password" placeholder="密码" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline">
</div>
<input type="submit" value="登录" class="bg-black text-white font-bold text-lg hover:bg-gray-700 p-2 mt-8">
</form>
<div class="text-center pt-12 pb-12">
<p>还没有注册? <a href="register.html" class="underline font-semibold">注册</a></p>
</div>
</div>
</div>
<!-- Image Section -->
<div class="w-1/2 shadow-2xl">
<img class="object-cover w-full h-screen hidden md:block" src="./photo-1555679427-1f6dfcce943b.jpeg">
</div>
</div>
</body>
</html>src/register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Register Template</title>
<meta name="author" content="David Grzyb">
<meta name="description" content="">
<!-- Tailwind -->
<link href="./tailwind.min.css" rel="stylesheet">
<style>
.font-family-karla {
font-family: karla;
}
</style>
</head>
<body class="bg-white font-family-karla h-screen">
<div class="w-full flex flex-wrap">
<!-- Register Section -->
<div class="w-full md:w-1/2 flex flex-col">
<div class="flex flex-col justify-center md:justify-start my-auto pt-8 md:pt-0 px-8 md:px-24 lg:px-32">
<p class="text-center text-3xl">注册</p>
<form class="flex flex-col pt-3 md:pt-8" onsubmit="event.preventDefault();">
<div class="flex flex-col pt-4">
<label for="name" class="text-lg">用户名</label>
<input type="text" id="name" placeholder="用户名" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" />
</div>
<div class="flex flex-col pt-4">
<label for="email" class="text-lg">邮箱</label>
<input type="email" id="email" placeholder="your@email.com" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" />
</div>
<div class="flex flex-col pt-4">
<label for="password" class="text-lg">密码</label>
<input type="password" id="password" placeholder="密码" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" />
</div>
<div class="flex flex-col pt-4">
<label for="confirm-password" class="text-lg">确认密码</label>
<input type="password" id="confirm-password" placeholder="密码" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" />
</div>
<input type="submit" value="注册" class="bg-black text-white font-bold text-lg hover:bg-gray-700 p-2 mt-8" />
</form>
<div class="text-center pt-12 pb-12">
<p>还没有登录?<a href="index.html" class="underline font-semibold">登录</a></p>
</div>
</div>
</div>
<!-- Image Section -->
<div class="w-1/2 shadow-2xl">
<img class="object-cover w-full h-screen hidden md:block" src="./photo-1555679427-1f6dfcce943b.jpeg" alt="Background" />
</div>
</div>
</body>
</html>CSS部分
src/style.css和src/tailwind.min,.css:
html{
height: 100%;
width: 100%;
}
.container {
text-align: center;
padding: 64px;
}JavaSript部分
src/script.js:无
图片
src/photo-1555679427-1f6dfcce943b.png:
运行结果:
