1. példa: Űrlapadatok elküldése

HTML5 IE Cr Op Sa Fx

Az alkalmazott módszer könnyen meghatározható a böngésző címsorából. Ha egy kérdőjel jelenik meg benne, és a cím így néz ki, akkor ez mindenképpen GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

A paraméterek egyedi kombinációja a címsorban egyedileg azonosítja az oldalt, így a ?q=node/add és ?q=node címmel rendelkező oldalak eltérőnek minősülnek. Ezt a funkciót a tartalomkezelő rendszerek (CMS, Tartalomkezelő rendszer) használják számos weboldal létrehozására. A valóságban egyetlen fájlt használnak, amely fogadja a GET kérést, és ennek megfelelően generálja a dokumentum tartalmát.

Az alábbiakban felsoroljuk ezeknek a módszereknek a webhelyeken történő tipikus alkalmazását.

KAP

Kis szöveges adatok átvitele a szerverre; Webhelykeresés.

A keresőmotorok és a webhelykereső űrlapok mindig a GET módszerrel kerülnek elküldésre, ez lehetővé teszi a keresési eredmények megosztását ismerőseivel, linkküldést e-mailben vagy fórumon való közzétételét.

POST

Fájlok átvitele (fotók, archívumok, programok stb.); megjegyzések küldése; üzenetek hozzáadása és szerkesztése a fórumon, blogon.

Alapértelmezés szerint az űrlap feldolgozása az aktuális böngészőlapon történik, azonban az űrlap elküldésekor módosíthatja ezt a paramétert, és új lapon vagy keretben nyithatja meg az űrlapkezelőt. Ezt a viselkedést a „kontextusnév” adja meg, amely a címke célattribútumának értéke . A népszerű értékek a _blank az űrlap új ablakban vagy lapon történő megnyitásához, valamint a keret neve, amelyet a címke name attribútuma határoz meg

3. példa: Űrlap összekapcsolása mezőkkel

HTML5 IE Cr Op Sa Fx

Bár az űrlapátviteli paraméterek hagyományosan a címkében vannak megadva , átvihetők az űrlap beküldő gombjaira is ( És ). Ehhez a formation , a formmethod , a formenctype és a formtarget attribútumok halmazát használják, amelyek a megfelelő attribútumok analógjai az űrlap előtag nélkül. A 4. példa ezen attribútumok használatát mutatja be.

4. példa: Űrlap beküldése

HTML5 IE Cr Op Sa Fx

Egyes böngészők, különösen az Internet Explorer és a Safari nem támogatják az összes új űrlapattribútumot.

Ebben a leckében négy lépésből álló regisztrációs űrlapot készítünk: 1. Bejelentkezés és jelszó megadása 2. Keresztnév Vezetéknév és e-mail cím 3. Életkor, nem és ország 4. Általános információk

HTML

Először is, mint általában, hozzuk létre a jelölést html. Szükségünk van egy négy blokkból álló konténerre DIV, minden lépéshez egy.
Fő kód html ilyen lesz:

Minden blokkon belül mezőket és egyszerűket fogunk helyezni címke:

Regisztráljon az oldalra

Három beviteli mezőt használtunk: Bejelentkezési jelszóÉs Jelszó megerősítése, és a blokk végén a címkét bemenet típussal Beküldés hogy a következő lépésre lépjen. A többi blokk pontosan ugyanúgy működik.
A konténer végén van egy egyszerű folyamatjelző sáv, itt van a kódja:

0% kész

Teljes html a kód ilyen:

Regisztráljon az oldalra

Legalább 4 karakter. Csak nagybetűk, kisbetűk vagy számok. Legalább 4 karakter. A megbízhatóság növelése érdekében használja a kis- és nagybetűk kombinációját. Ha a jelszavak nem egyeznek, nem tudja folytatni a regisztrációt.

Regisztráljon az oldalra

A neved. Vezetékneved. Az email címed.

Regisztráljon az oldalra

0 - 17 18 - 25 26 - 40 40+ A korod.

Férfi Nő Mi a nemed.

Oroszország Ukrajna Fehéroroszország Kazahsztán Egyéb Országod.

Regisztráljon az oldalra

Általános információ

