效果图

代码

<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./login.css" /></head><body><div class="container"><div class="loginForm"><div class="formHeader"><div class="logo"><img src="./img/logo.png" alt="" /></div><div class="comName"><h3>WHH</h3><p>找到属于你的哇哈哈饮料</p></div></div><div class="formTitle">登录你的账户</div><form action=""><div class="items"><label class="itemsTitle"><strong>Email</strong></label><inputtype="email"class="form-control"value="hello@example.com"/></div><div class="items"><label class="itemsTitle"><strong>Password</strong></label><input type="password" class="form-control" value="123456" /></div><div class="form-check"><div><input type="checkbox" id="basic_checkbox_1" /><label class="form-check-label" for="basic_checkbox_1">记住我</label></div><div class="forgetPwd"><a href="#">忘记密码?</a></div></div><div class="form-submit"><button type="submit">登 录</button></div></form><div class="new-account"><p>还没有账号?<a href="#">点击注册</a></p></div></div></div></body>
</html>

body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box;
}
h3,
p {margin: 0;padding: 0;
}
.container {background: #f8e5e0;height: 100vh;width: 100%;display: flex;justify-content: center;align-items: center;box-sizing: border-box;
}
.container .loginForm {width: 30%;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;height: 60%;background: #fff;border-radius: 10px;padding: 3.125rem;
}
.container .loginForm .formHeader {display: flex;justify-content: center;margin-bottom: 10px;
}
.container .loginForm .formHeader .comName {display: flex;flex-direction: column;justify-content: space-evenly;margin-left: 15px;
}
.container .loginForm .formHeader .comName h3 {font-size: 36px;font-weight: 600;vertical-align: top;color: rgb(70, 66, 66);font-family: 'Georgia', Tahoma, Sans-Serif;
}
.container .loginForm .formHeader .comName p {color: rgb(61, 51, 51);
}
.container .loginForm .formTitle {text-align: center;font-size: 24px;letter-spacing: 10px;text-indent: 10px;font-weight: 800;margin-bottom: 20px;
}
.container .loginForm form .items {margin-bottom: 25px;
}
.container .loginForm form .items .itemsTitle {margin-bottom: 10px;font-family: 'poppins', sans-serif;color: #393939;
}
.container .loginForm form .items .form-control {box-sizing: border-box;display: block;width: 100%;padding: 0.3125rem 1.25rem;font-size: 1.375rem;font-weight: 400;line-height: 1.5;color: #393939;background-color: #fff;background-clip: padding-box;border: 1px solid #f5f5f5;appearance: none;border-radius: 1rem;height: 3.5rem;transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.container .loginForm form .form-check {margin-bottom: 40px;display: flex;justify-content: space-between;
}
.container .loginForm form .form-check .form-check-label {color: #292424;font-weight: 600;
}
.container .loginForm form .form-check .forgetPwd a {text-decoration: none;color: #898282;
}
.container .loginForm form .form-submit {margin-bottom: 15px;
}
.container .loginForm form .form-submit button {outline: 0;border: none;width: 100%;background-color: #f93a0b;padding: 0.938rem 1.5rem;border-radius: 1.125rem;font-weight: 400;font-size: 1.4rem;color: #fff;font-weight: 700;cursor: pointer;
}
.container .loginForm .new-account {color: #898282;
}
.container .loginForm .new-account a {text-decoration: none;color: #c72e09;
}

HTML 实现一个简单而精美的登录界面相关推荐

TextInputLayout+TextInputEditText 打造精美的登录界面
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局一.项目 ...
运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
使用Java编写一个简单的 JFrame登陆注册界面（一）
使用Java awt 及 Swing 组件编写一个简单的JFrame登陆注册界面. 示例: 下面开始介绍如何编写. 通过调用实例化一个JFrame框架,在框架内嵌入JPanel,在JPanel上进行添 ...
弄一个html的登录页面,使用HTML写一个简单的跳转登录页面
最近在学习前端的知识,于是就想写一个简单的页面跳转,必须是勾选了"我同意"这个选项以后才能跳转,否则不能,不废话,直接上代码. 首先是第一个页面:testlogin1.html h ...
好看的登陆界面java_简单又美观的登录界面
蓝桥杯昨天结束了,小编发挥的很不好,不开心~ 所以,今天就不讲算法,讲一下看的见的jsp登录界面吧. 李春波 - 岁月(管弦乐版) 04:13来自浪潮之巅的小萝卜头登录界面效果图: 是不是简洁又美观 ...
【tkinter】的使用详解，做一个简单实用的万能可视化界面！
文章目录一.tkinter类介绍二.在例子中学会用法! 1.一个简单的开始 2.学会使用button 3.Entry窗口部件 1.简单使用 2.动态改变entry内部的值 4.Text窗口部件 ( ...
QT实现一个图片显示器，有登录界面（附图片，源码可直接使用）
QT-图片浏览器(显示器)的实现(含登录界面) 一.设计要求 1.登录界面创建一个窗体,设计用户登录的界面(含有用户名.密码),并实现用户登录的功能,要求用户提交的登录按钮时能获取界面中的用户名 ...
一个简单可以聊天的聊天界面
一个简单QQ聊天界面 1, 代码实现 2, 效果图 3, 仿QQ聊天系统资源下载具体代码实现如下: package com.cts.entity;import java.awt.*; import ...

HTML 实现一个简单而精美的登录界面

效果图

代码

HTML 实现一个简单而精美的登录界面相关推荐

最新文章

热门文章