【实战篇】HTML+CSS实现简洁大方的登录注册页面
【摘要】 前言 随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的登录注册页面，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方。简洁大方的登录注册页面演示 编辑 这是一款简洁的登录注册页面，分为左右两栏，左边是表单，设计了微信、微博登录按钮，或者使用电...
前言
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的登录注册页面，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方。
简洁大方的登录注册页面演示
这是一款简洁的登录注册页面，分为左右两栏，左边是表单，设计了微信、微博登录按钮，或者使用电子邮箱注册登录，右边是一张白领在办公室里的图片。页面使用 Tailwind CSS 制作，兼容各种设备，如平板电脑、手机等等。格式为 AI，含 JPG 预览图。
1.Html构建
代码如下（示例）：
<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dowebok">
<div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
<div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
<div class="mt-12 flex flex-col items-center">
<h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
<div class="w-full flex-1 mt-8">
<div class="flex flex-col items-center">
<button class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline">
<div class="weixin"></div>
<span class="ml-4">使用微信登录</span>
</button>
<button class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5">
<div class="weibo"></div>
<span class="ml-4">使用微博登录</span>
</button>
</div>
<div class="my-12 border-b text-center">
<div class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2">或者使用电子邮箱注册</div>
</div>
<div class="mx-auto max-w-xs">
<input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" type="email" placeholder="电子邮箱" />
<input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" type="password" placeholder="密码" />
<button class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none">
<span class="ml-3">注 册</span>
</button>
<p class="mt-6 text-xs text-gray-600 text-center">我同意并遵守服务协议</p>
</div>
</div>
</div>
</div>
<div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
<div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat" style="background-image: url('images/dowebok.svg');"></div>
</div>
</div>
2.CSS编写
CSS引入了tailwind.min.css库，Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。官方参考文档：
3.完整代码
index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>简洁的登录注册页面演示_dowebok</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/1.2.0/tailwind.min.css">
<style>
.dowebok .weixin, .dowebok .weibo {
display: inline-block;
width: 32px;
height: 32px;
background-size: cover;
}
.dowebok .weixin {
background-image: url(images/weixin.png);
}
.dowebok .weibo {
background-image: url(images/weibo.png);
}
</style>
</head>
<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dowebok">
<div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
<div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
<div class="mt-12 flex flex-col items-center">
<h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
<div class="w-full flex-1 mt-8">
<div class="flex flex-col items-center">
<button class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline">
<div class="weixin"></div>
<span class="ml-4">使用微信登录</span>
</button>
<button class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5">
<div class="weibo"></div>
<span class="ml-4">使用微博登录</span>
</button>
</div>
<div class="my-12 border-b text-center">
<div class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2">或者使用电子邮箱注册</div>
</div>
<div class="mx-auto max-w-xs">
<input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" type="email" placeholder="电子邮箱" />
<input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" type="password" placeholder="密码" />
<button class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none">
<span class="ml-3">注 册</span>
</button>
<p class="mt-6 text-xs text-gray-600 text-center">我同意并遵守服务协议</p>
</div>
</div>
</div>
</div>
<div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
<div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat" style="background-image: url('images/dowebok.svg');"></div>
</div>
</div>
</body>
</html>总结
以上就是今天要讲的内容啦，给大家分享了一个简洁大方的登录注册页面演示，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）