用HTML写一个登录界面--内容可自己修改

最新推荐文章于 2024-06-18 15:31:56 发布

个人练习生xx

最新推荐文章于 2024-06-18 15:31:56 发布

阅读量914

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_56235386/article/details/130046790

版权

以下是一个简单的登录页面，使用 HTML 和 CSS 实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>欢迎来到我们的网站</h1>
    <form>
      <label for="email">邮箱</label>
      <input type="text" id="email" name="email" required>
      
      <label for="password">密码</label>
      <input type="password" id="password" name="password" required>

      <button type="submit">登录</button>
    </form>
  </div>
</body>
</html>

在上面的代码中，使用了 form 元素来创建登录表单，并包括两个输入字段（邮箱和密码）和一个提交按钮。

接下来，我们可以使用 CSS 样式表为页面添加一些样式和布局：

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

.container {
  width: 400px;
  margin: 50px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

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

label {
  font-size: 18px;
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"] {
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: none;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

button {
  padding: 10px;
  background-color: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

button:hover {
  background-color: #c0392b;
}

在样式表中，我们设置页面背景颜色、容器样式、标题样式和表单样式。登录表单中，我们使用 CSS Flexbox 布局方法将标签和输入字段垂直排列，并给它们添加了美观的样式。

个人练习生xx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用HTML写一个登录界面--内容可自己修改

在样式表中，我们设置页面背景颜色、容器样式、标题样式和表单样式。登录表单中，我们使用 CSS Flexbox 布局方法将标签和输入字段垂直排列，并给它们添加了美观的样式。元素来创建登录表单，并包括两个输入字段（邮箱和密码）和一个提交按钮。以下是一个简单的登录页面，使用 HTML 和 CSS 实现。在上面的代码中，使用了。
复制链接

扫一扫