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

Editor to share with you how to make a login form css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

HTML structure:

Email:

Password:

CSS Code:

Body,ul {

Margin:0

Padding:0

}

A {

Color:rgb (1124185)

Text-decoration:none

}

Input:focus {

Outline:none0

}

Body {

Color:#b5b5b5

Font:14px'Arial'

}

Body

Li:first-child:after

Li:last-child:after {

Background-image:url (data:image/png;base64, … ); / *

}

.box {

Position:relative

Width:384px

Height:140px

Margin:50pxauto

}

.boxli {

List-style-type:none

Margin-bottom:10px

Border-radius:5px

Overflow:hidden

Position:relative

Height:42px

}

.boxliinput {

Box-shadow:inset005pxrgba (0rem 0.5),-1px1px0rgba (255pr. 255pr. 05)

Border:0none

Padding:8px5px5px

Border-radius:5px

Width:300px

Height:28px

-webkit-box-sizing:content-box

-moz-box-sizing:content-box

-o-box-sizing:content-box

-ms-box-sizing:content-box

Box-sizing:content-box

Background:rgba (0J. 0J. 1)

Color:#fff

}

. boxli:first-child:after

. boxli:last-child:after {

Position:absolute

Width:50px

Height:50px

Content: ""

Border-radius:25px

Z-index:2

Right:-23px

Box-shadow:008pxrgba (0pr 0pl 0.5)

}

::-webkit-input-placeholder {

Color:#fff

Font-weight:bold

}

. boxli:first-child:after {

Top:15px

}

. boxli:last-child:after {

Bottom:15px

}

.boxlabel {

Width:70px

Display:inline-block

Text-align:right

}

.boxspan {

Display:block

Color:#6296b4

Padding-left:75px

}

.button {

Position:absolute

Top:24px

Right:-30px

Width:44px

Height:44px

Border-radius:22px

Border:1pxsolid#00a1d2

Background:-webkit-linear-gradient (top,#029ecd,#0d7796)

Color:#fff

Text-shadow:1px1px0#666

Box-shadow:0005px#2c2c2c

Z-index:3

Text-align:center

Line-height:46px

-webkit-transition:all0.28sease-in

-moz--transition:all0.28sease-in

}

.button: hover {

-webkit-transform:rotate (90deg)

}

@ font-face {

Font-family:'FontAwesome'

Src:url ('font/fontawesome-webfont.eot')

Src:url ('font/fontawesome-webfont.eot?#iefix') format (' embedded-opentype')

Url ('font/fontawesome-webfont.woff') format (' woff')

Url ('font/fontawesome-webfont.ttf') format (' truetype')

Url ('font/fontawesome-webfont.svg#FontAwesome') format (' svg')

Font-weight:normal

Font-style:normal

}

.icon-arrow-right:before {

Font-family:FontAwesome

Font-weight:normal

Font-size:26px

Font-style:normal

Display:inline-block

Text-decoration:inherit

Content: "\ f061"

}

The above is all the content of the article "how to make a login form for css". 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.