利用DIV和CSS修飾簡易表單

來源:互聯網
上載者:User

<style type="text/css"><br />* {<br />margin:0;<br />padding:0;<br />}<br />body {<br />font-family:Verdana, Arial, Helvetica, sans-serif;<br />font-size:11px; /*全域字型和字型大小*/<br />background:#666;<br />}<br />#header {<br />width:480px;<br />margin:0 auto; /*上下間距0,左右自動平衡。實際上就等於是左右自動置中*/<br />height:60px;<br />}<br />#header a {<br />padding-top:40px; /*距離頂部的內間距為40px*/<br />display:block; /*預設的內聯顯示方式是沒有內間距的計算的。即若不設為塊顯示,則看不到效果*/<br />color:#fff; /*字型為白色*/<br />text-decoration:none; /*去除底線*/<br />}<br />#header a:hover {<br />color:#fc0;<br />}<br />#content {<br />width:480px;<br />margin:0 auto;<br />background:#fff;<br />}<br />#content h1 {<br />padding:20px; /*內間距*/<br />}<br />#content p {<br />padding:10px 20px; /*上下間距10像素,左右間距20像素*/<br />line-height:160%; /*行高*/<br />}<br />#content label {<br />width:130px;<br />display:block; /*更改顯示方式為塊級。預設的內聯顯示方式是沒有width的*/<br />float:left; /*設定為左浮動。否則<label>和<input>會各自獨佔據一行*/<br />text-align:right; /*讓<label>靠右對齊*/<br />padding-right:10px; /*內部的右側邊距為10px*/<br />}<br />.input_text_font {<br />color:red;<br />padding:0 26px 0 160px; /*內間距。上為0,右為26px,下為0,左為160px*/<br />}<br />.input_text_max {<br />width:270px;<br />}<br />input[type="password"] { /*這裡用到了屬性選取器。input[type="password"]意思是對<input>類型為password進行操作*/<br />width:80px; /*設定密碼輸入框的長度為80px*/<br />}<br />input[type="text"]:focus, input[type="password"]:focus {<br />background:#DDE3F9; /*當文字框成為輸入焦點時,背景色為淺藍色*/<br />}<br />.but {<br />padding:20px;<br />}<br />#footer {<br />width:480px;<br />margin:0 auto;<br />text-align:center;<br />padding:3px 0; /*著作權資訊的上下內間距為3px,左右為0*/<br />}<br /></style></p><p><body><br /><div id="header"><br /><a href="http://blog.csdn.net/jadyer">Back to my blog</a><br /></div><br /><div id="content"><br /><h1>Create An Account</h1></p><p><p><br />Registration is free, and it's supper quick! Complete the form to<br />create a new Jadyer account<br /></p></p><p><!-- 設定<label>的for屬性為指定<input>的id值,這樣滑鼠點擊<label>時,對應的<input>會自動稱為輸入焦點 --><br /><p><br /><label for="username">Username:</label><br /><input type="text" id="username" /><br /></p><br /><p><br /><label for="password">Password:</label><br /><input type="password" id="password" /><br /></p><br /><p><br /><label for="password_ageain">Password(again):</label><br /><input type="password" id="password_ageain" /><br /></p><br /><p><br /><label for="e-mail">E-mail:</label><br /><input type="text" id="e-mail" /><br /></p><br /><p><br />secret question and answer help you reset you password if you forget it.<br />Jadyer will ask you to answer you question before allowing you account password to be reset.<br />This is hightly recommended but optonal.<br /></p><br /><p><br /><label for="select_question">Select Question:</label><br /><input type="text" id="select_question" class="input_text_max" /><br /></p><br /><div class="input_text_font"><br />Enter a question you can answer easlly but others would find hard to guess.<br />Example:"What was the name of first pet?".<br /></div><br /><p><br /><label for="select_answer">Select Answer:</label><br /><input type="text" id="select_answer" class="input_text_max" /><br /></p></p><p><div class="but"><br /><input type="button" value="Sign In" name="submit" /><br /></div><br /></div><br /><div id="footer">&copy;Copyright 2010 BeiJing Jadyer.</div><br /></body>

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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