用html和flex布局写一个简易的登录界面

努力学习的健健

已于 2022-08-19 17:44:26 修改

阅读量636

点赞数

文章标签： html css 前端

于 2022-08-19 17:30:07 首次发布

本文链接：https://blog.csdn.net/qq_53519425/article/details/126428770

版权

本文介绍了一位新手如何使用HTML和CSS的Flex布局来制作一个简易的登录界面。提供了源码仓库链接及效果展示，并鼓励大家通过不断学习和坚持提升自己。

摘要由CSDN通过智能技术生成

本人也是小白，互相学习，互相进步，加油持续学习一定会有收获的！！！

css:

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: black;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("./hutao1.jpg"); /* 在这里插入一张你想要设置的背景图片 */
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 540px;
  border: 1px solid rgb(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}
.box > h2 {
  color: rgb(255, 255, 255, 0.9);
  margin-bottom: 50px;
}
.box .input-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.box .input-box > label {
  margin-top: 4px;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgb(255, 255, 255, 0.9);
}
.input-box input {
  width: 250px;
  heigh