登陆界面
2020-12-19 本文已影响0人
雪国_youth
一、关于如何在css中设置整个网页的颜色
注意：
其中html和body不需要加上“ . ”
二、 如何使登录的那个login-wrapper永远居中
其中transform是位移的意思， transform: translate(-50%,-50%)是在不知道宽高的情况下水平居中，如果不设置padding的值，那么中间的username和password那个框会超出界面。
transform: translate(-50%,-50%); /*实现在不知道自身宽高的情况下处于水平居中*/
left: 50%;
top: 50%;
padding: 0 50px;
三、html中怎么写代码才可以在css中实现它的样式
HTML代码如下：
<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>
CSS代码如下：（连着写）
.form-wrapper .input-item{
}
四、height 和 line-height的区别
如果是height的话，那么字只会显示在div的最上方，如图
而需要的是显示在div的中间，如图
五、总的代码如下
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css"/>
<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="#">Sign up</a>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
font-family: 'Open Sans Light'; /*设置字体类型*/
letter-spacing: 0.05em; /*设置字母语字母之间的间距，其中em是相对长度单位*/
}
html{
height: 100%;
}
body{
height: 100%;
}
/*html和body前面不应该加.，它代表充满整个网页*/
.container{
height: 100%;
background-image: linear-gradient(to top ,rgba(9, 165, 255, 0.5), rgba(12, 15, 201, 0.5));
}
.login-wrapper{
position: relative;
background-color: rgb(255, 255, 255);
width: 250px;
height: 500px;
border-radius: 10px;
transform: translate(-50%,-50%); /*实现在不知道自身宽高的情况下处于水平居中*/ /*translate位移*/
left: 50%;
top: 50%;
padding: 0 50px;
}
.form-wrapper .input-item::placeholder{
text-transform: uppercase; /*定义仅有大写字母*/
}
.header{
font-size: 30px;
font-weight: bolder; /*bolder的意思是粗体*/
text-align: center;
line-height: 200px;
}
.form-wrapper .input-item {
font-size: 15px;
color:rgb(0, 0, 0) ;
width: 100%;
margin-bottom: 20px;
padding:10px;
border: 0;
display: block;/*设置的块元素，可以设置行高宽，内外边距来调整这个矩形 */
border-bottom: 1px solid rgb(0, 0, 0);
outline: none;
}
.login-wrapper .form-wrapper .btn{
text-align: center;
color:white ;
padding: 5px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right, rgba(94, 96, 224, 0.5), rgba(129,23,34,0.5));
border-radius: 5px;
}
.login-wrapper .msg{
text-align: center;
line-height: 80px;
/* 设置Don't那个盒子的行高 */
}
.login-wrapper .msg a{
text-decoration-line: none;
color: rgb(94, 143, 3);
/* 设置Sign up链接的颜色和下划线 */
}
显示如下：
