HTML＋CSS登录界面样式

甜甜圈万能工作室_Tian

于 2024-09-18 17:38:20 发布

阅读量429

点赞数 9

分类专栏： HTML+CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/2302_81102200/article/details/142339172

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果展示：

代码：

index.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="Div1">
    <div class="imgBackgroundDiv">
      <img src="image.png">
    </div>
    <div class="textDiv">
      <h3>HELLO</h3>
      <input type="text" placeholder="Name">
      <input type="password" placeholder="Password">
    </div>
    <div class="buttonDiv">
      <button><b>Sign in</b></button>
    </div>
  </div>
</body>

</html>

style.css：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

::placeholder {
  color: #C0C0C0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.Div1 {
  position: relative;
  background: #5560D4;
  width: 250px;
  height: 170px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 80, 0.3);
}

.imgBackgroundDiv {
  position: absolute;
  left: -55px;
  width: 170px;
  overflow: hidden;
}

.imgBackgroundDiv img {
  width: 100%;
}

.textDiv {
  position: absolute;
  width: 50%;
  padding: 5px;
  left: 120px;
}

.textDiv h3 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 12px;
  text-shadow: 0 2px 3px rgba(0, 0, 80, 0.3);
}

.textDiv input {
  width: 100%;
  border: 2px solid #7B86FF;
  border-radius: 5px;
  margin-top: 10px;
  padding: 2.5px;
  color: #7F82A8;
}

.buttonDiv {
  position: absolute;
  width: 50%;
  left: 120px;
  bottom: 8px;
  padding: 5px;
  text-align: center;
}

.buttonDiv button {
  width: 98%;
  height: 23px;
  border: none;
  border-radius: 50px;
  background: #D2D5F4;
  color: #6E6D87;
  transition: 0.3s;
}

.buttonDiv button:hover {
  transform: scale(1.02);
  background: #fff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 50, 0.2);
}

感谢您看到这里~🥰