登录界面

样式一

<!-- 来自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;
}

样式二

posted @ 2021-03-09 23:25  INEEDSSD  阅读(1941)  评论(0)    收藏  举报
← → ↓ ↑