[分享]css个人博客登陆页面代码

今天我来给大家分享一下自己写的CSS个人博客登录页面代码。 首先我们要知道，在制作网页时，CSS是必不可少的一部分。它可以美化页面，让网页看起来更加舒适和美观。 下面是我的CSS代码： css / 登...

今天我来给大家分享一下自己写的CSS个人博客登录页面代码。
首先我们要知道，在制作网页时，CSS是必不可少的一部分。它可以美化页面，让网页看起来更加舒适和美观。
下面是我的CSS代码：

css
/* 登录页面CSS */
<br>
body {
  background-image: url("背景图.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
<br>
.login-box {
  width: 280px;
  height: 350px;
  background: #000;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 70px 30px;
}
<br>
.login-box a {
  text-decoration: none;
  color: #fff;
}
<br>
.login-box h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
<br>
.login-box input[type="text"], .login-box input[type="password"] {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 20px;
  border: none;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 16px;
}
<br>
.login-box input[type="submit"] {
  width: 100%;
  background: none;
  border: 2px solid #fff;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}
<br>
.login-box input[type="submit"]:hover {
  background: #fff;
  color: #000;
}
<br>
.login-box input[type="submit"]:focus {
  outline: none;
}
<br>
.login-box p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}
<br>
.login-box p a {
  color: #fff;
  text-decoration: underline;
}
<br>

首先，我们设定了页面的背景图片，并让图片自适应页面大小。
其次，我们在CSS中设置了登录框的样式。我们给它设定了宽度、高度、颜色、文字颜色、位置等等。
然后，我们为输入框和提交按钮设置了样式。我们让它们的宽度为100%，边框为none，并设定了背景颜色和字体颜色。
最后，我们为登录框中的文本设置了样式，包括字体大小、行高和颜色等等。
这就是我写的CSS个人博客登录页面的代码，希望能对大家有所帮助！