Belépés
Jelszó
Email
Név
Kor
Padló
Egy ország

0% kész

Amint azt már észrevette, a negyedik lépésben a táblázat üres. Megtöltjük a felhasználó által a jQuery segítségével megadott információkkal.

CSS

Most adjunk stílusokat az űrlaphoz. Alkalmazzuk a szabályt @fontface egyéni betűtípusok használatához. Esetünkben ez a betűtípus Cantarell. Teljes kód CSS lent van megadva:

/* CSS visszaállítás (Eric Meyer) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,mozaikszó,cím, big,cite,code,del,dfn,em,betűtípus,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl, dt,dd,ol,ul,li,mezőkészlet,forma,címke,jelmagyarázat,táblázat,felirat,tbody,tláb,thead,tr,th,td(szegély:0;körvonal:0;betűméret:100%;függőleges -align:baseline;background:transparent;margin:0;padding:0)body(line-height:1)ol,ul(list-style:none)blockquote,q(quotes:none):fókusz(körvonal:0) ins(text-decoration:none)del(text-decoration:line-through)table(border-collapse:collapse;border-spacing:0) @font-face ( font-family: "Cantarell"; src: url(. ./fonts/Cantarell-Regular.eot); src: local("Cantarell"), url("../fonts/Cantarell-Regular.ttf") formátum("truetype"); ) törzs ( háttérszín: # f9f9f9; szín: #222; betűcsalád: Cantarell, Verdana, sans-serif; betűméret: 12px; ) bemenet::-moz-focus-inner, bemenet::-moz-focus-inner (szegély: nincs; ) input:fókusz, bemenet:fókusz ( körvonal: nincs; ) .clear ( világos: mindkettő; ) #container ( háttér: url(../images/container.png") no-repeat; szélesség: 754px; magasság: 370px; margó: 20px automatikus; kitöltés: 50px 0; túlcsordulás: rejtett; pozíció: relatív; ) #container #first_step, #second_step, #thhird_step, #fourth_step ( display: none; ) #container #first_step ( display: block; ) #container .form ( margó: 66px 72px 0 72px; ) #container h1, #container h2 betűméret: Cantarell, Verdana, serif nélkül; szövegigazítás: középre; betűméret: 24px; szövegárnyék: 1px 1px 2px #222; ) #container h1 span ( szín: #a90329; ) #container h2 ( szín: #888; betűméret: 20px; szövegigazítás: balra; szövegárnyék: nincs; ) #container table (margó: 20px 40px; betűméret: 14px; betűsúly: félkövér ( padding: 5px 10px; ) #container table td:nth-child(2) ( szín: #a90329; ) #container input, #container select ( háttér: url("../images/input.png") no- ismétlés; szín: #888; szegély: 1px tömör #cc; betűcsalád: Cantarell, Verdana, serif nélkül; betűsúly: félkövér; betűméret: 15 képpont; szélesség: 300 képpont; magasság: 35px; padding: 0 25px; margó: 20 képpont 0; balra lebeg; határsugár: 6 képpont; -moz-border-radius: 6px; -webkit-border-radius: 6px; ) #container input.submit ( háttér: url("../images/button.png") no-repeat; keret: nincs; kurzor: mutató; szélesség: 85px; magasság: 38px; pozíció: relatív; alul: 2px; bal: 655px; ) #container input.submit:focus ( keret: nincs; ) #container input.send( háttér: url(). ./images/send.png") no-repeat; ) #container input.error (szegély: 1px folyamatos piros; ) #container input.valid (szegély: 1px solid #1FFF00; ) #container input:focus, #container select :focus ( szegély: 1px tömör #a90329; szín: #a90329; ) #container select ( kitöltés: 5px 0 5px 25px; ) #container option ( padding: 0 15px; ) #container label ( szín: #666; font-size - ismétlés; szélesség: 339px; magasság: 24px; margó: 0 automatikus; pozíció: relatív; ) #haladás ( háttér: url("../images/progress.png") ismétlés-x; szélesség: 0px; magasság: 23px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; ) #progress_text ( pozíció: relatív; line-height: 21px; text-align: center; font-weight: bold; szín: fehér; szöveg-árnyék: 1px 1px 2px #222; szélesség: 339px; magasság: 24px; felső: -23px; bal: 0; )

JS

jQuery Használjuk a blokkok (diák) zökkenőmentes megváltoztatására, az adatok helyességének ellenőrzésére és a kitöltési százalék módosítására.
Össze kell kapcsolnunk a könyvtárat az oldal fejlécében jQueryés még két plugin:
jQuery UIÉs jQuery bemeneti fókusz(a fókusz és az elmosódás alakzati események vezérlésére szolgál).
jQuery a kód lent van:

$(function())( //eredeti mezőértékek var field_values> = ( //id: érték "felhasználónév" : "Логин", "password" : "Пароль", "cpassword" : "Пароль", "firstname" : "Имя", "lastname" : "Фамилия", "email" : "email" }; //inputfocus $("input#username").inputfocus({ value: field_values["username"] }); $("input#password").inputfocus({ value: field_values["password"] }); $("input#cpassword").inputfocus({ value: field_values["cpassword"] }); $("input#lastname").inputfocus({ value: field_values["lastname"] }); $("input#firstname").inputfocus({ value: field_values["firstname"] }); $("input#email").inputfocus({ value: field_values["email"] }); //reset progress bar $("#progress").css("width","0"); $("#progress_text").html("0% Выполнено"); //first_step $("form").submit(function(){ return false; }); $("#submit_first").click(function(){ //remove classes $("#first_step input").removeClass("error").removeClass("valid"); //ckeck if inputs aren"t empty var fields = $("#first_step input, #first_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length!}<4 || value==field_values[$(this).attr("id")]) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { if($("#password").val() != $("#cpassword").val()) { $("#first_step input").each(function(){ $(this).removeClass("valid").addClass("error"); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $("#progress_text").html("33% Выполнено"); $("#progress").css("width","113px"); //slide steps $("#first_step").slideUp(); $("#second_step").slideDown(); } } else return false; }); $("#submit_second").click(function(){ //remove classes $("#second_step input").removeClass("error").removeClass("valid"); var emailPattern = /^+@+\.{2,4}$/; var fields = $("#second_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length<1 || value==field_values[$(this).attr("id")] || ($(this).attr("id")=="email" && !emailPattern.test(value))) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { //update progress bar $("#progress_text").html("66% Выполнено"); $("#progress").css("width","226px"); //slide steps $("#second_step").slideUp(); $("#third_step").slideDown(); } else return false; }); $("#submit_third").click(function(){ //update progress bar $("#progress_text").html("100% Выполнено"); $("#progress").css("width","339px"); //prepare the fourth step var fields = new Array($("#username").val(), $("#password").val(), $("#email").val(), $("#firstname").val() + " " + $("#lastname").val(), $("#age").val(), $("#gender").val(), $("#country").val()); var tr = $("#fourth_step tr"); tr.each(function(){ //alert(fields[$(this).index()]) $(this).children("td:nth-child(2)").html(fields[$(this).index()]); }); //slide steps $("#third_step").slideUp(); $("#fourth_step").slideDown(); }); $("#submit_fourth").click(function(){ //send information to server alert("Данные отправлены"); }); });
Itt van egy űrlapunk a regisztrációval több lépésben. A példa használatához csak az űrlapot kell módosítania akció a te linkeddel php az adatok tárolására és a 132-es sor szerkesztésére használt fájl:
$('form').unbind('submit').submit();. Az űrlap működés közbeni megtekintéséhez kattintson a gombra Demó.

A bejelentkezési űrlap kialakítása nagyon fontos minden webhely számára. Összegyűjtöttünk néhány ingyenesen letölthető reszponzív bejelentkezési oldal sablont. A bejelentkezési űrlap egy weboldal része. Amikor felkeresünk egy webhelyet, és teljes hozzáférést szeretnénk elérni, regisztrálnunk és bejelentkeznünk kell. Bármely webhely bejelentkezési űrlapja a webhely bármely oldalán megtalálható. Jobb vagy bal oldal lesz. Nincs olyan webhely, ahol nincs kitöltve a bejelentkezés és a regisztrációs űrlap. Tehát minden weboldal számára fontos. Professzionális fejlesztő nélkül nagyon nehéz bejelentkezési űrlapot létrehozni HTML CSS-en keresztül.

A HTML egy struktúra, a CSS pedig a tervezés. A HTML5 és a CSS3 a dizájn frissített verziója. Az ezzel a frissítési kódolással létrehozott bejelentkezési űrlapok némelyike ​​közvetlenül letölthető. A fejlesztő ingyenesen osztotta meg ezt az űrlapot. Ezeket bármilyen személyes igényre vagy üzleti célra használhatják.

Használja ezt a reszponzív bejelentkezési oldalsablont ingyenesen, és építheti fel magát. Bármilyen színt vagy stílust testreszabhat és megváltoztathat. Csatlakoztathatja az adatbázisát is, a jquery-t. Tehát ez a bejelentkezési sablon igazán hasznos és fontos.

Megosztottuk ezt a bejegyzést néhány ingyenes bejelentkezési űrlapsablonnal html5 css3. Ez a gyűjtemény bővülni fog. Igyekszünk több bejelentkezési oldal sablont gyűjteni.

Anyagtervezési űrlap

Ez a bejelentkezési űrlap nagyon lenyűgözőnek és egyszerűnek tűnik. Szerkesztheti és módosíthatja a felület színét. Egyszerű kialakítás, de nagyon profi.

DEMO LETÖLTÉS

Ha bármilyen jelentkezési űrlapot kell megterveznie, használja ezt a Material Design bejelentkezési űrlapot. Tökéletes lesz az alkalmazásához.

DEMO LETÖLTÉS

Animált SVG Avatar

Az animált bejelentkezési sablonra nagy az igény. Ha használni akarod a szakmádban. Ez az Animált SVG Avatar bejelentkezési űrlap jobb az Ön számára.

DEMO LETÖLTÉS

Bejelentkezési űrlap shake hatása

Ez egy egyszerű bejelentkezési űrlap, és van némi hatása, és az Ön professzionális tevékenységét használja.

DEMO LETÖLTÉS

CSS3 Animation Cloud és bejelentkezési űrlap

Ha felhőalapú vállalkozása van, vagy bármilyen típusú felhőalapú vállalkozást tervez, használhatja ezt a CSS3 Animation Cloud- és bejelentkezési űrlapot.

DEMO LETÖLTÉS

Tiszta bejelentkezési űrlap

Ez egy nagyon letisztult dizájn, és a név is ugyanaz a Tiszta bejelentkezési űrlap. Használja ezt az űrlapot tiszta webhelyén.

DEMO LETÖLTÉS

Bejelentkezési űrlap HTML5-ön

Ez a bejelentkezési űrlap HTML5-ben készült, és az Ön legjobb webhelyéhez használható.

DEMO LETÖLTÉS

Bejelentkezési űrlap csak CSS érvényesítés

DEMO LETÖLTÉS

CSS bejelentkezési űrlap

DEMO LETÖLTÉS

Batman bejelentkezési űrlap

DEMO LETÖLTÉS

Bejelentkezési űrlap a Materializecss segítségével

DEMO LETÖLTÉS

Angular Material Bejelentkezési űrlap

DEMO LETÖLTÉS

Reszponzív bejelentkezési űrlap

DEMO LETÖLTÉS

Reszponzív bejelentkezési űrlap

DEMO LETÖLTÉS

Egyszerű lapos forma forgó rakodóval

DEMO LETÖLTÉS

Jelentkezzen be Everdwellbe

Ennek a leckének a formátumában elkészítjük CSS bejelentkezési űrlap, megmutatom, hogyan lehet a betűtípus-ikonokat összekapcsolni, hogyan lehet beállítani az elemek átlátszóságát, és hogyan használhatunk animált hover effektusokat az űrlapon.

Űrlap keretrendszer HTML-ben

Először elkészítjük az űrlap keretét. Nyissa meg a html sablont, és írja be a következő kódot a címkék közé.

Hozzon létre egy blokkot, amely az űrlap tárolójaként fog szolgálni. Rendeljük hozzá a .container osztályt, helyezzünk el egy űrlapot a bemenettel. type="text" name="username" placeholder="Adja meg bejelentkezési adatait" !}, második input type="password" name="password" placeholder="Adja meg a jelszót" !} elfogad egy jelszót, majd egy küldés gombot. Az alábbiakban elhelyezünk egy feliratot a jelszó-helyreállításhoz, egyszerű hivatkozássá tesszük.

Jelszó visszaállítása

Űrlapelemek leírása CSS-ben

Ezután formázzuk ezeket az űrlapelemeket. Hozzunk létre egy további CSS-könyvtárat, amelyben stílusfájlokat helyezünk el. Ebben létrehozunk egy style.css fájlt és összekapcsoljuk az oldalunkkal.

Azt javaslom, hogy helyezzen egy képet a háttérbe, ehhez hozzunk létre egy további img könyvtárat, és helyezzük el a képünket. A képet beletesszük a style.css for body-ba. Felírjuk a kép elérési útját, kilépünk az aktuális könyvtárból, megyünk az img mappába, majd a kép nevét.

Body( background-image: url("../img/bg.png"); )

A( szín: #fff; ) a:hover( szövegdekoráció: nincs; )

Stíluszzuk a tárolót a .container formával. Állítsuk a szélességet 450 képpontra, a magasságot pedig ideiglenesen 500 pixelre. Állítsuk a színt #182134-re, és állítsuk középre a képernyő margójának közepén: 250px auto 0 auto; . Helyezze el a szöveget a blokkon belül középre, 20 képpontos behúzással felül.

Tároló (szélesség: 450 képpont; magasság: 500 képpont; háttérszín: #182134; margó: 250 képpont automatikus 0 automatikus; szövegigazítás: középre; )

Ezután hozzunk létre egy bevitelt a bejelentkezési név és a jelszó megadásához. Annak érdekében, hogy ne érintse a gombot, a szöveg és jelszó attribútumok alapján választjuk ki őket, 300 pixel szélességet adva meg. , 50 csúcs magassága. Nagyítsd fel a szöveget 18 képponttal, közéjük tedd a behúzást 25 px-re, a sarkok kerekítésével határsugár: 4px; , a szöveg 10 pixelre kerül át. balra.

Input,input(szélesség: 300px; magasság:50px; betűméret: 18px; margó-alsó: 25px; szegélysugár: 4px; kitöltés balra: 10px; )

Ezután az inpyt központba helyezzük úgy, hogy egy további blokkba csomagoljuk, és hozzárendeljük a .dws-input osztályt. A gomb után tegyünk sortörést, és a gomb elé szúrjunk be egy képet, amelyen felül a logónk látható. Ehhez másolja be az img mappába, és írja be az img src="img/men.png" elérési utat.

Jelszó visszaállítása

A továbbiakban a stílusait ismertetjük. A képhez rendeljünk 120 pixel szélességet és magasságot. , majd emelje fel közvetlenül az alakmargó fölé: -60px 0 30px 0; , kb vodka 5 csúcson. keret: 5px tömör #1a394f; , a sarkok lekerekítése 50%.

Tárolókép (szélesség: 120 képpont; magasság: 120 képpont; margó: -60 képpont 0 30 képpont 0; szegély: 5 képpont tömör #1a394f; szegélysugár: 50%; )

Most pedig írjuk le a gombstílusokat. Rendeljük hozzá a .dws-submit osztályt, és rendeljünk hozzá stílusokat. Behúzásokat rendelünk hozzá, a szöveget 15 képponttal megnöveljük, fehérre, a gomb hátterét kékre tesszük, eltávolítjuk a vodkát és alul négyzetet készítünk, valamint egy Pointer kurzort.

Dws-submit ( kitöltés: 13px 30px; margó: 5px 0 20px 0; betűméret: 15px; szín: #fff; háttérszín: #2ca8c6; szegély: nincs; szegély-alsó: 4px tömör #6ee9fd; kurzor: mutató ;)

A bemenetek és a gomb középre állításához helyezzük őket külön-külön, mindegyiket a saját blokkjába. Leírjuk a gomb stílusát, amikor az egérmutatót rámutatjuk. Sima átmenetet végzünk, a gomb színét fehérre változtatjuk, és ezzel egyidejűleg a betűtípus sötétre változik.

Dws-submit:hover( átmenet: mind 0,5s; háttér: #fff; szín: #2c536c; )

Csináljunk egy kék blokkot az alakunk tetejére, box-shadow: 0 -5px 0 #3adbfd; , és adja hozzá a képhez box-shadow: 0 -5px 0 #3adbfd; . Tegyük átlátszóbbá az űrlap hátterét, ehhez ezt a színt írjuk RGBA formátumban.

Használom a w3schools.com szolgáltatást, lemegyek a Színválasztóhoz, beírom a színünket az űrlapba és átkonvertálom RGB-re. Másolja és illessze be a tárolóstílusba.

Tároló (szélesség: 450 képpont; magasság: 500 képpont; háttérszín: rgba (24, 33, 52, 0,7); margó: 250 képpont automatikus 0 automatikus; szövegigazítás: középre; doboz árnyéka: 0 -5 képpont 0 #3adbfd; ) .container img( szélesség: 120 képpont; magasság: 120 képpont; margó: -60 képpont 0 30 képpont 0; szegély: 5 képpont tömör #1a394f; keret sugara: 50%; doboz árnyéka: 0 -5 képpont 0 #3adbfd; )

A hatás érdekében kerekítsd le az alsó sarkokat, erre írunk border-radius: 0 0 10px 10px; .

Betűtípus ikonok hozzáadása

Adjunk hozzá ikonokat betűtípusok formájában, menjünk a fontawesome.io szolgáltatásba, és töltsük le őket a számítógépünkre. Csomagoljuk ki az archívumot, másoljuk a fonts mappát, amely a betűtípusokat tartalmazza, és másoljuk be a stílusfájlt a css könyvtárba. Ezután összekapcsoljuk a stílusokat az oldallal.

Válasszunk ki ikonokat a bemeneteinkhez, ehhez megyünk az oldalra Ikonok, az első a belépés stílusának összekapcsolása, használata felhasználó, másolja ki a kódját f007, és írja le stílusokban pszeudoelem segítségével.

Betűtípus-család összekapcsolása: "FontAwesome"; , majd magát az ikont, helyezze el abszolút a margókra, növelje meg 30 képponttal, középre állítsa és módosítsa a színét.

Dws-input::before( font-family: "FontAwesome"; tartalom: "\f007"; pozíció: abszolút; betűméret: 30px; kitöltés: 10px 0 0 7px; szín: #2c536c; )

Mozgassuk egy kicsit a szöveget a bevitelben - padding-bal: 40px; .

Válasszuk ki a második ikont a névvel zár, másolja ki a kódját f023, és írja le a stílusait.

Ehhez válassza ki a második elemet .dws-input:nth-child(2)::before(), és írja be a kép tartalmát: " \f023";.

Dws-input::before( font-family: "FontAwesome"; tartalom: "\f007"; pozíció: abszolút; betűméret: 30px; kitöltés: 10px 0 0 7px; szín: #2c536c; ) .dws-input: nth-child(2)::before( tartalom: "\f023"; )

Dws-input:hover::before( szín: #319ebc; átmenet: mind 0,3s; )

És a bemeneti stílusok mozgatása is.

Dws-input input:hover(box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0,35); )

A kényelem kedvéért csomagoljuk őket egy blokkba a .social osztállyal, és írjuk le a stílusukat. Változtassuk meg a színüket fehérre, növeljük 20 képponttal, tegyük 20 pixel szélesre, és adjunk hozzá néhány párnázást.

Dws-social i( szín: #fff; betűméret: 20px; szélesség: 20px; kitöltés: 10px; )

Ezután leírjuk a lebegtetési stílusokat. Készítsünk egy fehér blokkot, állítsuk át az ikon hátterét sötétre, kerekítsük le a sarkokat, és jelenítsük meg a kurzort lebegtetéskor.

Közösségi i:hover( háttérszín: #fff; szín: #1a394f; szegélysugár: 5 képpont; kurzor: mutató; )

Távolítsuk el a legelején beállított űrlapblokk magasságát, és adjunk a helyére egy alsó padding-bottom: 20px; .

Elvileg ennyi, kaptunk egy elég szép űrlapot, ami az oldalhoz köthető és engedélyezésre használható.

Próbáljon meg valami eredetit csinálni ennek a leckének a példáján, gyakoroljon, és ne felejtse el megosztani ezt az anyagot.