|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。
破洛洛文章简介:用CSS制造一个大度的表单。
初中级实习,妙手伴侣们能够飘过。请求到达以下图所示的效果,列位无妨试一试~
代码以下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Formdemo</title>
<styletype="text/css">
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;
}
*{
margin:0;
padding:0;
}
a{
color:#1E7ACE;
text-decoration:none;
}
a:hover{
color:#000;
text-decoration:underline;
}
h3{
font-size:14px;
font-weight:bold;
}
pre,p{
color:#1E7ACE;
margin:4px;
}
input,select,textarea{
padding:1px;
margin:2px;
font-size:11px;
}
.buttom{
padding:1px10px;
font-size:12px;
border:1px#1E7ACEsolid;
background:#D0F0FF;
}
#formwrapper{
width:450px;
margin:15pxauto;
padding:20px;
text-align:left;
border:1pxsolid#A4CDF2;
}
fieldset{
padding:10px;
margin-top:5px;
border:1pxsolid#A4CDF2;
background:#fff;
}
fieldsetlegend{
color:#1E7ACE;
font-weight:bold;
padding:3px20px3px20px;
border:1pxsolid#A4CDF2;
background:#fff;
}
fieldsetlabel{
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldsetdiv{
clear:left;
margin-bottom:2px;
}
.enter{text-align:center;}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<divid="formwrapper">
<h3>已注册用户登录</h3>
<formaction=""method="post"name="apLogin"id="apLogin">
<fieldset>
<legend>用户登录</legend>
<div>
<labelfor="Name">用户名</label>
<inputtype="text"name="Name"id="Name"size="18"maxlength="30"/>
<br/>
</div>
<div>
<labelfor="password">暗码</label>
<inputtype="password"name="password"id="password"size="18"maxlength="30"/>
<br/>
</div>
<divclass="cookiechk">
<label>
<inputtype="checkbox"name="CookieYN"id="CookieYN"value="1"/>
<ahref="#"title="选择是不是纪录您的信息">记着我</a></label>
<inputname="login791"type="submit"class="buttom"value="登录"/>
</div>
<divclass="forgotpass"><ahref="#">您健忘暗码?</a></div>
</fieldset>
</form>
<br/>
<h3>未注册创立帐户</h3>
<formaction=""method="post"name="apForm"id="apForm">
<fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被发布进来,可是必需填写.</strong>在您注册之前请先仔细浏览服务条目.</p>
<div>
<labelfor="Name">用户名</label>
<inputtype="text"name="Name"id="Name"value=""size="20"maxlength="30"/>
*(最多30个字符)<br/>
</div>
<div>
<labelfor="Email">电子邮箱</label>
<inputtype="text"name="Email"id="Email"value=""size="20"maxlength="150"/>
*<br/>
</div>
<div>
<labelfor="password">暗码</label>
<inputtype="password"name="password"id="password"size="18"maxlength="15"/>
*(最多15个字符)<br/>
</div>
<div>
<labelfor="confirm_password">反复暗码</label>
<inputtype="password"name="confirm_password"id="confirm_password"size="18"maxlength="15"/>
*<br/>
</div>
<div>
<labelfor="AgreeToTerms">批准服务条目</label>
<inputtype="checkbox"name="AgreeToTerms"id="AgreeToTerms"value="1"/>
<ahref="#"title="您是不是批准服务条目">先看看条目?</a>*</div>
<divclass="enter">
<inputname="create791"type="submit"class="buttom"value="提交"/>
<inputname="Submit"type="reset"class="buttom"value="重置"/>
</div>
<p><strong>*在提交您的注册信息时,我们以为您已批准了我们的服务条目.<br/>
*这些条目大概在未经您批准的时分举行修正.</strong></p>
</fieldset>
</form>
</div>
</body>
</html>
</p>
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。 |
|