Fork me on GitHub

用户注册页面.html

HTML5用户注册页面示例

用户注册页面






点击查看代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>HTML5用户注册页面示例</title>
        <link rel="stylesheet" href="css/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="pwd" required />
                </label>
                <br />
                <label>姓　名：
                    <input type="text" placeholder="请输入真实姓名" name="name" required />
                </label>
                <br />
                <label>邮　箱：
                    <input type="email" placeholder="请输入电子邮箱" name="email" required />
                </label>
                <br />
                <button type="submit">
                    提交注册
                </button>
            </form>
        </div>
    </body>
</html>
css渲染
点击查看代码 
body {
	background-color:#CCCCCC;/*设置页面背景色为浅灰色*/
}

/*注册面板样式*/
#container{
	background-color:white;
	color:#2289F0;
	padding:15px;
	margin: 100px auto 0px; /*上边距100px；左右为auto；下边距0px*/
	width:600px;
	text-align:center;
	font-family:"微软雅黑 Light";
	box-shadow: 10px 10px 15px black;
}

/*水平线样式*/
hr{
	width:80%;
	border:#2289F0 1px solid;
	margin-bottom:15px;
}

/*输入表单样式*/
input{
	width:180px;
	height:20px;
	margin:5px;
	font-size:16px;
	font-family:"微软雅黑 Light";
}

/*按钮样式*/
button{
	width:120px;
	height:40px;
	background-color:#2289F0;
	border:0px;
	color: white;
	margin:10px;
	font-size:18px;
	font-family:"微软雅黑 Light";
	font-weight:bold;
}

/*鼠标悬浮时按钮样式*/
button:hover{
	background-color:#0068D0;
}

posted @ 2022-02-21 19:07  sxflmy  阅读(342)  评论(0)    收藏  举报