简单的登录界面（html）

爱编程的锤子

已于 2023-08-16 14:09:56 修改

阅读量4.9k

点赞数 3

文章标签： html 前端

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

本文链接：https://blog.csdn.net/Delphi_7710/article/details/118609500

版权

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

摘要由CSDN通过智能技术生成

开头先展示成果：

制作该页面代码不多，十分简单，运用了些许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>

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