📌  相关文章
📜  memebuat html dan css login instagram - CSS (1)

📅  最后修改于: 2023-12-03 15:32:52.759000             🧑  作者: Mango

创建 HTML 和 CSS 登录 Instagram - CSS

在此文章中，我们将介绍如何使用 HTML 和 CSS 来创建一个类似 Instagram 登录界面的简单界面。

HTML 文件结构

我们将使用以下 HTML 元素来创建我们的登录界面：

<!DOCTYPE html>
<html>
  <head>
    <title>Instagram Login</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Instagram</h1>
      <form>
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required />

        <label for="password">Password</label>
        <input type="password" id="password" name="password" required />

        <button type="submit">Log in</button>
      </form>
    </div>
  </body>
</html>

在这个 HTML 文件中，我们创建了一个标题为 "Instagram Login" 的页面，并引入一个名为 "style.css" 的样式表。我们还创建了一个包含登录表单的容器，并提供了一些标签和输入字段。最后，我们为登录操作提供了一个提交按钮。

CSS 文件结构

现在让我们为我们的登录界面添加样式。以下是我们将使用的 CSS：

.container {
  width: 320px;
  margin: 0 auto;
}

h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 1.5rem;
}

input {
  height: 3.5rem;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  height: 3.5rem;
  background-color: #3897f0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #38a0f0;
}

在这个 CSS 文件中，我们首先为我们的容器指定了一个宽度并居中对齐。接下来，我们为标题设置了一个较大的字号大小和加粗字体，并添加了一些额外的顶部和底部边距。

对于我们的登录表单，我们使用了 flexbox 布局，并设置了标签和输入字段的字号大小和间距。我们还为输入字段添加了一些视觉上的效果，如圆角边框和淡灰色背景。最后，我们定制了提交按钮的颜色和悬停效果。

结论

通过这个简单的示例，我们学习了如何使用 HTML 和 CSS 来创建一个类似 Instagram 登录界面的页面。我们创建了一个包含登录表单的容器，并为表单和提交按钮提供了样式和交互效果。

希望这篇文章对初学者带来帮助，让他们更加熟悉 HTML 和 CSS。