<!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>
<style type="text/css">
body {
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
/*清除常用元素的边界丶补白丶边框默认样式*/
p,h1,form,button {
border: 0;
margin: 0;
padding: 0;
}
/*定义一个强制换行显示类*/
.spacer {
clear: both;
height: 1px;
}
/*定义表单外框样式*/
.myform {
margin: 0 auto;
width: 400px;
padding: 14px;
}
/*定制当前表单样式*/
#stylized {
border: solid 2px #b7ddf2;
background: #ebf4fb;
}
#stylized h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
#stylized p {
font-size: 11px;
color: #666666;
margin-bottom: 20px;
border-bottom: solid 1px #b7ddf2;
padding-bottom: 10px;
}
#stylized label {/*定义表单标签样式*/
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
}
#stylized .small {/*定义小字体样式类*/
color: #666666;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 140px;
}
#stylized input {/*统一输入文本框样式*/
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 200px;
margin: 2px 0 20px 10px;
}
#stylized button {/*定义图形化按钮样式*/
clear:both;
margin-left: 150px;
width: 125px;
height: 31px;
background: #666666 url(../images/play-button.jpg) no-repeat;
text-align: center;
line-height: 31px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
/*设计表单内文本框和按钮在被激活和获取焦点状态下时,外轮廓线的宽丶样式和颜色*/
input:focus,button:focus { outline:thick solid #b7ddf2; }
input:active,button:active { outline:thick solid #aaa; }
/*通过outlineoffset属性放大外轮廓线*/
input:active,button:active { outline-offset: 4px; }
input:focus,button:focus { outline-offset:4px; }
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form1" name="form1" method="post" action="">
<h1>登录</h1>
<p>请准确填写个人信息!</p>
<label>Name<span class="small">姓名</span></label>
<input type="text" name="textfield" id="textfield"/>
<label>Email<span class="small">电子邮箱</span></label>
<input type="text" name="textfield" id="textfield"/>
<label>Password<span class="small">密码</span></label>
<input type="text" name="textfield" id="textfield"/>
<button type="submit">登录</button>
<div class="spacer"></div>
</form>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>明镜止水</title>
<style type="text/css">
body {
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
/*清除常用元素的边界丶补白丶边框默认样式*/
p,h1,form,button {
border: 0;
margin: 0;
padding: 0;
}
/*定义一个强制换行显示类*/
.spacer {
clear: both;
height: 1px;
}
/*定义表单外框样式*/
.myform {
margin: 0 auto;
width: 400px;
padding: 14px;
}
/*定制当前表单样式*/
#stylized {
border: solid 2px #b7ddf2;
background: #ebf4fb;
}
#stylized h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
#stylized p {
font-size: 11px;
color: #666666;
margin-bottom: 20px;
border-bottom: solid 1px #b7ddf2;
padding-bottom: 10px;
}
#stylized label {/*定义表单标签样式*/
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
}
#stylized .small {/*定义小字体样式类*/
color: #666666;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 140px;
}
#stylized input {/*统一输入文本框样式*/
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 200px;
margin: 2px 0 20px 10px;
}
#stylized button {/*定义图形化按钮样式*/
clear:both;
margin-left: 150px;
width: 125px;
height: 31px;
background: #666666 url(../images/play-button.jpg) no-repeat;
text-align: center;
line-height: 31px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
/*设计表单内文本框和按钮在被激活和获取焦点状态下时,外轮廓线的宽丶样式和颜色*/
input:focus,button:focus { outline:thick solid #b7ddf2; }
input:active,button:active { outline:thick solid #aaa; }
/*通过outlineoffset属性放大外轮廓线*/
input:active,button:active { outline-offset: 4px; }
input:focus,button:focus { outline-offset:4px; }
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form1" name="form1" method="post" action="">
<h1>登录</h1>
<p>请准确填写个人信息!</p>
<label>Name<span class="small">姓名</span></label>
<input type="text" name="textfield" id="textfield"/>
<label>Email<span class="small">电子邮箱</span></label>
<input type="text" name="textfield" id="textfield"/>
<label>Password<span class="small">密码</span></label>
<input type="text" name="textfield" id="textfield"/>
<button type="submit">登录</button>
<div class="spacer"></div>
</form>
</div>
</body>
</html>
3010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
