Use Div and CSS to modify simple forms

<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; /* Global font and font size */<br/> Background: #666; <br/>}< br/> # header {<br/> width: 480px; <br/> margin: 0 auto;/* the spacing between top and bottom is 0, and the left and right sides are automatically balanced. In fact, it is equal to Automatic Center of left and right */<br/> Height: 60px; <br/>}< br/> # header A {<br/> padding-top: 40px; /* the inner spacing from the top is 40px */<br/> display: block;/* the default inline display mode is that no inner spacing is calculated. That is, if it is not set to block display, the effect is not displayed */<br/> color: # FFF;/* The font is white */<br/> text-Decoration: none; /* remove the underline */<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; /* inner spacing */<br/>}< br/> # Content P {<br/> padding: 10px 20px;/* Top/bottom Spacing: 10 pixels, spacing between left and right: 20 pixels */<br/> line-Height: 160%;/* Row Height */<br/>}< br/> # content label {<br/> W Idth: 130px; <br/> display: block;/* change the display mode to block level. The default inline display mode is */without width <br/> float: Left;/* is set to left floating. Otherwise, the <label> and <input> have an exclusive data row */<br/> text-align: right; /* align <label> right */<br/> padding-Right: 10px;/* The right margin inside is 10px */<br/>}< br/>. input_text_font {<br/> color: red; <br/> padding: 0 26px 0 160px;/* spacing. Is 0, right is 26px, bottom is 0, left is 160px */<br/>}< br/>. input_text_max {<br/> width: 270px; <br/>}< br/> input [type = "password"] {/* the attribute selector is used here. Input [type = "password"] means to operate on <input> type = PASSWORD */<br/> width: 80px; /* set the length of the password input box to 80px */<br/>}< br/> input [type = "text"]: focus, input [type = "password"]: focus {<br/> Background: # dde3f9;/* When the text box becomes the input focus, the background color is light blue */<br/>}< br/>. but {<br/> padding: 20px; <br/>}< br/> # footer {<br/> width: 480px; <br/> margin: 0 auto; <br/> text-align: center; <br/> padding: 3px 0;/* the spacing between the top and bottom of the copyright information is 3px, 0 */<br/>}< br/> </style> </P> <p> <B Ody> <br/> <Div id = "Header"> <br/> <a href = "http://blog.csdn.net/jadyer"> back to my blog </a> <br/> </ div> <br/> <Div id = "content"> <br/> <p> create an account </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> <! -- Set the for Attribute of <label> to the ID value of the specified <input>, so that when you click <label>, the corresponding <input> is automatically called the input focus --> <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"> Se Lect 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 wocould 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> <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>