<style type="text/css"> * { margin:0; padding:0; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; /*全局字体和字号*/ background:#666; } #header { width:480px; margin:0 auto; /*上下间距0，左右自动平衡。实际上就等于是左右自动居中*/ height:60px; } #header a { padding-top:40px; /*距离顶部的内间距为40px*/ display:block; /*默认的内联显示方式是没有内间距的计算的。即若不设为块显示，则看不到效果*/ color:#fff; /*字体为白色*/ text-decoration:none; /*去除下划线*/ } #header a:hover { color:#fc0; } #content { width:480px; margin:0 auto; background:#fff; } #content h1 { padding:20px; /*内间距*/ } #content p { padding:10px 20px; /*上下间距10像素，左右间距20像素*/ line-height:160%; /*行高*/ } #content label { width:130px; display:block; /*更改显示方式为块级。默认的内联显示方式是没有width的*/ float:left; /*设置为左浮动。否则<label>和<input>会各自独占据一行*/ text-align:right; /*让<label>右对齐*/ padding-right:10px; /*内部的右侧边距为10px*/ } .input_text_font { color:red; padding:0 26px 0 160px; /*内间距。上为0，右为26px，下为0，左为160px*/ } .input_text_max { width:270px; } input[type="password"] { /*这里用到了属性选择器。input[type="password"]意思是对<input>类型为password进行操作*/ width:80px; /*设置密码输入框的长度为80px*/ } input[type="text"]:focus, input[type="password"]:focus { background:#DDE3F9; /*当文本框成为输入焦点时，背景色为浅蓝色*/ } .but { padding:20px; } #footer { width:480px; margin:0 auto; text-align:center; padding:3px 0; /*版权信息的上下内间距为3px，左右为0*/ } </style> <body> <div id="header"> <a href="http://blog.csdn.net/jadyer">Back to my blog</a> </div> <div id="content"> <h1>Create An Account</h1> <p> Registration is free, and it's supper quick! Complete the form to create a new Jadyer account </p> <!-- 设置<label>的for属性为指定<input>的id值，这样鼠标点击<label>时，对应的<input>会自动称为输入焦点 --> <p> <label for="username">Username:</label> <input type="text" id="username" /> </p> <p> <label for="password">Password:</label> <input type="password" id="password" /> </p> <p> <label for="password_ageain">Password(again):</label> <input type="password" id="password_ageain" /> </p> <p> <label for="e-mail">E-mail:</label> <input type="text" id="e-mail" /> </p> <p> secret question and answer help you reset you password if you forget it. Jadyer will ask you to answer you question before allowing you account password to be reset. This is hightly recommended but optonal. </p> <p> <label for="select_question">Select Question:</label> <input type="text" id="select_question" class="input_text_max" /> </p> <div class="input_text_font"> Enter a question you can answer easlly but others would find hard to guess. Example:"What was the name of first pet?". </div> <p> <label for="select_answer">Select Answer:</label> <input type="text" id="select_answer" class="input_text_max" /> </p> <div class="but"> <input type="button" value="Sign In" name="submit" /> </div> </div> <div id="footer">©Copyright 2010 BeiJing Jadyer.</div> </body>
871
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
