Home > Developer > Web Develop
You have to write your own to have a harvest, rather imitation and not all copy and paste
Do not say, directly on the code. CSS has comments that are suitable for beginners.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Login</title><Linkrel= "stylesheet"href= "3.css" /></Head><Body> <formMethod= "POST"class= "Login"> <H1class= "Login-title">Winner</H1><BR/> <inputtype= "Email"name= "Email"class= "Login-input"placeholder= "Please enter the mailbox"Autofocus/> <!--text box information and automatically get focus when loading pages - <inputtype= "Password"name= "Password"class= "Login-input"placeholder= "Please enter password" /> <inputtype= "Submit"value= "Login"class= "Login-submit" /> <inputtype= "checkbox"class= "Remember-me"name= "Remember-me" />Remember password<BR/><BR/> <Pclass= "Login-help"><ahref= "javascript:void (0);">Forgot password</a> </P> </form></Body></HTML>
The code for the HTML interface is only responsible for encapsulating the data. The interface effect of the unlinked CSS is as follows:
CSS part of their own Baidu attributes are added to the comments, suitable for beginners.
@charset "Utf-8";/*CSS Document*/html, body, Div, span, applet, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,A, ABBR, acronym, address, BI G, cite, Code,del, DFN, EM, img, INS, KBD, Q, S, Samp,small, Strike, strong, sub, SUP, TT, VAR,B, u, I, CENTER,DL, DT, DD, OL, UL, Li,fieldset, form, label, Legend,table, Caption, Tbody, TFOOT, THEAD, tr, TH, td,article, aside, canvas, details, Embed,figure, figcaption, footer, header, Hgroup,menu, nav, output, Ruby, section, Summary,time, mark, audio, video{margin:0px;/*outer margin upper right bottom left*/padding:0px;/*Inner margin*/Border:0px;/*Border Style*/font-size:100%;Font:Inherit;/*Font Inheritance parent class*/vertical-align:Baseline;/*sets the vertical alignment of the element. */}Body{Background-image:URL (b.jpg);Line-height:1;/*set the distance between rows (row height)*/Font:12px/20px Verdana;/*font-size/line-height, used to specify font size and line height*/ /*Verdana is a set of sans-serif font, it has a clear structure on the small print end, easy to read and identify high-quality performance.*/}. Login{margin:50px Auto;/*top margin 50px to auto, margin:1px 2px 3px 4px This order is: upper right lower left*/padding:18px 20px;width:300px;background:#3f65b7;Background-clip:Border-box;/*drawing area with specified background*/Border:1px solid #172b4e;Border-bottom-color:#142647;/*sets the color of the bottom border of an element*/Border-radius:5px;/*to add a rounded border to an element*/}. Login-input{Display:Block;width:93%;Height:37px;Margin-bottom:20px;/*Lower Margin*/padding:0 9px;Color: White;Text-shadow:0 1px Black;/*font shadow inside text box*/background:#333;Border-radius:4px;}. Login-input:focus{Outline:0;/*(contour) is a line drawn around an element that is located on the periphery of the edge of the border, and can act as a prominent element.*/Background-color:#32486d; }. Login-submit{Display:Block;/*Display is used to define the type of box that the element generates when the layout is established. The block element is displayed as a block-level element with a newline character before and after this element*/width:100%;Height:37px;Margin-bottom:15px;font-size:14px;Font-weight:Bold;Color:#294779;background:#adcbfa;Border:1px solid #284473;Border-radius:5px;cursor:Pointer;/*The type of cursor that is displayed (shape)*/}. Login-submit:active{background:#a4c2f3;}. Login-help{text-align:Center;}. Login-help a{font-size:12px;Color:#CCC;text-decoration:None;/*Remove the underline from the hyperlink*/}. login-help a:hover{text-decoration:Underline; }. Login-title{text-align:Center;font-size:24px;Color:#FFF; }
HTML Write the first mailbox login interface
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
