【登录界面】

最新推荐文章于 2022-11-07 11:08:22 发布

大月月.

最新推荐文章于 2022-11-07 11:08:22 发布

阅读量385

点赞数 5

分类专栏： html+css+javascript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_67280147/article/details/125237247

版权

html+css+javascript 专栏收录该内容

4 篇文章 7 订阅

订阅专栏

本文分享了一篇关于如何创建具有科技感的登录界面的教程。作者提供了HTML和JavaScript代码示例，展示了如何设置响应式布局，确保页面在不同设备上自适应显示。页面包括标题、输入框和登录按钮等元素，旨在提升用户体验。

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

👧作者：大月月
✨喜欢的可以点赞👍 收藏❤ 关注哦✔
📢分享知识：登录界面（网页）
❌：拒绝摆烂，天天向上

📍页面效果展示

📍部分代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>smart home</title>
    <link rel="stylesheet" href="./css/style1.css" />
    <script type="text/javascript" src="./js/index1.js"></script>
  </head>
  <body>
    <script>
      $(document).ready(function () {
        var whei = $(window).width()
        $('html').css({ fontSize: whei / 24 })
        $(window).resize(function () {
          var whei = $(window).width()
          $('html').css({ fontSize: whei / 24 })
        })
      })
    </script>
    <div class="main">
      <div class="header">
        <div class="header-center fl">
          <div class="header-title">smart home</div>
          <div class="header-img"></div>
        </div>
        <div class="header-bottom fl"></div>
      </div>

      <div class="content">
        <div class="content-left">
          <!--<img src="images/d.png" alt="">-->
        </div>
        <div class="content-right">
          <div class="right-infp">
            <div class="right-infp-name">
              <input
                type="text"
                name="username"
                placeholder="请输入用户名"
                maxlength="12"
                required=""
                value=""
                autocomplete="off"
              />
            </div>
            <div class="right-infp-name">
              <input
                type="text"
                name="name"
                placeholder="请输入密码"
                autocomplete="off"
              />
            </div>

            <div class="right-infp-btn">
              <button class="btn">
                <a href="./SmartHome.html" style="text-decoration: none"
                  >登录</a
                >
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>