Pozdrav, dragi čitatelji bloga. Danas želim razgovarati o stvarima kao što su HTML obrasci. Bez obzira na motor vaše stranice (cms), ona će svakako koristiti obrasce kreirane pomoću oznaka Form i Input, kao i atribute i parametre Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.
Ovome također možete dodati elemente za stvaranje padajućih popisa i tekstualnih polja - Odaberi, Opcija, Textarea, Label, Fieldset, Legenda.
Zašto su obrasci potrebni i kako rade na modernim stranicama
Isti niz za pretraživanje web-mjesta () stvara se pomoću ovih oznaka, a traženje toga na vašem projektu bit će obavezno. Stoga vam razumijevanje načina na koji su raspoređeni i funkcioniraju uopće neće smetati za uspješan rad na dizajnu, a neće biti suvišno ni za samopromociju i promociju.
Dakle, s obrazloženjem potrebe za proučavanjem ovih elemenata, mislim da više ne bi trebalo biti pitanja, pa je vrijeme da prijeđemo izravno na proučavanje njihovih mogućih opcija.
Da, također vas želim podsjetiti da smo već uspjeli razmotriti mnogo materijala na temu jezika za označavanje hiperteksta, na primjer, tri ) i .
U svojoj jezgri, obrasci se sastoje od elemenata, za stvaranje kojih se različite oznake umeću unutar glavnog spremnika iz oznaka obrasca - Provjereno, Vrijednost, Potvrdni okvir, Radio, Potvrdni okvir, Pošalji itd. Samo trebamo postaviti njegov kod na bilo koje mjesto pogodno za ovaj predložak web mjesta, određujući kako bi trebao izgledati uz pomoć oznaka i njihovih atributa.
To bi mogao biti tekstualni okvir s gumbom za slanje za uneseni zahtjev, izbor radio gumba (gdje možete ostaviti samo jedan od ponuđenih gumba pritisnutim), više tekstnih okvira s gumbom za slanje () i više.
Na primjer, u slučaju "traži", pomoću atributa Vrijednost, možete odrediti što će točno biti napisano na gumbu koji se nalazi pored polja za unos upita. Podatke unesene u obrasce potrebno je na neki način dalje obraditi.
Na primjer, u slučaju povratne informacije, korisnik, nakon što ispuni polje sa svojim imenom, unese svoju e-poštu i tekst poruke, a zatim klikne na gumb za slanje, imat će pravo nadati se slanju podataka iz obrazac na e-mail autora stranice. No implementirati ovo korištenjem samo jednog jezika za označavanje hiperteksta (), nažalost, nije moguće.
U tu svrhu potreban je poseban program za rukovanje koji će, nakon što korisnik klikne na gumb za slanje, uzeti sve podatke iz polja za povratne informacije i poslati ih E-mail vlasniku resursa. Koji program će to učiniti, morate sami odrediti pomoću atributa Akcija.
Obično je program za obradu skripta napisana u PHP-u. Stoga ćete u atributu Action oznake Form morati navesti put do datoteke ove skripte koja se nalazi na poslužitelju vašeg hostinga. Dat ću kao primjer pretplatu na RSS feed mog bloga putem e-pošte:
Malo nejasno, vjerojatno, čini se na prvu, ali mislim da će sve biti jasnije kako priča bude odmicala.
Oznake obrasca i unosa za stvaranje gumba, potvrdnih okvira i radio gumba
Svaki obrazac mora biti okružen početnim i završnim oznakama Oblik. Ovo je vrsta spremnika za njihovo stvaranje. Ova oznaka ima niz obaveznih i izbornih atributa:
- Ime - jedinstveno ime koje je potrebno navesti ako će se koristiti više web obrazaca u Html datoteci u kojoj nešto radite
- Akcija - obvezni atribut koji označava put do skripte na koji će se podaci iz nje prenijeti za daljnju obradu
- Metoda - pomoću nje možete promijeniti način prosljeđivanja podataka iz ovog web obrasca u skriptu datoteke rukovatelja. Ako to ne navedete, tada će se prema zadanim postavkama koristiti metoda Get, koja je, zapravo, namijenjena uglavnom za varijable i kratke poruke, a također i prosljeđivanje podataka na otvoren način kroz adresnu traku preglednika. Da biste proslijedili podatke obrasca skripti rukovatelja, ipak je bolje koristiti POST metoda, dizajniran posebno za prijenos tekstualnih poruka na zatvoren način
Pogledajmo ostale oznake koje vam omogućuju stvaranje raznih web obrazaca. Najsvestraniji je Ulazni. Unutar njega mora biti upisan atribut Type koji određuje kakav će točno biti HTML obrazac kreiran pomoću ove oznake.
Pomoću Input and Type možete izraditi sljedeće elemente:
- tekstualna polja s jednim redom (Type="Text")
- polja za lozinku (Type="Password")
- potvrdni okviri (Type="Checkbox")
- radio gumbi (Type="Radio")
- skrivena polja (Type="Hidden")
- uobičajeni gumbi (Type="Button")
- gumbi za slanje podataka rukovatelju (Type="Submit")
- gumbi za vraćanje web obrasca u izvorno stanje (Type="Reset")
- polja za učitavanje datoteka na poslužitelj (Type="File)
- slikovni gumbi (Type="Image")
Unos nema završnu oznaku. Kakav će točno biti web obrazac kreiran njime u potpunosti ovisi o parametru navedenom u atributu Type. Ako Vrsta nije navedena, tekstno polje će se stvoriti prema zadanim postavkama.
Primjeri obrazaca stvorenih na Inputu s različitim vrijednostima za Type
Ostali atributi ulazne oznake i primjeri njihove uporabe
Razmotrite čemu služe ostali atributi:
- Ime - ako se podaci šalju skripti programa rukovatelja, tada morate navesti parametar za atribut Naziv. Pod tim nazivom će se podaci dostavljeni iz obrasca pojaviti u programu za obradu podataka.
- Veličina - pomoću nje se postavlja veličina polja kreiranog web obrasca. Vrijednost je navedena u broju znakova koji mogu stati u ovo polje. Ako veličina nije navedena, širina će prema zadanim postavkama biti 24 znaka.
- Maxlength - prema zadanim postavkama, broj znakova koji se mogu unijeti u Html obrazac nije ograničen, ali korištenjem Maxlength možete postaviti ovo ograničenje. Više znakova nego što će biti naznačeno, nećete moći unijeti u polje
- Vrijednost - pomoću nje možete postaviti što će točno biti zapisano u polju ili na gumbu za slanje podataka
- Označeno je atribut zastavice koji se može umetnuti u Unos za radio gumbe (radio) ili za potvrdne okvire (potvrdni okvir). U tom će slučaju ovaj radio gumb ili potvrdni okvir biti aktivan kada se učita stranica s web-obrascem (već će imati kvačicu)
Sada pogledajmo sve oblikujte primjere s unosom. Izgled tekstualnog polja sličan je izgledu polja za lozinku, stoga ćemo razmotriti samo opciju kreiranja teksta, npr. za unos adrese e-pošte:
Sada pogledajmo stvaranje web obrasca s radio gumbima (Radio):
Imajte na umu da ovaj obrazac dvaput koristi oznaku unosa, jednom za stvaranje svakog od dva radio gumba. Štoviše, svaki od njih ima atribut Name s istom vrijednošću (resultat), a vrijednost Value je različita (YES i NO).
To znači da će se prilikom obrade, ako je odabran bilo koji od radio gumba, poslati varijabla čije je ime zapisano u Name, ali će vrijednost te varijable ovisiti o tome koji je radio gumb odabran.
Razmotrite primjer izrade web obrasca s potvrdnim okvirima (Checkbox):
Potvrdni okviri razlikuju se od radio gumba po mogućnosti odabira više opcija odjednom. Naziv se koristi za određivanje u datoteci rukovatelja u kojem su potvrdnom okviru postavljeni potvrdni okviri, a vrijednost specificira vrijednost koja će biti poslana rukovatelju (ako vrijednost nije postavljena, tekst koji se nalazi pored ovog potvrdnog okvira bit će poslan rukovatelju ).
Odabir, Opcija, Textarea, Label, Fieldset, Legend - padajući popisi, tekstualna područja i drugi elementi web obrasca
Za početak, želim vas malo podsjetiti što su zapravo web obrasci i zašto su potrebni na stranicama web mjesta. Prvenstveno su dizajnirani da ponavljaju elemente koji su dostupni u bilo kojem operativnom sustavu u jednostavnom obliku: gumbe, polja za unos teksta, padajuće liste, okvire za potvrdu, prekidače i slično.
Svi korisnici, bez ikakvih dodatnih objašnjenja, razumiju svrhu ovih elemenata, a ako vide gumb Html forme, razumiju da moraju kliknuti na njega.
Štoviše, svi njegovi sastavni elementi (kao što su Select, Option, Textarea, Label, Fieldset, Legend) već su gotove praznine (spremnici), za umetanje kojih će biti dovoljno samo koristiti željenu oznaku s potrebnim atributima i parametrima.
Sami preglednici znaju kako prikazati određeni element web obrasca. Istina, mogućnosti prikaza za isti element u različitim preglednicima mogu se malo razlikovati jedna od druge, ali u pravilu ne značajno.
Da. ispada da su web obrasci u HTML-u pokušaj prijenosa ključa elemenata koji se koriste u bilo kojem operativnom sustavu, na stranice web stranice. Ali zašto bi mogli biti potrebni na stranicama web mjesta?
U principu, za istu svrhu za koju se slični elementi koriste u operacijskim sustavima - prijenos podataka od korisnika. U slučaju obrazaca, podaci od korisnika prenose se na poslužitelj, gdje se obrađuju posebnim programom (jezik za označavanje hiperteksta, nažalost, ne dopušta obradu podataka).
Iako se podaci mogu slati ne samo na poslužitelj, već i, na primjer, e-poštom na adresu navedenu u atributu Action oznake Form. Prilikom slanja podataka iz Html-a u E-mail, korisnik koji popuni polja, nakon klika na gumb Pošalji podatke, pokrenut će program za poštu koji se standardno koristi na njegovom računalu.
Oznaka obrasca za otvaranje trebala bi izgledati otprilike ovako:
Kao što vidite, klik na tekst za aktiviranje ovog elementa je beskoristan - morate sami kliknuti na njega. To je upravo stanje stvari koje je Label tag dizajniran da popravi. Omogućuje vam da tekst pored elementa web obrasca učinite klikabilnim, što nedvojbeno jest poboljšati upotrebljivost.
Ali kako povezati Html element i tekst? Da biste to učinili, atributu morate dodati ID s jedinstvenim parametrom, a tekst mora biti okružen otvarajućim i zatvarajućim oznakama Label. I to nije sve. U početnu oznaku Label potrebno je upisati atribut For čiji parametar mora biti potpuno isti kao ID atribut u Html oznaci elementa forme. Ispada ovako nešto:
Kao što vidite, sada, zahvaljujući korištenju Labela, elementi web obrasca mogu se aktivirati ne samo klikom na njega, već i klikom na tekst koji se nalazi pored njega.
Fieldset i Legend - cijepanje forme na dijelove
Vjerojatno ste često vidjeli da su veliki obrasci u Html-u podijeljeni u grupe (Fieldset), koje su zaokružene u okviru, a svaka takva grupa ima svoje zaglavlje (Legend). Ovo se implementira pomoću samo dvije oznake: Fieldset i Legend. Oni su upareni, tj. moraju imati otvor i otvor.
Dakle, da biste stvorili grupu sastavnih dijelova, sve te dijelove trebate zatvoriti u početne i završne oznake Fieldset. A da biste postavili naslov (legendu) za ovu grupu, potrebno je odmah nakon početnog Fieldset-a napisati konstrukciju iz početne i završne legende, između kojih je potrebno umetnuti tekst naslova grupe.
Evo primjera stvaranja grupa pomoću Fieldset-a i Legende:
Sretno ti! Vidimo se uskoro na stranicama bloga
Možda će vas zanimati
Select, Option, Textarea, Label, Fieldset, Legend - Html oznake obrasca padajućeg popisa i tekstualnog polja Popisi u Html kodu - UL, OL, LI i DL oznake
MailTo - što je to i kako napraviti link za e-poštu u HTML-u
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex rezultati i drugi programi
Što je Html Hypertext Markup Language i kako ispisati sve oznake u W3C validatoru
Kako ubaciti link i sliku (fotografiju) u HTML - IMG i A tagovi
Tablice u Html - Table, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovu izradu
Font (lice, veličina i boja), Blockquote i Pre oznake - zastarjelo oblikovanje teksta u čistom HTML-u (bez korištenja CSS-a)
Kako napraviti hipervezu (A, Href, Target blank), kako je otvoriti u novom prozoru na web mjestu, a također napraviti sliku poveznicom u Html kodu
U posljednje dvije godine razvoj web aplikacija (stranica) je otišao daleko naprijed i ono što smo koristili za izradu stranica je već zastarjelo ili su se pojavile novije metode.
Prethodno, za stvaranje padajućeg popisa u html-u ( na engleskom. — padajući izbornik), upravo smo koristili
Posebno za ovaj članak pronašao sam 16 različitih primjera koji bi mogli dobro doći tijekom razvoja stranice. I zato počnimo.
1. Prilagođeni popis
Html predložak koji vam omogućuje da prilagodite vlastite boje na padajućem popisu.
2. Izrađeno pomoću CSS3/JavaScript
Napisano u CSS3 i JavaScriptu. Normalan padajući popis.
3. Stil: stanice podzemne željeznice
Transparentan padajući popis u stilu metro stanica.
4. Kapljica. Napisano u SCSS & jQuery
5. Za duge popise
Odlično rješenje za duge padajuće izbornike.
Padajući izbornik napisan u čistom CSS-u bez upotrebe skripti.
Izvrstan za bočne izbornike na web mjestu za vizualni prikaz kategorija na web mjestu.
8. Moderan izbornik korisničkih postavki
9. CSS3 padajući izbornik
Izrađen u UI stilu, prikladan za UI stil stranice.
12. Odabir zastavice
Padajući izbornik u stilu odabira zemlje.
13. Obični HTML, CSS padajući izbornik
Nadam se da ste uživali u mom odabiru. Ostavite komentare, podijelite svoje mišljenje i pošaljite vlastiti rad!
Kako napraviti padajuću listu u html-u (odabir TOP 16) iz bologera
Vodoravni padajući izbornik koristi se za organiziranje navigacijske strukture stranice. Optimalan broj razina gniježđenja je jedna ili dvije. Što je manje razina privitaka, to je posjetitelju stranice lakše pronaći potrebne informacije. Kako stvoriti redoviti vodoravni izbornik detaljno je opisano u .
Kako napraviti horizontalni padajući izbornik
1. HTML oznake i osnovni stilovi za padajući izbornik s jednom razinom ugniježđenja
HTML označavanje horizontalnog padajućeg izbornika razlikuje se od običnog izbornika po tome što se odnosi na željenu stavku popisa
- ili<оl> .
Za postavljanje podizbornika u odnosu na glavni izbornik deklarirani su sljedeći stilovi:
— za element liste u koji je ugniježđena padajuća lista: li (position: relative;) ;
- za padajući izbornik ul (position: absolute;) , kao i lijeve i gornje vrijednosti.
Radi jasnoće i praktičnosti oblikovanja, dodajmo klasu topmenu u glavni izbornik, a klasu podizbornika u padajući izbornik.
Padajući izbornik možete sakriti na nekoliko načina:
1) prikaz: nema;
2) vidljivost: skrivena;
3) neprozirnost: 0;
4) transformacija: scaleY(0);
5) korištenje jQuery biblioteke.
Metoda 1. (prikaz: ništa;)
Padajući izbornik skriven je pomoću .submenu (display: none;) , prikazan dok lebdite pomoću .topmenu li:hover .submenu (display: block;) .
Metoda 2. (vidljivost: skriveno;)
Izbornik je skriven s .submenu (visibility: hidden;) , prikazan s .topmenu li:hover .submenu (visibility: visible;) .
Metoda 3. (neprozirnost: 0;)
Izbornik je skriven s .submenu (neprozirnost: 0;) , prikazan s .topmenu li:hover .submenu (neprozirnost: 1;) . Kako biste spriječili pojavljivanje izbornika kada prijeđete pokazivačem iznad područja na kojem se nalazi, dodajte visibility: hidden; , a pri lebdenju promijenite u visibility: visible; .
Metoda 4. (transformacija: scaleY(0);)
Izbornik je skriven s .submenu (transform: scaleY(0);) , prikazan s .topmenu li:hover .submenu (transform: scaleY(1);) . Budući da je zadana transformacija elementa iz središta, trebate dodati za .submenu (transform-origin: 0 0;) , tj. iz gornjeg lijevog kuta.
Metoda 5: Korištenje jQueryja
$(".five li ul").hide(); // sakrij padajući izbornik $(".five li:has(".submenu")").hover(function()( $(".five li ul").stop().fadeToggle(300);) /* odaberite element popisa koji sadrži element s klasom .submenu i dodajte mu funkciju lebdenja koja prikazuje i skriva padajući izbornik */);2. 3D padajući izbornik
Zanimljivi efekti mogu se stvoriti korištenjem CSS3 transformacija, kao što je pojavljivanje izbornika s dna zaslona.
* ( box-sizing: border-box; ) body ( margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : ništa; margina: 0; padding: 0; ) nav a ( display: block; text-decoration: none; outline: none; prijelaz: .4s ease-in-out; ) .topmenu ( backface-visibility: hidden; background : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a (font-family: "Exo 2", sans-serif; visina: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; ) .down:after ( content: "\f107"; margin-left: 8px; font-family : FontAwesome; ) .gornji izbornik li a:hover ( boja: #E6855F; ) .podizbornik ( pozadina: bijela; obrub: 2px čvrsta #003559; pozicija: apsolutna; lijevo: 0; vidljivost: skrivena; neprozirnost: 0; z-indeks : 5; širina: 150px; transformacija: perspektiva(600px) rotateX(-90deg); transform-origin: 0% 0%; prijelaz: .6s lagano-unutrašnje; ) .topmenu > li:hover .submenu( visibility: vidljivo; neprozirnost: 1 transformacija: perspektiva(600px) rotacijaX(0deg); ) .submenu li a ( boja: #7f7f7f; veličina fonta: 13px; visina linije: 36px; ispuna: 0 25px; obitelj fonta: "Kurale", serif; )
3. Proširivi padajući izbornik s logotipom
U ovom primjeru, gornji dio stranice sadrži logotip i navigaciju web stranice. Logo može biti slika ili tekst. Padajući izbornik postupno se širi ispod gornje stavke popisa pomoću CSS3 transformacijske funkcije.
4. Povećanje padajućeg izbornika
Još jedan primjer padajućeg izbornika. Učinak povećanja kada se pojavi izbornik ostvaruje se smanjenjem početne veličine.podizbornika (transformacija: skala(.8);) , pri lebdenju mišem veličina se povećava na.topmenu > li:hover .podizbornik (transformacija: skala(1);) .
* ( box-sizing: border-box; ) body ( margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( background: white; ) nav ul (list-style: ništa; margina: 0; padding: 0; ) nav a (text-decoration: none; outline: none; display: block; prijelaz: .4s ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px; visina: 12px; pozadina: #d2d2d2; vrh: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); ) .topmenu > li:last-child:after ( pozadina: nema; okvir -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( boja: #c0a97a; ) .podizbornik ( pozicija: apsolutna; lijevo: 50%; vrh: 100%; širina: 210px; margin-lijevo: -105px; pozadina: #fafafa ; rub: 1px solid #ededed; z-indeks: 5; vidljivost: skrivena; neprozirnost: 0 transformacija:razmjer(.8); prijelaz: .4s lagano ulaženje; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .podizbornik ( vidljivost: vidljivo; neprozirnost: 1; transformacija: skala(1); )
5. Padajući izbornik
Horizontalni izbornik s mini-animacijom: lebdeći iznad poveznica gornjeg izbornika prikazat će se mali krug koji također prati izgled padajućeg izbornika.
@import url("https://fonts.googleapis.com/css?.jpg); položaj pozadine: centar centar; ponavljanje pozadine: nema ponavljanja; veličina pozadine: naslovnica; visina: 100vh; položaj: relativan; ) body:before ( content: ""; pozicija: apsolutna; lijevo: 0; dno: 0; visina: 100%; širina: 100%; pozadina: linearni gradijent(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( poravnanje teksta: centar; padding: 40px 0 0; ) nav ul ( list-style: ništa; margina: 0; padding: 0; ) nav a ( text-decoration : ništa; prikaz: blok; boja: #222; ) .topmenu > li ( prikaz: inline-block; položaj: relativan; ) .topmenu > li > a ( položaj: relativan; padding: 10px 15px; font-family: " Kaushan Script", kurziv; veličina fonta: 1,5em; visina retka: 1; razmak između slova: 3px; ) .gornji izbornik > li > a:prije ( sadržaj: ""; pozicija: apsolutna; z-indeks: 5; lijevo: 50%; gore: 100%; širina: 10px; visina: 10px; pozadina: bijela; rubni radijus: 50%; transformacija: prijevod (-50%, 20px); neprozirnost: 0; prijelaz: .3s; ) .topmenu li:hover a:before ( transform: translate(-50%, 0); neprozirnost: 1 ) .podizbornik (položaj: apsolutni; z-index: 4; lijevo: 50%; vrh: 100%; širina: 150px; padding: 15px 0 15px; margin-top: 5px; pozadina: bijela; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; vidljivost: skriveno; neprozirnost: 0; transformacija: translate(-50%, 20px); prijelaz: .3s ; ) .topmenu > li:hover .submenu ( vidljivost: vidljivo; neprozirnost: 1; transformacija: translate(-50%, 0); ) .submenu a (font-family: "Libre Baskerville", serif; font-size: 11px; razmak između slova: 1px; ispuna: 5px 10px; prijelaz: .3s linearno; ) .submenu a:hover (pozadina: #e8e8e8;)
U ovom ćemo članku razmotriti elemente koji vam omogućuju stvaranje padajućih popisa, naučiti kako formirati grupe na tim popisima, razmotriti kako onemogućiti stavke, pa čak i grupe popisa, upoznati se s elementom koji vam omogućuje stvaranje više -line tekstualno polje, možete ga koristiti kasnije unutar HTML obrazaca (element
Osim toga, unutar forme smo postavili gumb koji služi za slanje forme (element s gumbom tipa "pošalji obrazac": tip = "pošalji" ).
Rezultat našeg primjera:
Opis alatnog područja za tekst
Stoga ćemo razmotriti posljednji primjer i prijeći na praktični zadatak članka u ovom vodiču.
Zahvaljujući atributu (HTML tag
Tekst opisa alata je skriven kada korisnik unese vrijednost (bilo koji znak) u tekstualno polje, ako se ukloni, opis alata će se ponovno prikazati.
Razmotrimo primjer korištenja:
type = "submit" name = "submitInfo" value = "submit" > !}
U ovom primjeru stvorili smo dva tekstualna područja (element
Imajte na umu da ako je tekstualno polje samo za čitanje, tada se sadržaj ne može mijenjati, ali korisnik i dalje može doći do sadržaja, odabrati ga i kopirati.
Osim toga, unutar forme smo postavili gumb koji služi za slanje forme (element s gumbom tipa "pošalji obrazac": tip = "pošalji" ).
Rezultat našeg primjera:
Pitanja i zadaci na temu
Prije nego prijeđete na sljedeću temu, riješite praktični zadatak:
- Koristeći stečeno znanje sastavite sljedeći obrazac za objavu slobodnog radnog mjesta:
Prije nego što nastavite sa zadatkom, otvorite primjer u novom prozoru i pažljivo pregledajte obrazac kako biste ponovili sve njegove točke. Da biste izvršili zadatak, trebat će vam znanje iz članka. Ako ste ga propustili, vratite se da ga proučite.
Nakon što završite vježbu, pregledajte kod stranice otvaranjem primjera u zasebnom prozoru kako biste bili sigurni da ste sve napravili ispravno.
Danas želim predstaviti mali "recept" za stvaranje liste u CSS-u. Bez jQueryja, bez CSS3 - samo dobri stari CSS za više preglednika. Primjer je prilično jednostavan, tako da iskusni drugovi možda neće biti zainteresirani. Implementirat ćemo padajući popis s društvenim gumbima.
Dakle, da ne pričamo dugo, prijeđimo odmah na stvar
HTML
Podijelite ovu objavu
- Cvrkut
- Google Plus
- U kontaktu s
- RSS
Namjerno izostavljam općenite točke, kao što je uključivanje stilova, kako kod ne bi rastao. Na dnu stranice dat ću poveznicu na izvorni kod - sve je tu.
Ono što imamo u HTML-u je običan popis i neobičan naslov. Njegova neobičnost je u tome što je napravljen hipervezom, koja vam omogućuje praćenje događaja :lebdjeti, odnosno usmjeravanje. Padajući popis radit će kada lebdite iznad naslova.
css
Prvo, pogledajmo osnovne stilove padajućeg popisa. Pokušao sam komentirati svaki red koda da bude jasnije:
/*Poništi padding*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Stil okvira pri lebdenju*/ .droplink:hover( visina:auto; boja pozadine:#3E403D; obrub:solid 1px #3A3C39 ) /*Naslov u normalnom stanju*/ .droplink h3 a( poravnanje teksta:centar ;width:100%;display:block;padding:12px 0px;color:#999;text-decoration:none ) .droplink h3 a img(border:none) /*Stil za lebdeće zaglavlje*/ .droplink:hover h3 a (boja:#FFF; težina-fonta:podebljano; pozicija:apsolutno)
Ovdje nema ništa posebno, naznačili smo veličinu i stil bloka, stil naslova, a za oba elementa - njihove stilove kada lebdite iznad. Samo naprijed:
/*Sakrij popis bez lebdenja*/ .droplink ul( list-style:none; display:none ) /*Prikaži popis dok lebdi*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li(prikaz:blok)
Ovaj kod je već zanimljiviji i pokazuje kako se ponaša padajući popis kada lebdi iznad. Isplati se u normalnom stanju prikaz: nijedan tj. ne prikazuje se. Dok lebdimo, prikazujemo ga kao blok. To je sva tajna. Sada malo ukrasimo elemente liste i ubacimo ikone:
/*Stil stavke popisa*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Stil elementa pri lebdenju*/ .droplink li a:hover( background-color:#999 ) /*Ikone*/ .facebook a (pozadinska slika :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
To je, zapravo, sve. Padajući popis je spreman i izgleda dovoljno lijepo. Možete rasporediti elemente po vlastitom nahođenju, dodati zaobljene kutove i druge "napravice".
Ako želite da se popis "preklapa" s tekstom ispod njega dok lebdite, odvratite pogled z-indeks.
Ako nešto nije jasno ili ne radi, pitajte u komentarima ili koristite gumb "Pošalji poruku", tu je —>