写一个前端登录页面，需要验证码

最新推荐文章于 2023-05-29 11:02:18 发布

王元祺

最新推荐文章于 2023-05-29 11:02:18 发布

阅读量116

点赞数

文章标签：前端 css javascript html css3

本文链接：https://blog.csdn.net/weixin_35757191/article/details/128873081

版权

这个示例展示了如何使用HTML、CSS和JavaScript构建一个基本的前端登录表单，其中包括了验证码功能。登录表单的设计经过CSS美化，具有输入框和按钮的样式，并且在输入框获得焦点时有相应的视觉反馈。JavaScript部分可能用于处理验证码的生成和验证。

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

<p>好的，这是一个使用 HTML、CSS 和 JavaScript 构建的前端登录页面，包含验证码功能：</p>
<p>```html
<!DOCTYPE html></p>
<html>
<head>
  <meta charset="utf-8">
  <title>登录</title>
  <style>
    /* 用 CSS 美化登录表单的外观 */
    .login-form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 20px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    }
    .login-form h1 {
      margin: 0 0 20px 0;
      text-align: center;
    }
    .login-form .form-control {
      display: block;
      width: 100%;
      height: 38px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
    .login-form .form-control:focus {
      border-color: #66afe9;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .login-form .btn {
      display: block;
      width: 100%;
      height: 38px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      color: #fff;
      background-color: #337ab7;
      border-color: #2e6da4;
      border-radius: 4px;
      cursor: pointer;
    }
    .login-form .btn:hover,
    .login-form .btn:active,
    .login-form .btn:focus {
      background-color: #286090;
      border-color: #204d74;
    }
    .login-form .checkbox {
      margin-top: 10px;
    }
    .login-form .checkbox,
    .login-form .radio {
      position: relative;
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .login-form .checkbox label,
    .login-form .radio label {
      min-height: 20px;
      padding-left: 20px;
      margin-