首頁 > 開發者 > CSS

CSS執行個體教程:製作漂亮的網頁表單

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

初中級練習，高手朋友們可以飄過。要求達到如下圖所示的效果，各位不妨試一試~

 

代碼如下：

<!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" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Form demo</title>

<style type="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:1px 10px;

font-size:12px;

border:1px #1E7ACE solid;

background:#D0F0FF;

}

#formwrapper {

width:450px;

margin:15px auto;

padding:20px;

text-align:left;

border:1px solid #A4CDF2;

}

fieldset {

padding:10px;

margin-top:5px;

border:1px solid #A4CDF2;

background:#fff;

}

fieldset legend {

color:#1E7ACE;

font-weight:bold;

padding:3px 20px 3px 20px;

border:1px solid #A4CDF2;

background:#fff;

}

fieldset label {

float:left;

width:120px;

text-align:right;

padding:4px;

margin:1px;

}

fieldset div {

clear:left;

margin-bottom:2px;

}

.enter{ text-align:center;}

.clear {

clear:both;

}

-->

</style>

</head>

<body>

<div id="formwrapper">

  <h3>登入使用者登入</h3>

  <form action="" method="post" name="apLogin" id="apLogin">

    <fieldset>

    <legend>使用者登入</legend>

    <div>

      <label for="Name">使用者名稱</label>

      <input type="text" name="Name" id="Name" size="18" maxlength="30" />

      <br/>

    </div>

    <div>

      <label for="password">密碼</label>

      <input type="password" name="password" id="password" size="18" maxlength="30" />

      <br/>

    </div>

    <div class="cookiechk">

      <label>

      <input type="checkbox" name="CookieYN" id="CookieYN" value="1" />

      <a href="#" title="選擇是否記錄您的資訊">記住我</a></label>

      <input name="login791" type="submit" class="buttom" value="登入" />

    </div>

    <div class="forgotpass"><a href="#">您忘記密碼?</a></div>

    </fieldset>

  </form>

  <br/>

  <h3>未註冊建立帳戶</h3>

  <form action="" method="post" name="apForm" id="apForm">

    <fieldset>

    <legend>使用者註冊</legend>

    <p><strong>您的電子郵箱不會被公布出去,但是必須填寫.</strong> 在您註冊之前請先認真閱讀服務條款.</p>

    <div>

      <label for="Name">使用者名稱</label>

      <input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />

      *(最多30個字元)<br/>

    </div>

    <div>

      <label for="Email">電子郵箱</label>

      <input type="text" name="Email" id="Email" value="" size="20" maxlength="150" />

      *<br/>

    </div>

    <div>

      <label for="password">密碼</label>

      <input type="password" name="password" id="password" size="18" maxlength="15" />

      *(最多15個字元)<br/>

    </div>

    <div>

      <label for="confirm_password">重複密碼</label>

      <input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />

      *<br/>

    </div>

    <div>

      <label for="AgreeToTerms">同意服務條款</label>

      <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />

      <a href="#" title="您是否同意服務條款">先看看條款？</a> * </div>

    <div class="enter">

      <input name="create791" type="submit" class="buttom" value="提交" />

      <input name="Submit" type="reset" class="buttom" value="重設" />

    </div>

    <p><strong>* 在提交您的註冊資訊時, 我們認為您已經同意了我們的服務條款.<br/>

      * 這些條款可能在未經您同意的時候進行修改.</strong></p>

    </fieldset>

  </form>

</div>

</body>

</html>



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More