web实验用户注册界面-蒲公英云

web实验用户注册界面

怼烎@ 2023-03-12 10:58 169阅读 0赞

HTML代码部分

在这里插入代码片
<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="reg.css">
</head>
<body>
    <div id="container">
        <!--页面标题-->
        <h1>空壳公司用户注册</h1>
        <hr />
        <!--表单-->
        <form method="post" action="URL" autocomplete="on">
            <label>用 户:
                <input type="text" placeholder="请输入用户名" name="username" required/>
            </label>
            <br />
            <label>密    码:     
                <input type="password" placeholder="请输入新密码" name="pwd" required/>
            </label>
            <br />
            <label>确    认:
                <input type="password" placeholder="请再次输入密码" name="pwd2" required/>
            </label>
            <br />
            <label>姓    名:
                <input type="text" placeholder="请输入真实姓名" name="name" required/>
            </label>
            <br />
            <label>邮    箱:
                <input type="email" placeholder="请输入电子邮箱" name="email" required/>
            </label>
            <br />
            <label>手    机:
                <input type="tel" placeholder="请输入手机号码" name="tel"/>
            </label>
            <br />
            <button type="submit">
                提交注册
            </button>
            <button type="reset">
                清空内容
            </button>
        </form>
    </div>
</body>
</html>

css代码部分

#container{
    background-color:#87CEEB;
    color:#2F4F4F;
    padding:15px;
    margin:100px auto 0px;
    width:600px;
    text-align:center;
    font-family:"微软雅黑 Light";
    box-shadow:10px 10px 15px black;/*美化界面*/
}
hr{
    width:80%;
    border:#8B0000 1px solid;
    margin-bottom:15px;
}
body{
    background-image:url("1.jpg");
}
input{
    width:180px;
    height:20px;
    margin:5px;
    font-size:16px;
    font-family:"微软雅黑 Light";
}
button{
    width:120px;
    height:40px;
    background-color:#F08080;
    border:0px;
    color:white;
    margin:10px;
    font-size:18px;
    font-family:"宋体";
    font-weight:bold;
}
button:hover{
    background-color:#800000;
    color:#B0C4DE;
}