2022-4-11

留照

已于 2022-04-11 22:45:30 修改

阅读量227

点赞数

分类专栏： JavaHomeWork 文章标签： html5 css

于 2022-04-11 22:43:01 首次发布

本文链接：https://blog.csdn.net/weixin_44439945/article/details/124111700

版权

JavaHomeWork 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

账号登陆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号登陆</title>
    <style>
        form {
            margin-bottom: 50px;
            width: 500px;
            background-color: #eeeff2;
            border-radius: 8px;
        }

        button {
            background-color: #4e6ef2;
            color: #ffffff;
            width: 380px;
            height: 47px;
            border-radius: 8px;
            border: 0px;
            margin: 0 auto 50px 60px;
        }

        button:hover {
            background-color: #4662d9;
        }

        input {
            display: block;
            width: 336px;
            height: 20px;
            margin: 0 auto;
            border-radius: 8px;
            border: 1px solid #b8b8b8;
            padding: 10px 20px;
        }

        input:focus {
            outline: none;
            border: 1px solid #8db9f1;
        }

        #t {
            color: #4e6ef2;
            margin: 0 auto 50px 360px;
        }

        #t1 {
            font-weight: bold;
            color: black;
            margin: 0 auto 50px 60px;
            border-bottom: 3px solid #91a5f7;
            padding-bottom: 6px;
        }
    </style>
</head>

<body background="https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg">

    <form action="#">
        <a style="text-decoration: none;" href="file:///F:/web/day01/HW.html?username=&password=#">
            <font id="t1" face="微软雅黑" size="5">账号登陆</font><br><br>
        </a>
        <input type="text" name="username" placeholder="手机号/用户名/邮箱"><br>
        <input type="password" name="password" placeholder="密码"><br>
        <a style="text-decoration: none;" href="file:///F:/web/day01/HW02.html">
            <font id="t" size="3">忘记密码？</font><br><br>
        </a>
        <button>登录</button>
    </form>

</body>

</html>

在这里插入图片描述

注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号登陆和注册</title>
    <style>
        form {
            margin-bottom: 50px;
            width: 500px;
            background-color: #eeeff2;
            border-radius: 8px;
            padding-left: 20px;
        }

        button {
            width: 100px;
            height: 50px;
            font-size: 15px;
            background-color: #ffffff;
            color: black;
            border: 0px;
            border-radius: 5px;
        }

        button:hover {

            color: blue;
            border: 0.5px solid blue;
        }

        #b {
            background-color: #bdcefc;
            color: #ffffff;
            width: 450px;
            height: 47px;
            border-radius: 8px;
            border: 0px;
            margin: 0 auto 50px;
        }

        #b:hover {
            background-color: #4662d9;
        }

        input {
            width: 336px;
            height: 20px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #b8b8b8;
            padding: 10px 20px;
        }

        input:focus {
            outline: none;
            border: 1px solid blue;
        }

        #t2 {
            font-weight: bold;
            color: black;
            margin: 0 auto 50px 60px;
        }

        #t3 {
            font-weight: bold;
            color: #a7a7a7;
            margin: 0 auto 50px 60px;
        }
    </style>
</head>

<body background="https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg">


    <form action="#">
        <font id="t2" face="微软雅黑" size="5">欢迎注册</font><br><br>
        <font id="t3" face="微软雅黑" size="2">已有帐号？<a style="text-decoration: none;color: blue;"
                href="file:///F:/web/day01/HW.html?username=&password=#">登录</a></font><br>
        <p>用户名&nbsp;
            <input type="text" name="username" maxlength="8" placeholder="请设置用户名">
        </p>
        <p>手机号&nbsp;
            <input type="text" name="ph" maxlength="11" placeholder="可用于登录和找回密码">
        </p>
        <p>密&nbsp;&nbsp;&nbsp;码&nbsp;
            <input type="password" name="password" placeholder="请设置登录密码">
        </p>
        <p>验证码&nbsp;
            <input type="text" name="username" placeholder="请输入验证码">
        </p>
<button>获取验证码</button>
        <button id="b">注册</button>
    </form>
</body>
</html>

在这里插入图片描述

留照

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-4-11

账号登陆<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
复制链接

扫一扫