正文

HTML5登录界面代码实现居中显示

/0 浏览量
0610

在HTML5中实现登录界面居中显示，可以让页面看起来更加美观和易于使用。以下是一些常用的方法来实现这一效果：

1. 使用CSS样式

使用CSS样式是最简单的方法之一。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
  }
  .login-container {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .form-group button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .form-group button:hover {
    background-color: #4cae4c;
  }
</style>
</head>
<body>
<div class="login-container">
  <h2>登录</h2>
  <form>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <button type="submit">登录</button>
    </div>
  </form>
</div>
</body>
</html>

2. 使用Flexbox布局

Flexbox布局是现代CSS中常用的布局方式，可以实现更灵活的布局效果。以下是一个使用Flexbox布局的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
  }
  .login-container {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .form-group button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .form-group button:hover {
    background-color: #4cae4c;
  }
</style>
</head>
<body>
<div class="login-container">
  <h2>登录</h2>
  <form>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <button type="submit">登录</button>
    </div>
  </form>
</div>
</body>
</html>

3. 使用Grid布局

Grid布局是CSS中另一种强大的布局方式，可以实现更复杂的布局效果。以下是一个使用Grid布局的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: grid;
    place-items: center;
    background-color: #f2f2f2;
  }
  .login-container {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .form-group button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .form-group button:hover {
    background-color: #4cae4c;
  }
</style>
</head>
<body>
<div class="login-container">
  <h2>登录</h2>
  <form>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <button type="submit">登录</button>
    </div>
  </form>
</div>
</body>
</html>

以上三种方法都可以实现HTML5登录界面居中显示的效果。你可以根据自己的需求选择合适的方法。

-- 展开阅读全文 --