注册表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表</title>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px; /*全局字体和字号*/
background:#12F2FF;
}
#header {
width:480px;
margin:0 auto; /*上下间距0，左右自动平衡。实际上就等因而左右自动居中*/
height:60px;
}
#header a {
padding-top:40px; /*距离顶部的内间距为40px*/
display:block; /*默认的内联显示方式是没有内间距的计算的。即若不设为块显示，则看不到效果*/
color:#000; /*字体为白色*/
text-decoration:none; /*去除下划线*/
}
#header a:hover {
color:#fc0;
}
#content {
width:480px;
margin:0 auto;
background:#fff;
}
#content h1 {
padding:20px; /*内间距*/
}
#content p {
padding:10px 20px; /*上下间距10像素，左右间距20像素*/
line-height:160%; /*行高*/
}
#content label {
width:130px;
display:block; /*更改显示方式为块级。默认的内联显示方式是没有width的*/
float:left; /*设置为左浮动。不然<label>和<input>会各自独占据一行*/
text-align:right; /*让<label>右对齐*/
padding-right:10px; /*内部的右侧边距为10px*/
}
.input_text_font {
color:red;
padding:0 26px 0 160px; /*内间距。上为0，右为26px，下为0，左为160px*/
}
.input_text_max {
width:270px;
}
input[type="password"] { /*这里用到了属性选择器。input[type="password"]意思是对<input>类型为password进行操做*/
width:80px; /*设置密码输入框的长度为80px*/
}
input[type="text"]:focus, input[type="password"]:focus {
background:#DDE3F9; /*当文本框成为输入焦点时，背景色为浅蓝色*/
}
.but {
padding:20px;
}
#footer {
width:480px;
margin:0 auto;
text-align:center;
padding:3px 0; /*版权信息的上下内间距为3px，左右为0*/
}
</style>
<body>
<div id="header">
<a href="http://www.baidu.com">回到百度</a>
</div>
<div id="content">
<h1>Create An Account</h1>
<p>
免费注册
</p>
<!-- 设置<label>的for属性为指定<input>的id值，这样鼠标点击<label>时，对应的<input>会自动称为输入焦点 -->
<p>
<label for="username">用户名:</label>
<input type="text" id="username" />
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" />
</p>
<p>
<label for="password_ageain">再次输入密码:</label>
<input type="password" id="password_ageain" />
</p>
<p>
<label for="e-mail">E-mail:</label>
<input type="text" id="e-mail" />
</p>
<p>
密保问题提示你找回密码
</p>
<p>
<label for="select_question">选择问题:</label>
<select name="question" id="question">
<option value="">请选择</option>
<option value="父亲的名字" class="prepare_question">父亲的名字</option>
<option value="母亲的名字" class="prepare_question">母亲的名字</option>
</select>
</p>
<div class="input_text_font">
输入个问题你能够轻易答出来，可是其余人倒是很不容易回答
</div>
<p>
<label for="select_answer">选择答案:</label>
<input type="text" id="select_answer" class="input_text_max" />
</p>
<div class="but">
<input type="button" value="注册" name="button" />
</div>
</div>
<div id="footer">©Copyright 2017 hubery_zhu.</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表</title>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px; /*全局字体和字号*/
background:#12F2FF;
}
#header {
width:480px;
margin:0 auto; /*上下间距0，左右自动平衡。实际上就等因而左右自动居中*/
height:60px;
}
#header a {
padding-top:40px; /*距离顶部的内间距为40px*/
display:block; /*默认的内联显示方式是没有内间距的计算的。即若不设为块显示，则看不到效果*/
color:#000; /*字体为白色*/
text-decoration:none; /*去除下划线*/
}
#header a:hover {
color:#fc0;
}
#content {
width:480px;
margin:0 auto;
background:#fff;
}
#content h1 {
padding:20px; /*内间距*/
}
#content p {
padding:10px 20px; /*上下间距10像素，左右间距20像素*/
line-height:160%; /*行高*/
}
#content label {
width:130px;
display:block; /*更改显示方式为块级。默认的内联显示方式是没有width的*/
float:left; /*设置为左浮动。不然<label>和<input>会各自独占据一行*/
text-align:right; /*让<label>右对齐*/
padding-right:10px; /*内部的右侧边距为10px*/
}
.input_text_font {
color:red;
padding:0 26px 0 160px; /*内间距。上为0，右为26px，下为0，左为160px*/
}
.input_text_max {
width:270px;
}
input[type="password"] { /*这里用到了属性选择器。input[type="password"]意思是对<input>类型为password进行操做*/
width:80px; /*设置密码输入框的长度为80px*/
}
input[type="text"]:focus, input[type="password"]:focus {
background:#DDE3F9; /*当文本框成为输入焦点时，背景色为浅蓝色*/
}
.but {
padding:20px;
}
#footer {
width:480px;
margin:0 auto;
text-align:center;
padding:3px 0; /*版权信息的上下内间距为3px，左右为0*/
}
</style>
<body>
<div id="header">
<a href="http://www.baidu.com">回到百度</a>
</div>
<div id="content">
<h1>Create An Account</h1>
<p>
免费注册
</p>
<!-- 设置<label>的for属性为指定<input>的id值，这样鼠标点击<label>时，对应的<input>会自动称为输入焦点 -->
<p>
<label for="username">用户名:</label>
<input type="text" id="username" />
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" />
</p>
<p>
<label for="password_ageain">再次输入密码:</label>
<input type="password" id="password_ageain" />
</p>
<p>
<label for="e-mail">E-mail:</label>
<input type="text" id="e-mail" />
</p>
<p>
密保问题提示你找回密码
</p>
<p>
<label for="select_question">选择问题:</label>
<select name="question" id="question">
<option value="">请选择</option>
<option value="父亲的名字" class="prepare_question">父亲的名字</option>
<option value="母亲的名字" class="prepare_question">母亲的名字</option>
</select>
</p>
<div class="input_text_font">
输入个问题你能够轻易答出来，可是其余人倒是很不容易回答
</div>
<p>
<label for="select_answer">选择答案:</label>
<input type="text" id="select_answer" class="input_text_max" />
</p>
<div class="but">
<input type="button" value="注册" name="button" />
</div>
</div>
<div id="footer">©Copyright 2017 hubery_zhu.</div>
</body>
</html>css
程序运行结果：html
