Comments: The registry list is implemented using the html5 + css3 layout. The effect is quite good. For more information about the front-end web designers, see the following:
Html source code:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link rel = "stylesheet" href = "css/style.css"/>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
</Head>
<Body>
<Div id = wrapper>
<Div id = lbl> </div>
<Form>
<Fieldset id = account>
<Legend> Personal Information </legend>
<Label for = username> account: </label>
<Input id = username class = textbox type = text name = username required placeholder = "Enter the Account"/>
<Label for = password1> password: </label>
<Input id = password1 class = textbox type = password name = password1 required placeholder = "enter the password"/>
<Label for = password2> duplicate password: </label>
<Input id = password2 class = textbox type = password name = password2 required placeholder = "repeat the password"/>
<Label for = email> email address: </label>
<Input id = email class = textbox type = email name = email required placeholder = "www.csdn.com"/>
</Fieldset>
<Fieldset id = personal>
<Legend> Other Information </legend>
<Label for = website> personal website: </label>
<Input id = website class = textbox type = url name = website required placeholder = "http://www.example.com"/>
<Label for = age> age: </label>
<Input id = age class = textbox type = number name = age min = 18 step = 2 pattern = "[0-9] {1, 3}" placeholder = "fill in age">
<Label for = salary> monthly salary: </label>
<Input id = salary class = textbox type = range name = salary min = 0 max = 50000 step = 500 pattern = "[0-9] {2 ,} "placeholder =" monthly salary "value = 10000 onchange =" showValue (this. value) "/>
& Lt; span id = rangevalue & gt; 10000 &
<Script>
Function showValue (value ){
Document. getElementById ("rangevalue"). innerHTML = value;
}
</Script>
<Label for = description> description: </label>
<Textarea id = description name = description cols = 30 rows = 5 placeholder = "here is the detailed description"> </textarea>
</Fieldset>
<Fieldset id = confirm>
<Input type = submit value = "submit"/>
<Div class = "clearfix"> </div>
</Fieldset>
</Form>
</Div>
</Body>
</Html>
Css source code:
The Code is as follows:
Body {
Background: url(bg.jpg) repeat;
Font-family: Arial Narrow, Arial, sans-serif;
Margin: 0;
Padding: 0;
}
Header, section, footer {
Display: block;
}
Header {
Width: 100%;
Background-color: rgb (0, 0, 0 );
Background-color: rgba (0, 0, 0, 0.9 );
Color: # ccc;
Padding: 15px 0;
Letter-spacing: 1px;
Margin-bottom: 20px;
Position: relative;
}
Header h1 {
Margin: 0 50px;
Text-shadow: 2px 2px 2px #888;
Float: left;
}
# Backlinks {
Float: right;
Margin:-10px 20px;
Line-height: 25px;
Font-weight: bold;
Font-size: 12px;
Text-align: right;
}
# Backlinks {
Color: # ccc;
Text-decoration: none;
Margin: 3px 0 0;
Display: block;
}
# Backlinks a: hover {
Color: # fff;
}
Footer {
Background-color: rgb (0, 0, 0 );
Background-color: rgba (0, 0, 0, 0.8 );
Height: 25px;
Width: 100%;
Line-height: 25px;
Position: relative;
Font-family: Arial, Helvetica, sans-serif;
Bottom: 0;
Left: 0;
Color: #888;
Font-size: 11px;
}
Footer span {
Padding-left: 20px;
}
Footer {
Color: #1FA2E1;
}
# Wrapper {
Width: 770px;
Margin: 0 auto;
Text-align: center;
}
# Wrapper hgroup {
Margin: 20px 0;
Text-shadow: 1px 1px 1px # ccc;
}
# Wrapper h1 {
Color: #146FA0;
Font-size: 42px;
Margin: 0;
}
# Wrapper h2 {
Color: # 71C1ED;
Font-size: 27px;
Margin: 0;
}
# Lbl {
Color: #777;
Font-size: 17px;
Font-weight: bold;
Text-shadow: 1px 1px 0 # fff;
Margin: 10px 0;
}
*: Focus {
Outline: none;
}
Label, input, textarea, fieldset {
Display: block;
}
Fieldset # account, fieldset # personal {
Width: 250px;
Padding: 0 50px 50px;
Margin: 10px;
Float: left;
Background: rgb (244,244,244 );
Background: rgba (244,244,244, 0.7 );
-Webkit-border-radius: 25px;
-Moz-border-radius: 25px;
Border-radius: 25px;
Border: 3px double #999;
}
Fieldset # confirm {
Padding-top: 10px;
Clear: both;
Border: none;
Line-height: 15px;
Margin: 10px 0;
}
Fieldset # confirm label, fieldset # confirm input {
Display: inline;
Float: left;
Margin: 15px 5px 0;
}
Legend {
Font-size: 20px;
Font-weight: bold;
Letter-spacing: 5px;
Color: #999;
Margin-left:-20px;
Text-align: left;
Padding: 0 10px;
Text-shadow: 1px 1px 0 # ccc;
}
Label {
Font-size: 17px;
Font-weight: bold;
Margin: 17px 0 7px;
Text-align: left;
Text-shadow: 1px 1px 0 # fff;
}
Textarea {
Resize: both;
Max-width: 230px;
}
Input. textbox, textarea {
Padding: 5px 10px;
-Webkit-border-radius: 15px;
-Moz-border-radius: 15px;
Border-radius: 15px;
Border: 1px solid # fff;
Width: 200px;
Text-shadow: 1px 1px 1px #777;
-Moz-box-shadow: 0px 2px 0px #999;
-Webkit-box-shadow: 0px 2px 0px #999;
Box-shadow: 0px 2px 0px #999;
-Webkit-transition: all 0.5 s bytes-in-out;
-Moz-transition: all 0.5 s bytes-in-out;
Transition: all 0.5 s bytes-in-out;
Background: url(required.png) no-repeat 200px 5px # F0F0EF;
Background:-webkit-gradient (linear, left top, left bottom, from (# E3E3E3), to (# FFFFFF);/* Saf4 +, Chrome */
Background:-webkit-linear-gradient (top, # E3E3E3, # FFFFFF);/* Chrome 10 +, Saf5.1 + */
Background:-moz-linear-gradient (top, # E3E3E3, # FFFFFF);/* FF3.6 + */
Background:-ms-linear-gradient (top, # E3E3E3, # FFFFFF);/* IE10 */
Background:-o-linear-gradient (top, # E3E3E3, # FFFFFF);/* Opera 11.10 + */
}
Input. textbox: focus, textarea: focus {
-Webkit-transform: scale (1.1 );
-Moz-transform: Scaling (1.1 );
Transform: scale (1, 1.1 );
-Moz-box-shadow: 5px 3px 1px # ccc;
-Webkit-box-shadow: 5px 3px 1px # ccc;
Box-shadow: 7px 7px 2px # ccc;
Text-shadow: 1px 1px 3px #777;
}
Input. textbox: required {
Background: url(required.png) no-repeat 200px 5px # F0F0EF;
Background: url(required.png) no-repeat 200px 5px,-webkit-gradient (linear, left top, left bottom, from (# E3E3E3), to (# FFFFFF )); /* Saf4 +, Chrome */
Background: url(required.png) no-repeat 200px 5px,-webkit-linear-gradient (top, # E3E3E3, # FFFFFF);/* Chrome 10 +, Saf5.1 + */
Background: url(required.png) no-repeat 200px 5px,-moz-linear-gradient (top, # E3E3E3, # FFFFFF);/* FF3.6 + */
Background: url(required.png) no-repeat 200px 5px,-ms-linear-gradient (top, # E3E3E3, # FFFFFF);/* IE10 */
Background: url(required.png) no-repeat 200px 5px,-o-linear-gradient (top, # E3E3E3, # FFFFFF);/* Opera 11.10 + */
}
Input. textbox: required: valid {
Background: url(valid.png) no-repeat 200px 5px # F0F0EF;
Background: url(valid.png) no-repeat 200px 5px,-webkit-gradient (linear, left top, left bottom, from (# E3E3E3), to (# FFFFFF )); /* Saf4 +, Chrome */
Background: url(valid.png) no-repeat 200px 5px,-webkit-linear-gradient (top, # E3E3E3, # FFFFFF);/* Chrome 10 +, Saf5.1 + */
Background: url(valid.png) no-repeat 200px 5px,-moz-linear-gradient (top, # E3E3E3, # FFFFFF);/* FF3.6 + */
Background: url(valid.png) no-repeat 200px 5px,-ms-linear-gradient (top, # E3E3E3, # FFFFFF);/* IE10 */
Background: url(valid.png) no-repeat 200px 5px,-o-linear-gradient (top, # E3E3E3, # FFFFFF);/* Opera 11.10 + */
}
Input. textbox: focus: invalid, input. textbox: not (: required): invalid {
Background: url(invalid.png) no-repeat 200px 5px # F0F0EF;
Background: url(invalid.png) no-repeat 200px 5px,-webkit-gradient (linear, left top, left bottom, from (# E3E3E3), to (# FFFFFF )); /* Saf4 +, Chrome */
Background: url(invalid.png) no-repeat 200px 5px,-webkit-linear-gradient (top, # E3E3E3, # FFFFFF);/* Chrome 10 +, Saf5.1 + */
Background: url(invalid.png) no-repeat 200px 5px,-moz-linear-gradient (top, # E3E3E3, # FFFFFF);/* FF3.6 + */
Background: url(invalid.png) no-repeat 200px 5px,-ms-linear-gradient (top, # E3E3E3, # FFFFFF);/* IE10 */
Background: url(invalid.png) no-repeat 200px 5px,-o-linear-gradient (top, # E3E3E3, # FFFFFF);/* Opera 11.10 + */
}
Input [type = submit] {
Padding: 10px;
Margin: 0 10px! Important;
Width: 300px;
}
@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){
Input [type = range] {padding: 0 ;}
}
# Rangevalue {
Display: block;
Text-align: right;
Margin-top:-25px;
}
Input:-webkit-input-placeholder, textarea:-webkit-input-placeholder {
Color: # aaa;
Font-style: italic;
Text-shadow: 1px 1px 0 # fff;
}
Input:-moz-placeholder, textarea:-moz-placeholder {
Color: # aaa;
Font-style: italic;
Text-shadow: 1px 1px 0 # fff;
}
. Clearfix {
Clear: both;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
