登录界面

2021-03-09 23:35:43 阅读：228 来源： 互联网

标签：界面登录 text 100% wrapper height login font

样式一

<!-- 来自BiliBili：https://www.bilibili.com/video/BV1tA411h7id/? -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
	</head>
	<body>
		
		<div class="container">
			<div class="login-wrapper">
				<div class="header">Login</div>
				<div class="form-wrapper">
					<input type="text" name="username" placeholder="username" class="input-item">
					<input type="password" name="password" placeholder="password" class="input-item">
					<div class="btn">login</div>
				</div>
				<div class="msg">
					Don`t have account? <a href="#">Sing up</a>
				</div>
			</div>
		</div>
		
	</body>
</html>

* {
    margin: 0;
    padding: 0;
    /* 设置字体 */
    font-family: "courier new";
    /* 字母间距 */
    letter-spacing: .05em;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

.container {
    height: 100%;
    /* 背景色渐变效果 */
    background-image: linear-gradient(to right, #fccb90 , #d57eeb);
}

.login-wrapper {
    background-color: #fff;
    width: 300px;
    height: 500px;
    /* 圆角 */
    border-radius: 15px;
    padding: 0 20px;
    /* ----------居中---------- */
    position: relative;
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    /* ------------------------ */
}

.login-wrapper .header {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
}

.form-wrapper .input-item {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

/* 部分浏览器不支持 */
.login-wrapper .form-wrapper .input-item :: placeholder{
    /* 控制文本大小写 */
    /* uppercase：全部大写 */
    /* lowercase：全部小写 */
    /* capitalize：首字母小写 */
    /* text-transform: uppercase; */
}

.login-wrapper .form-wrapper .btn {
    text-align: center;
    padding: 10px;
    margin-top: 40px;
    border-radius: 15px;
    background-image: linear-gradient(to right, #fccb90 , #d57eeb);
    color: #fff;
    cursor: pointer;
}

.login-wrapper .msg {
    text-align: center;
    line-height: 80px;
}

.login-wrapper .msg a {
    text-decoration: none;
    color: #d57eeb;
}

.login-wrapper .msg a:active {
    color: #5C9900;
}

样式二

标签：界面,登录,text,100%,wrapper,height,login,font
来源： https://www.cnblogs.com/wsd413/p/14508919.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

登录界面

样式一

样式二