合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

表单的对齐排版(css)

日期:2013-12-13  来源:攀枝花惠康网络公司

对于表单,很常用。可是在web standard建站的时辰,他的排版往往让人遗忘,到了真正用到的时辰就发现让人头疼,当然我也碰着过。我此快要介绍一个用< fieldset >< label >标签建造标致而且具体亲和力的表单的体例。

交互设计,亲和力,用户体验,这些经常挂在设计师嘴边的名词却是是做什么的?我们不妨来考试考试一下!

1.表单内容设计合理性,这里介绍的是帐户上岸的交互界面,当然包容已注册和新用户两种人群,我们就设计出两个选择。

2.表单界面设计的亲和力,结构,颜色,字体,文字巨细,行高档要素。我使用了
字体: Arial, Helvetica, sans-serif
颜色:#666666 #1E7ACE #000000 淡兰色,灰色,黑色给用户稳重平安的感受

3.内容细节,好比记适用户信息,需要的提?#36873;?/p>

就这样换位思虑一下用户的需求,就能做到根基的亲和力,获得斗劲好的用户体验!要作到更完美的话,你就需要去看看MSN Google等国外年夜型交互网站是怎么做的了!

根基的xhtml

  1. <h3>已注册用户登录</h3><span id=”more-25″></span>
  2. <form action=”" method=”post” id=”Login”>
  3. <fieldset>
  4. <legend>用户登录</legend>
  5. <div>
  6. <label for=”Name”>用户名</label>
  7. <input type=”text” name=”Name” id=”Name” size=”18″ maxlength=”30″ /><br />
  8. </div>
  9. <div>
  10. <label for=”password”>密码</label>
  11. <input type=”password” name=”password” id=”password” size=”18″ maxlength=”15″ /><br />
  12. </div>
  13. <div class=”cookiechk”>
  14. <label><input type=”checkbox” name=”CookieYN” id=”CookieYN” value=http://www.css88.com/archives/”1″ /> <a href=”#” title=”选择是否记?#30340;?#30340;信息”>?#20146;?#25105;</a></label>
  15. <input name=”login791″ type=”submit” class=”buttom” value=http://www.css88.com/archives/”登录” />
  16. </div>
  17. <div class=”forgotpass”><a href=http://www.css88.com/archives/”#”>您健忘密码?<?</a></div>
  18. </fieldset>
  19. </form>

看了代码,发现标单描述文字都在< label >< /label >中,只要让< label >< /label >标签浮动左对齐,fieldset包含的< div >?#32454;?#28014;动,就可以实现我们常见的那类结构。


</head>

===========================表单的对齐排版==============================

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
background:#fff;
<style type=”text/css”>
<!–
body {

下面是根基的CSS:

  1. fieldset label {
  2. float:left;
  3. width:120px;
  4. text-align:right;
  5. padding:4px;
  6. margin:1px;
  7. }
  8. fieldset div {
  9. clear:left;
  10. margin-bottom:2px;
  11. }

font-family: Arial, Helvetica, sans-serif;
</div>
border:1px solid #A4CDF2;
padding:4px;
color:#666666;
background:#fff;
text-align:center;
}
<input type=”text” name=”Email” id=”Email” value=http://www.css88.com/archives/”" size=”20″ maxlength=”150″ /> *<br />
margin:2px;
<title>Form demo</title>
* {
margin:0;
padding:0;
}
color:#1E7ACE;
text-decoration:none;
*<br />
}
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;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
background:#D0F0FF;
}
width:450px;
border:1px solid #A4CDF2;
padding:20px;
text-align:left;
}
padding:10px;
<a href=http://www.css88.com/archives/”#” title=”您是否赞成处事条目”>先看看条目?</a> * </div>
margin-top:5px;
border:1px solid #A4CDF2;
background:#fff;
fieldset label {
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
<label for=”confirm_password”>一再密码</label>
}
float:left;
width:120px;
text-align:right;
}
fieldset div {
clear:left;
margin:1px;
margin-bottom:2px;
}
.enter{ text-align:center;}
<input type=”checkbox” name=”AgreeToTerms” id=”AgreeToTerms” value=http://www.css88.com/archives/”1″ />
.clear {
clear:both;
}
–>
</style>
<body>
<div id=”formwrapper”>
<h3>已注册用户登录</h3>
<form action=”" method=”;>用户名</label>
<input type=”text” name=”Name” id=”Name” size=”18″ maxlength=”30″ /><br />
</div>
<div>
<input type=”password” name=”password” id=”password” size=”18″ maxlength=”15″ /><br />
border:1px #1E7ACE solid;
</div>
</div>
<div class=”cookiechk”>
<label><input type=”checkbox” name=”CookieYN” id=”CookieYN” value=http://www.css88.com/archives/”1″ /> <a href=”#” title=”选择是否记?#30340;?#30340;信息”>?#20146;?#25105;</a></label>
<input name=”login” type=”submit” class=”buttom” value=http://www.css88.com/archives/”登录” />
<div class=”forgotpass”><a href=http://www.css88.com/archives/”#”>您健忘密码?<?</a></div>
</fieldset>
</form><br />
<h3>未注册建树帐户</h3>
margin:15px auto;
<form action=”" method=”post” id=”apForm”>
<fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被发布出去,可是必需填写.</strong> 在您注册之前请先当真阅读处事条目.</p>
<div>
<label for=”Name”>用户名</label>
<input type=”text” name=”cr_Name” id=”cr_Name” value=http://www.css88.com/archives/”" size=”20″ maxlength=”30″ />
*(最多30个字符)<br />
<label for=”Email”>电子邮箱</label>
</div>
<div>
<label for=”password”>密码</label>
<input type=”password” name=”cr_password” id=”cr_password” size=”18″ maxlength=”15″ />
a {
</div>
*(最多15个字符)<br />
</div>
<label for=”password”>密码</label>
<div>
<input type=”password” name=”confirm_password” id=”confirm_password” size=”18″ maxlength=”15″ />
<div>
<label for=”AgreeToTerms”>赞成处事条目</label>
#formwrapper {
<div class=”enter”>
<input name=”create791″ type=”submit” class=”buttom” value=http://www.css88.com/archives/”提交” />
<div>
fieldset {
}
<input name=”Submit” type=”reset” class=”buttom” value=http://www.css88.com/archives/”重置” />
</div>
font-size:12px;
<p><strong>* 在提交您的注册信息时, 我们认为您已经赞成了我们的处事条目.<br />
* 这些条目可能在未经您赞成的时辰进行改削.</strong></p>
</fieldset>
</form>
字体巨细:12px 14px
</div>
</body>
</html>

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

?#22836;认擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  ?#22836;Q:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 巴萨VS比利亚雷亚尔 皇马vs皇家贝蒂斯直播 圣埃蒂安俱乐部 红警2 柔佛dtvs庆南FC 阿赫利对阿尔萨德 大草原现金免费试玩 广东快乐10分走势技巧 杜塞尔多夫房车站 有啊彩票中奖助手