Tailwind CSS制作紫色风格联系我们页面
2022-05-14 本文已影响0人
ohityes
这是使用 Tailwind CSS 制作的紫色风格联系我们页面，背景分为左右两部分，左边是纯紫色填充，右边是一张紫色的水果花朵图片，联系表单浮现在背景上面。该页面适配了移动设计，在手机设备上，背景只显示虚化的图片。
8765.jpeg
查看效果：Tailwind CSS制作紫色风格联系我们页面演示
制作过程
1、HTML
<!DOCTYPE html>
<html lang="zh-CN">
<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>Tailwind CSS紫色风格联系我们页面演示_dowebok</title>
<link rel="stylesheet" href="css/tailwind.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body class="relative h-screen">
<div class="relative z-10 flex items-center h-screen">
<div class="w-2/5 hidden sm:block"></div>
<div class="form-wrap">
<h1 class="mb-8 text-xl sm:text-3xl text-white text-center lg:text-left">联系我们，为您提供优质服务</h1>
<form action="#" class="dowebok flex flex-wrap px-6 py-12 rounded-2xl text-sm shadow-2xl">
<div class="w-full sm:w-1/2 px-6">
<label for="name" class="block mb-1">您的姓名</label>
<input type="text" id="name" class="w-full h-10 p-3 rounded outline-none shadow">
</div>
<div class="w-full sm:w-1/2 mt-8 sm:mt-0 px-6">
<label for="email" class="block mb-1">电子邮箱</label>
<input type="text" id="email" class="w-full h-10 p-3 rounded outline-none shadow">
</div>
<div class="w-full sm:w-1/2 mt-8 px-6">
<label for="phone" class="block mb-1">手机号码</label>
<input type="text" id="phone" class="w-full h-10 p-3 rounded outline-none shadow">
</div>
<div class="w-full sm:w-1/2 mt-8 px-6">
<label for="wechat" class="block mb-1">微信号</label>
<input type="text" id="wechat" class="w-full h-10 p-3 rounded outline-none shadow">
</div>
<div class="w-full mt-8 px-6">
<label for="content" class="block mb-1">您的内容</label>
<textarea id="content" class="w-full p-3 rounded outline-none resize-none shadow"></textarea>
</div>
<div class="w-full mt-8 px-6 text-right">
<button class="submit h-10 px-8 rounded text-white shadow">提 交</button>
</div>
</form>
<div></div>
</div>
</div>
<div class="bg absolute z-0 flex top-0 right-0 bottom-0 left-0">
<div class="w-2/5 h-full hidden sm:block"></div>
<div class="bg-img w-full sm:w-3/5 h-full filter sm:filter-none blur-lg"></div>
</div>
</body>
</html>
2、CSS
* {
box-sizing: border-box;
}
h1 {
text-shadow: 0 0 5px #333;
}
.form-wrap {
position: absolute;
left: 50%;
width: 80%;
transform: translateX(-50%);
}
@media screen and (min-width: 1024px) {
.form-wrap {
position: static;
left: 0;
width: 730px;
margin-left: -380px;
transform: translateX(0);
}
}
@media screen and (min-width: 1280px) {
.form-wrap {
margin-left: -400px;
}
}
.dowebok {
background-color: #ddd6ee;
}
.dowebok label {
color: #625379;
}
.dowebok .submit {
background-color: #7f6ace;
}
.bg {
background-color: #756391;
}
.bg-img {
background: url(../images/bg.jpg) 50% / cover;
}
到这里就制作完了，如需下载完整代码，请前往：Tailwind CSS制作紫色风格联系我们页面
