網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

表單的對齊排版(css)

日期:2013-12-13  來源:攀枝花惠康網絡公司

對于表單,很常用??墒窃趙eb standard建站的時辰,他的排版往往讓人遺忘,到了真正用到的時辰就發現讓人頭疼,當然我也碰著過。我此快要介紹一個用< fieldset >< label >標簽建造標致而且具體親和力的表單的體例。

交互設計,親和力,用戶體驗,這些經常掛在設計師嘴邊的名詞卻是是做什么的?我們不妨來考試考試一下!

1.表單內容設計合理性,這里介紹的是帳戶上岸的交互界面,當然包容已注冊和新用戶兩種人群,我們就設計出兩個選擇。

2.表單界面設計的親和力,結構,顏色,字體,文字巨細,行高檔要素。我使用了
字體: Arial, Helvetica, sans-serif
顏色:#666666 #1E7ACE #000000 淡蘭色,灰色,黑色給用戶穩重平安的感受

3.內容細節,好比記適用戶信息,需要的提醒。

就這樣換位思慮一下用戶的需求,就能做到根基的親和力,獲得斗勁好的用戶體驗!要作到更完美的話,你就需要去看看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=”選擇是否記實您的信息”>記住我</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 >斷根浮動,就可以實現我們常見的那類結構。


</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=”選擇是否記實您的信息”>記住我</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>

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图