首页 > 其他分享 >9.11

9.11

时间:2023-09-11 20:35:57浏览次数:34  
标签:color type 9.11 captcha input margin border

验证码实现,但是仅图片

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="password"],
        input[type="number"] {
            width: 100%;
            height: 40px;
            padding: 5px 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .captcha {
            display: flex;
            align-items: center;
        }

        .captcha img {
            margin-right: 10px;
        }

        .captcha input[type="text"] {
            flex: 1;
        }

        .submit-btn {
            width: 100%;
            height: 40px;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password">
            </div>
            <div class="form-group">
                <label>Captcha</label>
                <div class="captcha">
                    <img src="D:\zhuo mian\mLvJmVXKpY.png " alt="Captcha" width="80px">
                    <input type="text" name="captcha" placeholder="Enter the captcha">
                </div>
            </div>
            <button class="submit-btn" type="submit">Login</button>
        </form>
    </div>
</body>
</html>

效果

 

标签:color,type,9.11,captcha,input,margin,border
From: https://www.cnblogs.com/zeyangshuaige/p/17694422.html

相关文章

  • 大二上 23.9.11
    今天学习了很多。1.编程的根本:顺序、循环和分支。2.编程思维就是分解--识别模式--抽象--算法四个步骤组成。3.StringJava中是类,它所包含的是对象,不能直接等于。4.Java语言规范:https://docs.oracle.com/javase/specs//5.学习java:https://www.runoob.com/java/java-tutorial.......
  • 23.9.11
    学习了编程思维,就是“理解问题——找出路径”的思维过程,它由分解——识别模式——抽象——算法四个步骤组成。认识了Java的命名规范,https://docs.oracle.com/javase/specs/自动类型转换是安全的,强制类型转换时,可能会引起信息的损失。使用double进行数值运算,计算结果是不精确的,......
  • 9.11 代理设计模式
    interfaceIEat{//定义核心业务标准publicvoidget();//业务方法}classEatRealimplementsIEat{//定义真实主题类publicvoidget(){System.out.println("【真实主题】得到一份食物,而后开始品尝美味");}}classEatProxyimplem......
  • k8s 1.19.11 Ingress-nginx 的部署
    官网地址:https://kubernetes.github.io/ingress-nginx/github:https://github.com/kubernetes/ingress-nginx/tree/main/charts/ingress-nginx参考文档:使用ingress......
  • chrome: css:transform:scale时部分缩放比例相邻图片间有间隔缝隙(chrome 106.0.5249.
    一,问题的表现:页面上左右两个div,里面各有一张图片,图片是相邻的,在页面上应该象一张图一样显示,代码如下:<!--background:#000000;--><divstyle="width:100%;heigh......
  • 2022.9.11 2022年全国高中数学联赛A卷加试第二题另解
    二.设整数\(n(n>1)\)恰有\(k\)个互不相同的素因子,记\(n\)的所有正约数之和为\(\sigma(n)\),证明\(\sigma(n)|(2n-k)!\)(\(2022\)年全国高中数学联赛加试第二题)解析思路是很......
  • 2022.9.11———HZOI【CSP-S模拟3】游寄
    \(Write\In\Front\)“没啥事就写博客呗”\(Rank36/43\)得分\(0+15+0+5=20pts\)我草了开局直接冲\(T1\),想了个差不多的贪心就开始莽,莽了一会发现假了,然后......