Përshëndetje, të dashur lexues të faqes së blogut. Sot dua të flas për diçka si format HTML. Cilido qoftë motori i faqes suaj (cms), ai patjetër do të përdorë forma në një formë ose në një tjetër, të krijuar duke përdorur etiketat Form dhe Input, si dhe atributet dhe parametrat Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .
Epo, ju gjithashtu mund t'i shtoni kësaj elemente për krijimin e listave rënëse dhe fushave të tekstit - Select, Option, Textarea, Label, Fieldset, Legend.
Pse nevojiten formularët dhe si funksionojnë ato në faqet moderne të internetit?
I njëjti varg kërkimi i faqes () krijohet duke përdorur këto etiketa dhe do të kërkohet një kërkim në projektin tuaj. Prandaj, të kuptuarit se si ato janë të strukturuara dhe funksionojnë nuk do t'ju pengojë aspak për të punuar me sukses në dizajn dhe nuk do të jetë e tepërt nëse e promovoni vetë.
Pra, duke justifikuar nevojën për të studiuar këto elemente, mendoj se nuk duhet të lindin më pyetje, ndaj është koha që të kalojmë drejtpërdrejt në studimin e opsioneve të tyre të mundshme.
Po, dua t'ju kujtoj gjithashtu se ne kemi shqyrtuar tashmë shumë materiale në temën e gjuhës së shënjimit të hipertekstit, për shembull, tre ) dhe .
Në thelbin e tyre, formularët përbëhen nga elementë, për krijimin e të cilave futen etiketa të ndryshme nga etiketat Form brenda kontejnerit kryesor - Checked, Value, Checkbox, Radio, Checkbox, Submit, etj. Thjesht duhet të vendosim kodin e tij në çdo të përshtatshme vendoseni në shabllonin e faqes, duke treguar përdorimin e etiketave dhe atributeve të tyre se si duhet të duket.
Kjo mund të jetë një fushë teksti me një buton për të paraqitur pyetjen e futur, zgjedhje me butona radio (ku mund të lini të shtypur vetëm një nga butonat e dhënë), fusha të shumta teksti me një buton për të paraqitur() dhe shumë më tepër.
Për shembull, në rastin e "kërkimit", duke përdorur atributin "Vlera", mund të specifikoni se çfarë saktësisht do të shkruhet në butonin që ndodhet pranë fushës për të futur një pyetje. Të dhënat e futura në formularë duhet të përpunohen më tej në një farë mënyre.
Për shembull, në rastin e reagimeve, përdoruesi, pasi të plotësojë fushën me emrin e tij, të futë postën elektronike të tij dhe tekstin e mesazhit dhe më pas të klikojë në butonin dërgoni, do të ketë të drejtë të shpresojë që të dhënat nga formulari do të dërgohet në E-mailin e autorit të faqes. Por, për fat të keq, nuk është e mundur të zbatohet kjo duke përdorur vetëm një gjuhë shënjimi të hipertekstit ().
Për këto qëllime, do t'ju duhet një program i posaçëm përpunues, i cili pasi përdoruesi të klikojë në butonin e dërgimit, do të marrë të gjitha të dhënat nga fushat e komenteve dhe do t'ia dërgojë me email pronarit të burimit. Duhet të specifikoni se cili program do ta bëjë këtë vetë duke përdorur atributin Veprim.
Në mënyrë tipike, programi i përpunimit është një skrip i shkruar në PHP. Prandaj, në atributin Action të etiketës Form, do t'ju duhet të specifikoni shtegun për në skedarin e këtij skripti të vendosur në serverin tuaj pritës. Më lejoni t'ju jap një shembull të abonimit në burimin RSS të blogut tim nëpërmjet postës elektronike:
Mund të duket pak e paqartë në fillim, por mendoj se gjithçka do të bëhet më e qartë ndërsa historia vazhdon.
Etiketat e formularit dhe të hyrjes për krijimin e butonave, kutive të kontrollit dhe butonave të radios
Çdo formë duhet të jetë e mbyllur në etiketat hapëse dhe mbyllëse Forma. Ky është një lloj enë për krijimin e tyre. Ky etiketë ka një numër atributesh të kërkuara dhe opsionale:
- Emri – një emër unik që duhet të specifikohet nëse skedari Html ku po bëni diçka do të përdorë disa forma ueb
- Veprim - një atribut i kërkuar që tregon rrugën drejt skriptit në të cilin të dhënat prej tij do të transferohen për përpunim të mëtejshëm
- Metoda - me të mund të ndryshoni metodën e transferimit të të dhënave nga kjo formë ueb në skriptin e skedarit mbajtës. Nëse nuk e specifikoni atë, atëherë metoda Get do të përdoret si parazgjedhje, e cila, në fakt, është menduar kryesisht për variabla dhe mesazhe të shkurtra, dhe gjithashtu transmetimin e hapur të të dhënave përmes shiritit të adresave të shfletuesit. Për të transferuar të dhënat e formularit në skriptin e mbajtësit, është akoma më mirë të përdoret Metoda POST, i krijuar posaçërisht për transmetimin e mesazheve me tekst në mënyrë private
Le të shohim etiketat e mbetura që ju lejojnë të krijoni një shumëllojshmëri formash në internet. Më i gjithanshëm është Input. Brenda tij duhet të shkruhet atributi Type, i cili përcakton saktësisht se çfarë do të jetë forma HTML e krijuar duke përdorur këtë etiketë.
Duke përdorur Input dhe Type mund të krijoni elementët e mëposhtëm:
- fusha teksti me një rresht (Type = "Text")
- fushat për futjen e një fjalëkalimi (Type = "Fjalëkalimi")
- kutitë e kontrollit (Type = "Kutia e kontrollit")
- butonat e radios (Type = "Radio")
- fushat e fshehura (Type="Hidden")
- butona të rregullt (Type = "Button")
- butonat për dërgimin e të dhënave te mbajtësi (Type="Submit")
- butonat për sjelljen e formularit të uebit në gjendjen e tij origjinale (Type="Rivendos")
- fushat për ngarkimin e skedarëve në server (Type="File)
- butona me një imazh (Type = "Image")
Hyrja nuk ka një etiketë mbyllëse. Si do të duket saktësisht një formë ueb e krijuar duke përdorur atë varet tërësisht nga parametri i specifikuar në atributin Type. Nëse Lloji nuk është specifikuar, një fushë teksti do të krijohet si parazgjedhje.
Shembuj të formave të krijuara në Input me vlera të ndryshme për Type
Atribute të tjera të etiketës hyrëse dhe shembuj të përdorimit të tyre
Le të shohim se për çfarë nevojiten atributet e tjera:
- Emri – nëse të dhënat duhet të dërgohen në skriptin e programit mbajtës, atëherë duhet të specifikoni një parametër për atributin Emri. Nën këtë emër, të dhënat e dërguara nga formulari do të shfaqen në programin e përpunuesit të informacionit.
- Madhësia - përdoret për të vendosur madhësinë e fushës së formës së internetit që po krijohet. Vlera tregohet në numrin e karaktereve që mund të përshtaten në këtë fushë. Nëse Madhësia nuk është e specifikuar, gjerësia do të jetë e paracaktuar në 24 karaktere
- Maxlength - si parazgjedhje, numri i karaktereve që mund të futen në një formë Html nuk është i kufizuar, por duke përdorur Maxlength mund të vendosni këtë kufizim. Nuk do të mund të futni më shumë karaktere sesa tregohen në fushë.
- Vlera - mund ta përdorni për të specifikuar se çfarë saktësisht do të shkruhet si parazgjedhje në fushë ose në butonin e dorëzimit të të dhënave
- E zgjedhur është një atribut i flamurit që mund të futet në butonat ose kutitë e kontrollit të hyrjes për radio. Në këtë rast, ky buton radio ose kuti zgjedhjeje do të jetë aktive kur të ngarkohet faqja me formularin e internetit (ata tashmë do të kenë një shenjë kontrolli)
Tani le të shohim gjithçka shembuj të formave me Input. Pamja e fushës së tekstit është e ngjashme me pamjen e fushës së futjes së fjalëkalimit, kështu që le të shqyrtojmë vetëm opsionin e krijimit të një Teksti, për shembull, për të futur një adresë emaili:
Tani le të shohim krijimin e një formulari në internet me butonat e radios (Radio):
Vini re se kjo formë përdor dy herë etiketën Input, një herë për të krijuar secilin nga dy butonat e radios. Për më tepër, secila prej tyre përmban atributin Emri me të njëjtën vlerë (rezultat), dhe vlera e vlerës është e ndryshme (PO dhe JO).
Kjo do të thotë se gjatë përpunimit të tij, nëse zgjidhet ndonjë nga ndërprerësit, do të dërgohet një variabël, emri i së cilës shkruhet në Name, por vlera e kësaj ndryshore do të varet nga cili switch është zgjedhur.
Le të shohim një shembull të krijimit të një formulari në internet me kutitë e kontrollit:
Kutitë e kontrollit ndryshojnë nga butonat e radios duke ju lejuar të zgjidhni disa opsione në të njëjtën kohë. Emri përdoret për të përcaktuar në skedarin e mbajtësit se në cilën kuti të kontrollit vendosen kutitë e kontrollit dhe Vlera specifikon vlerën që do t'i dërgohet mbajtësit (nëse Vlera nuk është specifikuar, atëherë teksti që ndodhet pranë kësaj kutie të kontrollit do t'i dërgohet mbajtësit ).
Zgjidh, Option, Textarea, Label, Fieldset, Legend - lista rënëse, zona teksti dhe elementë të tjerë të formës së internetit
Për të filluar, do të doja t'ju kujtoja pak se çfarë janë në të vërtetë format e internetit dhe pse nevojiten në faqet e internetit. Ato janë krijuar kryesisht për të replikuar elementet që gjenden në çdo sistem operativ në një formë miqësore për përdoruesit: butonat, fushat e futjes së tekstit, listat rënëse, kutitë e kontrollit, çelësat dhe të ngjashme.
Të gjithë përdoruesit, pa ndonjë shpjegim shtesë, kuptojnë qëllimin e këtyre elementeve dhe nëse shohin një buton të formularit HTML, kuptojnë se duhet të klikojnë mbi të.
Për më tepër, të gjithë elementët e tij përbërës (si Select, Option, Textarea, Label, Fieldset, Legend) janë tashmë boshllëqe të kompletuara (kontejnerë), për t'i futur të cilat thjesht duhet të përdorni etiketën e dëshiruar me atributet dhe parametrat e nevojshëm.
Vetë shfletuesit dinë të shfaqin këtë apo atë element të formës së internetit. Vërtetë, opsionet e shfaqjes për të njëjtin element në shfletues të ndryshëm mund të ndryshojnë pak nga njëri-tjetri, por, si rregull, jo dukshëm.
Se. rezulton se format e uebit në Html janë një përpjekje për të transferuar çelësin elementet e përdorur në çdo sistem operativ, në faqet e internetit. Por pse mund të nevojiten në faqet e sajtit?
Në parim, për të njëjtin qëllim që elementë të ngjashëm përdoren në sistemet operative - transferimi i të dhënave nga përdoruesi. Në rastin e formularëve, të dhënat nga përdoruesi transferohen në server, ku përpunohen nga një program i veçantë (gjuha e shënjimit të hipertekstit, për fat të keq, nuk lejon përpunimin e të dhënave).
Megjithëse, të dhënat mund të dërgohen jo vetëm në server, por gjithashtu, për shembull, me email në adresën e specifikuar në atributin Veprim të etiketës Form. Kur dërgoni të dhëna nga Html në E-mail, përdoruesi që plotëson fushat, pasi të klikojë butonin dërgoni të dhënat, do të nisë programin e paracaktuar të postës që përdoret në kompjuterin e tij.
Etiketa hapëse e Formës në këtë rast duhet të duket diçka si kjo:
Siç mund ta shihni, klikimi në tekst për të aktivizuar këtë element është i padobishëm - duhet të klikoni vetë mbi të. Kjo është pikërisht gjendja që është krijuar për të korrigjuar etiketa Label. Kjo ju lejon të bëni tekstin pranë elementit të formës së internetit të klikueshëm, gjë që është padyshim do të përmirësojë përdorshmërinë.
Por si të lidhni elementin e formës Html dhe tekstin? Për ta bërë këtë, duhet të shtoni një ID me një parametër unik në atribut dhe teksti duhet të rrethohet nga hapja dhe mbyllja e etiketave Label. Dhe kjo nuk është e gjitha. Në etiketën Label hapëse duhet të përfshini atributin For, parametri i të cilit duhet të jetë saktësisht i njëjtë me atë të atributit ID në etiketën Html të elementit të formës. Rezulton diçka si kjo:
Siç mund ta shihni, tani, falë përdorimit të Label, elementët e formës së internetit mund të aktivizohen jo vetëm duke klikuar mbi të, por edhe duke klikuar në tekstin që ndodhet pranë tij.
Fieldset dhe Legend - ndarja e formës në pjesë
Ju ndoshta keni parë shpesh që format e mëdha në Html ndahen në grupe (Fieldset), të cilat janë të rrethuara nga një kornizë dhe secili grup i tillë ka titullin e tij (Legjenda). Kjo zbatohet duke përdorur vetëm dy etiketa: Fieldset dhe Legend. Ata janë të çiftëzuar, d.m.th. Ata duhet të kenë një hapje dhe një mbyllje.
Pra, për të krijuar një grup pjesësh përbërëse, duhet t'i mbyllni të gjitha këto pjesë në etiketat e hapjes dhe mbylljes së Fieldset. Dhe për të vendosur një titull (Legjendë) për këtë grup, duhet që menjëherë pas hapjes Fieldset të shkruani një konstruksion të një Legjende hapëse dhe mbyllëse, midis të cilave duhet të futni tekstin e titullit të grupit.
Këtu është një shembull i krijimit të grupeve duke përdorur Fieldset dhe Legend:
Paç fat! Shihemi së shpejti në faqet e faqes së blogut
Ju mund të jeni të interesuar
Zgjidh, Option, Textarea, Label, Fieldset, Legend - Etiketat Html për formën e listave rënëse dhe fushat e tekstit
Listat në kodin Html - etiketat UL, OL, LI dhe DL
MailTo - çfarë është dhe si të krijoni një lidhje në Html për të dërguar një email
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e hijeve RGB në tabela, prodhimi Yandex dhe programe të tjera
Çfarë është gjuha e shënjimit të hipertekstit Html dhe si të shikoni një listë të të gjitha etiketave në validatorin W3C
Si të futni një lidhje dhe një fotografi (foto) në etiketat HTML - IMG dhe A
Tabelat në Html - Etiketat Table, Tr dhe Td, si dhe Colspan, Cellpadding, Cellspacing dhe Rowspan për krijimin e tyre
Fonti (Fytyra, Madhësia dhe Ngjyra), Blockquote dhe etiketat para - formatimi i tekstit të vjetër në HTML të pastër (nuk përdoret CSS)
Si të krijoni një hiperlink (A, Href, Target bosh), si ta hapni atë në një dritare të re në sit, dhe gjithashtu të bëni një foto një lidhje në kodin Html
Gjatë dy viteve të fundit, zhvillimi i aplikacioneve në internet (faqet e internetit) ka përparuar shumë dhe ajo që kemi përdorur për të krijuar një faqe interneti më herët është tashmë e vjetëruar ose janë shfaqur metoda më të fundit.
Më parë, për të krijuar një listë rënëse në html ( në Anglisht. - dropdown), sapo kemi përdorur
Sidomos për këtë artikull, gjeta 16 shembuj të ndryshëm që mund të jenë të dobishëm gjatë zhvillimit të faqes në internet. Dhe kështu le të fillojmë.
1. Lista e personalizuar
Shablloni HTML që ju lejon të personalizoni ngjyrat tuaja për listën rënëse.
2. Krijuar me CSS3/JavaScript
Shkruar në CSS3 dhe JavaScript. Lista e rregullt rënëse.
3. Stili: stacionet e metrosë
Lista e rrëshqitjes transparente me stilin e stacioneve të metrosë.
4. Pika. Shkruar në SCSS & jQuery
5. Për lëshimin e listave të gjata
Një zgjidhje e shkëlqyer për menytë e gjata me zbritje.
Një menu dropdown që është shkruar në CSS të pastër pa përdorur asnjë skript.
E përkryer për menutë anësore në një faqe interneti për të treguar vizualisht kategoritë në një faqe interneti.
8. Meny elegante e cilësimeve të përdoruesit
9. Lista Dropdown CSS3
E bërë në stilin UI, do t'i përshtatet stilit UI të faqes.
12. Zgjedhja e flamurit
Dropdown në stilin e përzgjedhjes së vendit.
13. HTML e thjeshtë, CSS dropdown
Shpresoj se ju ka pëlqyer përzgjedhja ime. Lini komente, ndani mendimin tuaj dhe dërgoni veprat tuaja!
Si të bëni një listë rënëse në html (zgjedhja TOP 16) nga bologer
Menyja horizontale rënëse përdoret për të organizuar strukturën e navigimit të faqes. Numri optimal i niveleve të foleve është një ose dy. Sa më pak nivele të bashkëngjitjeve, aq më e lehtë është për një vizitor të sajtit të gjejë informacionin që i nevojitet. Si të krijoni një menu të rregullt horizontale përshkruhet në detaje në.
Si të krijoni një menu horizontale rënëse
1. Shënimi HTML dhe stilet bazë për një meny rënëse me një nivel foleje
Shënimi HTML i një menyje rënëse horizontale ndryshon nga një menu e rregullt në atë që lidhet me artikullin e dëshiruar të listës
- ose<оl> .
Për të pozicionuar nënmenynë në lidhje me menynë kryesore, deklarohen stilet e mëposhtme:
— për një element të listës në të cilin është vendosur një listë rënëse: li (pozicioni: relative;) ;
— për menynë rënëse ul (pozicioni: absolute;) , si dhe vlerat majtas dhe lart.
Për qartësi dhe lehtësi formatimi, le të shtojmë menynë kryesore të klasës në menunë kryesore dhe nënmenynë në menunë rënëse.
Ka disa mënyra për të fshehur një menu drop-down:
1) shfaqja: asnjë;
2) dukshmëria: e fshehur;
3) errësirë: 0;
4) transformimi: scaleY(0);
5) duke përdorur bibliotekën jQuery.
Metoda 1. (ekrani: asnjë;)
Menyja rënëse fshihet duke përdorur .submenu (ekran: asnjë;) , në hover shfaqet duke përdorur .topmenu li:hover .submenu (shfaq: bllok;) .
Metoda 2. (dukshmëria: e fshehur;)
Menuja fshihet duke përdorur nënmenunë . (dukshmëria: e fshehur;) , dhe shfaqet duke përdorur .topmenu li:hover .nënmenu (dukshmëria: e dukshme;) .
Metoda 3. (opaciteti: 0;)
Menyja fshihet duke përdorur nënmenunë . (opacity: 0;) dhe shfaqet duke përdorur .topmenu li:hover .submenu (opacity: 1;) . Për të parandaluar shfaqjen e menysë kur rri pezull mbi zonën ku ndodhet, shtoni dukshmërinë: e fshehur; , dhe kur rri pezull, ndryshoje në dukshmëri: e dukshme; .
Metoda 4. (transformimi: scaleY(0);)
Menuja fshihet duke përdorur nënmenunë . (transformimi: scaleY(0);) dhe shfaqet duke përdorur .topmenu li:hover .nënmenu (transformimi: scaleY(1);) . Meqenëse transformimi i elementit të paracaktuar ndodh nga qendra, ju duhet të shtoni për nënmenunë . (transform-origjina: 0 0;) , d.m.th. nga këndi i sipërm majtas.
Metoda 5: Përdorimi i jQuery
$(".pesë li ul").hide(); // fsheh menynë rënëse $(".five li:has(".nënmenu")").hover(function())($(".five li ul").stop().fadeToggle(300) ;) /* zgjidhni një element të listës që përmban një element me klasën .nënmenu dhe shtoni një funksion hover në të që tregon dhe fsheh menynë rënëse */);2. Menyja rënëse 3D
Efektet interesante mund të krijohen duke përdorur transformimet CSS3, për shembull, duke bërë që një menu të shfaqet nga thellësia e ekranit.
* ( madhësia e kutisë: kutia kufitare; ) trupi ( margjina: 0; sfondi: gradient radial (#BFD6E2 1 px, rgba (255,255,255,0) 2 px); madhësia e sfondit: 10 px 10 px; ) nav ul ( stili i listës : asnjë; margjina: 0; mbushje: 0; ) nav a ( shfaqja: bllok; dekorimi i tekstit: asnjë; skica: asnjë; tranzicioni: 0.4s ease-in-out; ) .topmenu ( dukshmëria e pasme: e fshehur; sfondi : rgba(255,255,255,.8); ) .topmenu > li ( shfaqja: inline-block; pozicioni: relative; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; lartësia: 70px; lartësia e linjës: 70 px; mbushja: 0 30 px; pesha e shkronjave: bold; ngjyra: #003559; transformimi i tekstit: shkronja të mëdha; ) .down:after (përmbajtja: "\f107"; margjina majtas: 8 px; font-familje : FontAwesome; ) .topmenu li a:hover ( ngjyra: #E6855F; ) .nënmenu ( sfondi: i bardhë; kufiri: 2px solid #003559; pozicioni: absolut; majtas: 0; dukshmëria: e fshehur; errësirë: 0; z-indeksi : 5; gjerësia: 150 pikselë; transformimi: perspektiva (600 pikselë) rrotullimiX(-90 gradë); origjina e transformimit: 0% 0%; tranzicioni: 0,6s lehtësi për hyrje; ) .topmenu > li:hover .nënmenu( dukshmëria: e dukshme; errësirë: 1; transformimi: perspektiva (600px) rotateX(0deg); ) .nënmenu li a ( ngjyra: #7f7f7f; madhësia e shkronjave: 13 px; lartësia e rreshtit: 36 px; mbushja: 0 25 px; font-familja: "Kurale", serif; )
3. Menyja rënëse e zgjerueshme me logo
Në këtë shembull, pjesa e sipërme e faqes përmban logon dhe navigimin e faqes. Logoja mund të jetë një foto ose tekst. Menyja rënëse zgjerohet gradualisht nga poshtë artikullit të listës kryesore duke përdorur funksionin e transformimit CSS3.
4. Zgjerimi i menysë rënëse
Një shembull tjetër për një menu rënëse. Efekti i zmadhimit kur shfaqet menyja realizohet duke reduktuar madhësinë fillestare.nënmenu (transform: scale(.8);) , në hover madhësia rritet në.topmenu > li:hover .submenu (transform: scale(1);) .
* ( madhësia e kutisë: kutia kufitare; ) trupi ( margjina: 0; sfondi: url (https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( sfondi: i bardhë; ) nav ul ( stili i listës: asnjë; margjina: 0; mbushja: 0; ) nav a (dekorimi i tekstit: asnjë; skica: asnjë; shfaqja: bllok; tranzicioni: .4s ease-in-out;) .topmenu ( text-align: qendër; mbushje: 10 px 0; ) .topmenu > li (ekrani: inline-block; pozicioni: relative; ) .topmenu > li:after (përmbajtja: ""; pozicioni: absolute; djathtas: 0; gjerësia: 1px; lartësia: 12px; sfondi: #d2d2d2; sipër: 16px; hije e kutisë: 4px -2px 0 #d2d2d2; transformim: rrotullo(30 gradë); ) .topmenu > li:last-child:after ( sfond: asnjë; kuti -shadow: asnjë; ) .topmenu > li > a ( mbushje: 12px 26px; ngjyra: #767676; transformimi i tekstit: shkronja të mëdha; pesha e shkronjave: bold; hapësira e shkronjave: 1px; font-familja: "Exo 2", sans-serif; ) .topmenu li a:hover ( ngjyra: #c0a97a; ) .nënmenu ( pozicioni: absolute; majtas: 50%; sipër: 100%; gjerësia: 210 px; margjina majtas: -105 px; sfondi: #fafa ; kufiri: 1px solid #ededed; z-indeksi: 5; dukshmëria: e fshehur; errësirë: 0; transformimi: shkalla (.8); tranzicioni: .4s lehtësi-në-jashtë; ) .nënmenu li a ( mbushje: 10 px 0; margjina: 0 10 px; kufiri-fund: 1px solid #efefef; madhësia e shkronjave: 12 px; ngjyra: #484848; font-familja: "Kurale", serif; ) .topmenu > li:hover .nënmenu (dukshmëria: e dukshme; opaciteti: 1; transformimi: shkalla (1); )
5. Menyja rënëse tërheqëse
Menyja horizontale me mini-animacion: kur kaloni pezull mbi lidhjet e menysë së sipërme, shfaqet një rreth i vogël, i cili gjithashtu shoqëron pamjen e menysë rënëse.
@import url("https://fonts.googleapis.com/css?.jpg); pozicioni i sfondit: qendra qendrore; përsëritja e sfondit: pa përsëritje; madhësia e sfondit: kopertina; lartësia: 100vh; pozicioni: relative; ) trupi:para (përmbajtja: ""; pozicioni: absolut; majtas: 0; poshtë: 0; lartësia: 100%; gjerësia: 100%; sfondi: gradient linear (45 gradë, rgba (0,0,0,0) , rgba(255,255,255,.8)); ) nav ( rreshtimi i tekstit: në qendër; mbushja: 40 px 0 0; ) nav ul (stili i listës: asnjë; margjina: 0; mbushja: 0; ) nav a ( dekorim i tekstit : asnjë; ekrani: bllok; ngjyra: #222; ) .topmenu > li (ekrani: inline-block; pozicioni: relative; ) .topmenu > li > a (pozicioni: relative; mbushja: 10px 15px; font-familje: " Script Kaushan", kursive; madhësia e shkronjave: 1.5em; lartësia e rreshtit: 1; hapësira e shkronjave: 3 px; ) .topmenu > li > a:para (përmbajtja: ""; pozicioni: absolute; indeksi z: 5; majtas: 50%; sipër: 100%; gjerësia: 10 pikselë; lartësia: 10 pikselë; sfondi: i bardhë; rrezja e kufirit: 50%; transformimi: përkthe (-50%, 20 pikselë); opaciteti: 0; tranzicioni: 0,3 s; ) .topmenu li:hover a:fore ( transform: translate(-50%, 0); errësirë: 1; ) .nënmenu ( pozicioni: absolute; z-indeksi: 4; majtas: 50%; lart: 100%; gjerësia: 150 px; mbushja: 15 px 0 15 px; margjina-lart: 5 px; sfondi: i bardhë; rreze-kufi: 5px; kuti-hije: 0 0 30 px rgba(0,0,0,.2); madhësia e kutisë: kutia e kufirit; dukshmëria: e fshehur; opaciteti: 0; transformimi: përkthe (-50%, 20 px); tranzicioni: .3 s ; ) .topmenu > li:hover .nënmenu ( dukshmëria: e dukshme; errësirë: 1; transformimi: translate(-50%, 0); ) .nënmenu a ( font-familje: "Libre Baskerville", serif; madhësia e shkronjave: .
Në këtë artikull, ne do të shikojmë elementët që ju lejojnë të krijoni lista rënëse, të mësoni se si të formoni grupe në këto lista, të shikoni se si të çaktivizoni artikujt dhe madje edhe grupet e listave, të njiheni me një element që ju lejon të krijoni një fushë teksti me shumë rreshta, të cilën më vonë mund ta përdorni brenda formave HTML (element
Gjithashtu, brenda formularit vendosëm një buton që shërben për dërgimin e formularit (element me butonin shkruani "submit form": type = "submit" ).
Rezultati i shembullit tonë:
Këshillë mjeti për zonën e tekstit
Dhe kështu do të shikojmë shembullin përfundimtar dhe do të kalojmë në detyrën praktike të artikullit në këtë libër shkollor.
Falë atributit (etiketa HTML
Teksti i këshillës së veglave fshihet kur përdoruesi fut një vlerë (çdo karakter) në fushën e tekstit; nëse hiqet, këshilla e veglave do të shfaqet përsëri.
Le të shohim një shembull përdorimi:
type = "submit" name = "submitInfo" value = "submit" > !}
Në këtë shembull, ne kemi krijuar dy zona teksti (elementi
Vini re se nëse një fushë teksti është vetëm për lexim, përmbajtja nuk mund të ndryshohet, por përdoruesi mund të lundrojë, të zgjedhë dhe të kopjojë përmbajtjen.
Gjithashtu, brenda formularit vendosëm një buton që shërben për dërgimin e formularit (element me butonin shkruani "submit form": type = "submit" ).
Rezultati i shembullit tonë:
Pyetje dhe detyra mbi temën
Përpara se të kaloni në temën tjetër, plotësoni detyrën praktike:
- Duke përdorur njohuritë që keni marrë, krijoni formularin e mëposhtëm të shpalljes së punës:
Para se të filloni detyrën, hapni shembullin në një dritare të re dhe shqyrtoni me kujdes formularin për të përsëritur të gjitha pikat e tij. Për të përfunduar detyrën do t'ju duhet njohuri nga artikulli. Nëse e keni humbur, kthehuni për ta studiuar.
Pasi të keni përfunduar ushtrimin, inspektoni kodin e faqes duke hapur shembullin në një dritare të veçantë për t'u siguruar që keni bërë gjithçka në mënyrë korrekte.
Sot dua të paraqes një "recetë" të vogël për krijimin e një liste në CSS. Pa JQuery, pa CSS3 - thjesht CSS e mirë e vjetër e ndër-shfletuesit. Shembulli është mjaft i thjeshtë, kështu që shokët me përvojë mund të mos jenë të interesuar. Ne do të zbatojmë një listë rënëse me butona social.
Pra, le të mos flasim për një kohë të gjatë, le të kalojmë direkt në temë
HTML
Shpërndaje këtë postim
- Cicëroj
- Google Plus
- Në kontakt me
- RSS
Unë me dashje heq pikat e përgjithshme, të tilla si përfshirja e stileve, në mënyrë që kodi të mos rritet. Në fund të faqes do të jap një lidhje me burimet - gjithçka është atje.
Ajo që kemi në HTML është një listë e rregullt dhe një kokë e pazakontë. E pazakonta e saj është se është bërë me një hiperlidhje, e cila ju lejon të gjurmoni ngjarjen : rri pezull, domethënë udhëzim. Lista e lëshimit do të funksionojë kur rri pezull mbi titull.
CSS
Së pari, le të shohim stilet bazë të një liste rënëse. Unë u përpoqa të komentoja çdo rresht kodi për ta bërë më të qartë:
/*Rivendos mbushjen*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Wrapper bazë*/ .droplink ( gjerësia:200px; pozicioni:absolute; margjina:10px 0 0 25 pikselë ) /* Stili i bllokut të pezulluar*/ .droplink:hover(lartësia:auto; ngjyra e sfondit:#3E403D; kufiri: solid 1px #3A3C39 ) /*Titulli në gjendje normale*/ .droplink h3 a( rreshtimi i tekstit: qendër ; gjerësia:100%; ekrani:blloku; mbushja:12px 0px; ngjyra:#999; dekorimi i tekstit:asnjë ) .droplink h3 a img(border:asnjë) /*Stil për titullin e pezullimit*/ .droplink:hover h3 a (ngjyra:#FFF; pesha e shkronjave: bold; pozicioni: absolut)
Nuk ka asgjë të veçantë këtu; ne treguam madhësinë dhe stilin e bllokut, stilin e kokës dhe për të dy elementët, stilet e tyre kur rri pezull kursorin. Shkoni përpara:
/*Fshih listën pa hover*/ .droplink ul( list-style:asnjë; display:asnjë ) /*Shfaq listën në hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li (shfaq: bllok)
Ky kod është më interesant dhe tregon se si sillet listë rënëse kur rri pezull kursorin. Ne gjendje normale kushton shfaqja: asnjë, pra nuk shfaqet. Kur rri pezull, ne e shfaqim atë si një bllok. Ky është i gjithë sekreti. Tani le të dekorojmë pak elementët e listës dhe të vendosim ikona:
/*Stili i artikullit të listës*/ .droplink li a( mbushje: 5px 12px 4px 34px; margjina:1px; ngjyra e sfondit:#484A47; shfaqja:blloku; ngjyra:#FFF; dekorimi i tekstit: asnjë; madhësia e shkronjave: 12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Element hover style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image : url("ikona/facebook.png")) .twitter a (background-image:url("ikona/twitter.png")) .vk a (background-image:url("ikona/vk.png")) . rss a (background-image:url("ikona/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
Kjo është e gjitha, në fakt. Lista rënëse është gati dhe duket mjaft bukur. Ju mund t'i dizajnoni elementët sipas gjykimit tuaj, të shtoni qoshe të rrumbullakosura dhe këmbanat dhe bilbilat e tjera.
Nëse dëshironi që lista të "mbivendosë" tekstin poshtë saj kur rri pezull, shiko anash z-indeksi.
Nëse diçka është e paqartë ose nuk funksionon, pyesni në komente ose përdorni butonin "Dërgo mesazh", është aty —>