Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use html5+css3 to achieve a registration form", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use html5+css3 to achieve a registration form" this article.

Copy the code

Personal information

Screenshot:

Password:

Repeat password:

Email address:

Additional information

Personal website:

Age:

Monthly salary:

10000

Function showValue (value) {

Document.getElementById ("rangevalue"). InnerHTML = value

}

Description:

Css source code:

Copy the code

The code is as follows:

Body {

Background:url (bg.jpg) repeat

Font family: Arial Narrow,Arial, sans serif

Deposit: 0

Fill: 0

}

Header, section, footer {

Display:block

}

Header {

Width:100%

Background-color:rgb (0d0j0pl 0)

Background-color:rgba (0B0B0D0B0B0B0LY 0.9)

Color: # ccc

Padding:15px 0

Letter spacing: 1px

Bottom margin: 20px

Position: relative

}

Header H2 {

Margin:0 50px

Text shadows: 2px 2px 2px#888

Float to the left

}

# backlinks {

Float:right

Margin:-10px 20px

Line-height:25px

Font-weight:bold

Font-size:12px

Text-align:right

}

# backlinks a {

Color:#ccc

Text modification: none

Margin: 3px 0 0

Displaying: block

}

# backlinks a:hover {

Color:#fff

}

Footer {

Background-color:rgb (0d0j0pl 0)

Background-color:rgba (0. 0. 8)

Height: 25 pixels

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 a {

Color:#1FA2E1

}

# wrapper {

Width:770px

Margin:0 automatic

Text-align:center

}

# wrapper hgroup {

Margin:20px 0

Text Shadow: 1px 1px 1px # ccc

}

# wrapper h2 {

Color:#146FA0

Font-size:42px

Deposit: 0

}

# wrapper h3 {

Color:#71C1ED

Font-size:27px

Deposit: 0

}

# lbl {

Color:#777

Font-size:17px

Font-weight:bold

Text shadow: 1px 1px 0 # fff

Margin: 10px 0

}

*: focus {

Outline:none

}

Label, input, text area, field set {

Display:block

}

Fieldset#account,fieldset#personal {

Width:250px

Fill: 0 50px 50px

Margins: 10px

Float to the left

Background: rgb (244244244)

Background: rgba (244pm 244pm 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 tag, fieldset#confirm input {

Display:inline

Float to the left

Margin: 15px 5px 0

}

Legend {

Font-size:20px

Font-weight:bold

Letter spacing: 5px

Color: # 999

Left margin:-20px

Text-align:left

Fill: 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: 200 pixels

Text shadows: 1px 1px 1px#777

-moz-box-shadow:0px 2px 0px#999

-webkit-box-shadow:0px 2px 0px#999

Frame shadows: 0px 2px 0px#999

-webkit-transition: all 0.5s ease in

-moz conversion: all 0.5s ease in

Transition: all 0.5s ease in and out

Background:url (required.png) does not repeat 200px 5px#F0F0EF

Background:-webkit-gradient (linear, top left, bottom left, 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:scale (1.1)

Conversion: scale (1.1)

-moz-box-shadow:5 pixel 3 pixel 1 pixel # ccc

-webkit-box-shadow:5px 3px 1px # ccc

Frame shadow: 7px 7px 2px # ccc

Text shadows: 1px 1px 3px#777

}

Input.textbox:required {

Background:url (required.png) does not repeat 200px 5px#F0F0EF

Background:url (required.png) does not repeat 200px 5pxmam talk webkitripple (linear,left top,left bottom,from (# E3E3E3), to (# FFFFFF)); / * Saf4 +, Chrome * /

Background:url (required.png) does not repeat 200px 5pxMAH top,#E3E3E3,#FFFFFF; / * Chrome 10 +, Saf5.1 + * /

Background:url (required.png) does not repeat 200px 5pxMAH Moz Murray (top,#E3E3E3,#FFFFFF); / * FF3.6 + * /

Background: url (required.png) does not repeat 200px 5px, top,#E3E3E3,#FFFFFF (top,#E3E3E3,#FFFFFF); / * IE10 * /

Background:url (required.png) does not repeat 200px 5pxmam top,#E3E3E3,#FFFFFF; / * Opera 11.10 + * /

}

Input.textbox:required:valid {

Background:url (valid.png) does not repeat 200px 5px#F0F0EF

Background:url (valid.png) does not repeat 200px 5pxmam talk webkit talk (linear, top left, bottom left, from (# E3E3E3) to (# FFFFFF)); / * Saf4 +, Chrome * /

Background:url (valid.png) does not repeat 200px 5pxMAH top,#E3E3E3,#FFFFFF; / * Chrome 10 +, Saf5.1 + * /

Background:url (valid.png) does not repeat 200px 5pxMAH Moz Murray (top,#E3E3E3,#FFFFFF); / * FF3.6 + * /

Background:url (valid.png) does not repeat 200px 5pxmam top,#E3E3E3,#FFFFFF; / * IE10 * /

Background:url (valid.png) does not repeat 200px 5pxmam top,#E3E3E3,#FFFFFF; / * Opera 11.10 + * /

}

Input.textbox:focus:invalid,input.textbox:not (: required): invalid {

Background:url (invalid.png) does not repeat 200px 5px#F0F0EF

Background: url (invalid.png) does not repeat 200px 5pxMAH webkit talk (linear, top left, bottom left, from (# E3E3E3) to (# FFFFFF)); / * Saf4 +, Chrome * /

Background:url (invalid.png) does not repeat 200px 5pxMAH top,#E3E3E3,#FFFFFF; / * Chrome 10 +, Saf5.1 + * /

Background:url (invalid.png) does not repeat 200px 5pxMAH Moz Murray (top,#E3E3E3,#FFFFFF); / * FF3.6 + * /

Background:url (invalid.png) does not repeat 200px 5pxmam top,#E3E3E3,#FFFFFF; / * IE10 * /

Background:url (invalid.png) does not repeat 200px 5pxmam 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 styles: italic

Text shadow: 1px 1px 0 # fff

}

Enter:-moz-placeholder, text area:-moz-placeholder {

Color:#aaa

Font styles: italic

Text shadow: 1px 1px 0 # fff

}

.clearfix {

Clear:both

}

The above is all the contents of the article "how to use html5+css3 to implement a registration form". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.