简单的登录界面（html）

原创已于 2023-08-16 14:09:56 修改 · 5.2k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2021-07-09 16:30:26 首次发布

这篇博客展示了简单的HTML登录界面的实现，主要使用HTML和少量CSS完成。代码包括一个居中显示的表格，包含账号和密码输入框，以及一个登录按钮。背景使用了图片，整体设计简洁。作者表示未来会学习更多知识来改进这个页面。

开头先展示成果：

制作该页面代码不多，十分简单，运用了些许CSS，但大部分都是html。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link  rel="short icon" href="photo/titlepicture(banshou).jpeg" >
    <title>HTML登录界面</title>

<style>
    .tittle1{font-size: xxx-large;text-align: center;font-family: Arial;}
    .button1{text-align: center;}
    body{margin: 250px;background: url("photo/background5(mountain).jpg ")}
</style>
</head>
<body>
 <h1 class="tittle1">HTML登录界面</h1>
<center>
  <table border="0">
      <tr>
          <td style="padding: 20px;padding-right: 0px;color: #bbbbbb;font-size: 20px">
             <b>账号：</b>
          </td>
          <td>
              <form>
                  <input type="text" name="account" >
              </form>
          </td>

      </tr>
      <tr>
          <td style="padding: 20px;padding-right: 0px;color: #bbbbbb;font-size: 20px">
              <b>密码：</b>
          </td>
          <td>
              <form>
                  <input type="password" name="passcode">
              </form>
          </td>
      </tr>
      <tr>
          <td colspan="2" >

              <input type="submit" style="margin: 30px;margin-top:0px;margin-left:10px;width: 250px;height: 50px;font-size: larger;" value="登录">

          </td>

      </tr>
  </table>
</center>
</body>
</html>

以上仅是最近实践成果，若日后学获更多知识会加以改进，令它功能更加完善。