elements, ja vēlaties pilna platuma fona krāsu: Horizontālās navigācijas joslas piemēri Izveidojiet pamata horizontālo navigācijas joslu ar tumšu fona krāsu un mainiet saišu fona krāsu, kad lietotājs novieto peli virs saitēm:
piemērs Ul(
li (
li a (
/* Mainiet saites krāsu uz #111 (melns), novietojot kursoru */
Pamēģini pats" Aktīva/pašreizējā navigācijas saite Pievienojiet pašreizējai saitei "aktīvu" klasi, lai lietotājs varētu zināt, kurā lapā viņš atrodas:
Ar peles labo pogu noklikšķiniet uz Izlīdzināt saites
Šajā apmācībā mēs izveidosim vietnes navigācijas sistēmu, izmantojot tikai CSS3. Ideja ir sakārtot vairākus slaidus vai satura slāņus, kas tiks rādīti un paslēpti, izmantojot pseidoklase:target . Izmantojot CSS pārejas, varat izveidot lieliskus vizuālos efektus slaidu parādīšanai. Arī mūsu navigācija būs adaptīva.
Piezīme: nodarbības rezultāts pilnībā darbojas pārlūkprogrammās, kas atbalsta CSS3.
HTML marķējums
Katram atsevišķam slaidam, kurā būs vai nu saišu kopa, vai informācija, vai apakšslaids, mēs izveidosim div elementu ar klasi cn-slaids . Apakšslaidiem, kuros ir divas saites katrā rindā, mēs izmantosim citu klasi cn-slide-sub . Informācijas slaidam vienkārši būs klase cn-slaids .
Mūsu piemērā būs viens galvenais slaids, kurā ir trīs apakšslaidi. Katrā apakšslaidā ir četras saites, kas norāda uz informācijas slaidu. Visa struktūra būs viena galvenā slaida, trīs apakšslaidu un divpadsmit slaidu konstrukcija ar informāciju:
Apraksts
Filozofija Zinātne Literatūra
Filozofija Atpakaļ Epistemoloģija Metafizika Estētika Ētika
Epistemoloģija Atpakaļ
Turiet kreiso taustiņu, lai redzētu fonu
Metafizika
. . .
Estētika
. . .
Ētika
. . .
. . .
Apakšslaidos un informācijas slaidos ir saites uz iepriekšējo slāni.
CSS
Galvenajam konteineram ir min-width un max-width rekvizīti, kas ļauj mums izmantot procentus, lai iestatītu platumu, nodrošinot, ka elementtīkls nekļūst pārāk liels vai mazs:
Cn konteiners (platums: 60%; minimālais platums: 300 pikseļi; maksimālais platums: 820 pikseļi; piemale: 10 pikseļi automātiski 0 automātiski; teksta līdzināšana: pa kreisi; pozīcija: relatīva; )
Galvenais nosaukums tiks novietots absolūti un parādīts, izmantojot efektus, kad slaids ir “atvērts”. Pārejas tiek iestatītas ar aizkavi, lai virsraksts tiktu parādīts pēc saišu bloku parādīšanas:
Cn-konteiners h2 (fontu saime: "PT Sans Narrow", "Arial Narrow", Arial, bez serifa; fonta variants: mazie burti; fonta svars: 700; krāsa: #fff; pozīcija: absolūts; z -indekss: 1000 1px rgba(255,255,255,0.8), 1px 1px rgba(0,0,0,0.2 font-size: 80px: 200px); 0; -webkit-transition: visas 0,3s lineāras 0,4s pārejas: visas 0,3s lineāras 0,4s ) .cn-container .cn-slide: target h2 (labais: 0px); necaurredzamība: 1;
Slaidi arī ir novietoti absolūti. Slaidu sākotnējā necaurredzamība ir iestatīta uz 0. Tie tiek rādīti tikai tad, ja tie ir mērķis:
Cn-slaids (teksta līdzinājums: centrā; pozīcija: absolūts; pa kreisi: -100%; polsterējums augšpusē: 80 pikseļi; piemale: 0 5%; platums: 90%; necaurredzamība: 0; -tīmekļa komplekta pāreja: pa kreisi 0,4 s lineāra , necaurredzamība 0,4s lineāra; -moz-pāreja: pa kreisi 0,4s lineāra, necaurredzamība 0,4s lineāra; -ms-pāreja: pa kreisi 0,4s lineāra; pāreja: pa kreisi 0,4 s lineāra, necaurredzamība 0,4 s lineāra.
Lūdzu, apskatiet citus demonstrācijas failus. Tas izmanto dažādas pāreju secības, lai radītu vizuālos efektus.
Tagad apskatīsim saišu elementus. Tiem būs viens fona attēls, kas vēlāk tiks ignorēts katram elementam. Noklusējuma fails ir 1.jpg. Novietojot peles kursoru virs elementa, mainīsies teksta ēnas un paša bloka krāsa:
Cn-slaids nav a(teksta līdzinājums: pa kreisi; displejs: bloķēt; fontu saime: "PT Sans Narrow", "Arial Narrow", Arial, bez serifa; fonta variants: mazie burti; fonta svars: 700 ; (0,0,0,0.1 fons: #fff url(../images/1.jpg) neatkārtojas centrs -webkit-background-size: 100% -moz-background-size; fona klips: padding-box: visi 0.3s atvieglo-in-out; -in-out pāreja: visi 0,3 s easy-in-out ). 1px rgba(0,0,0,0,1) krāsa: rgba(255,255,255,0,9);
Cn-slide-sub nav a(platums: 42%; displejs: iekļauts bloks; fonta izmērs: 40 pikseļi; )
Lai izveidotu nelielu atstarpi starp elementiem, iestatiet labo malu nepāra bērniem:
Cn-slide-sub nav a:nth-child (nepāra) (mala pa labi: 5 pikseļi; )
Informācijas slaids ir pāreju beigu punkts:
Cn-content(fons: #80B8CE url(../images/1.jpg) bez atkārtošanas centra centrs; -webkit-background-size: vāks; -moz-background-size: vāks; -o-background-size: vāka izmērs: vāks: 20px 5px;
Katrs satura apgabals atbilst saišu blokam. Fona attēls tiks iestatīts vēlāk:
Rindkopā būs arī pārejas. Izmantojot :active pseidoklasi, mēs ļaujam lietotājam apskatīt fonu, turot nospiestu peles kreiso pogu.
Cn-saturs: aktīvs p(necaurredzamība: 0; ) .cn-saturs p(līnijas augstums: 24 pikseļi; teksta ēna: 1px 1px 1px rgba(255,255,255,0,9); krāsa: rgba(103,59,77,0.9). ; polsterējums: 15 pikseļi 20 pikseļi; linear - ms-pāreja: necaurredzamība 0.3s - webkit-user-select: nav; -lietotāja atlase: nav;
Atgriešanās bultiņa izslīd pa kreisi. Sākumā tā pozīcija ir -100 pikseļi, un, kad slaids ir aktivizēts, tas tiek pārvietots uz 3 pikseļu pozīciju:
Cn-back( kontūra: nav; teksta atkāpe: -9000 pikseļi; platums: 49 pikseļi; augstums: 42 pikseļi; fons: caurspīdīgs url(../images/arrow.png) bez atkārtošanas centrā; pozīcija: absolūta; augšpusē: 22 pikseļi pa kreisi: -100 pikseļu necaurredzamība; ārā 0,5 s; pāreja: visi 0,4 s atvieglojumi — 0,5 s (pa kreisi: 3 pikseļi; necaurredzamība: 1; )
Tagad katram saites elementam definēsim fona attēlu. Ar ērta atribūtu atlasītāja palīdzību varam norādīt konkrētu elementu. Mēs aplūkojam atribūta href vērtību un nosakām attēlu:
/* Galvenie punkti */ .cn-slide nav a(fona attēls: url(../images/1.jpg); ) .cn-slide nav a(fona attēls: url(../images/2. jpg); .cn-slide nav a( background-image: url(../images/3.jpg); ) /* Punkti un apakšpunkti 1. slaidam*/ .cn-slide nav a, #slide- 1- 1 .cn-content ( fona attēls: url(../images/4.jpg); ) .cn-slide nav a, #slide-1-2 .cn-content ( fona attēls: url(. ./ images/5.jpg); ) .cn-slide nav a, #slide-1-3 .cn-content ( fona attēls: url(../images/6.jpg); ) .cn-slide nav a, #slide-1-4 .cn-content ( fona attēls: url(../images/7.jpg); ) /* Punkti un apakšpunkti 2. slaidam*/ .cn-slide nav a, # slaids-2- 1 .cn-content ( fona attēls: url(../images/8.jpg); ) .cn-slide nav a, #slide-2-2 .cn-content ( fona attēls: url (../ images/9.jpg) .cn-slide nav a, #slide-2-3 .cn-content ( fona attēls: url(../images/10.jpg); ) .cn- slaids nav a, #slide-2-4 .cn-content ( fona attēls: url(../images/11.jpg); ) /* Punkti un apakšpunkti 3. slaidam*/ .cn-slide nav a , #slaids-3- 1 .cn-saturs ( fona attēls: url(../images/12.jpg); ) .cn-slide nav a, #slide-3-2 .cn-content (fona attēls: url(../images/13.jpg); ) .cn-slide nav a, #slide-3-3 . cn-content ( fona attēls: url(../images/14.jpg); ) .cn-slide nav a, #slide-3-4 .cn-content ( fona attēls: url(../images/ 15.jpg);
Visbeidzot, mēs definējam vairākus multivides vaicājumus, lai izveidotu veidni mazos ekrānos. Vislabāk ir noteikt modeļa pārtraukuma punktus un noteikt noteikumus to maiņai. Mūsu gadījumā ir divi šādi punkti: 1060 px un 900 px. Mainīsim fonta lielumu, un apakšslaidos katrā rindā izmantosim tikai vienu elementu.
@multivides ekrāns un (maksimālais platums: 1060 pikseļi)( .cn-slide-sub nav a( font-size: 28px; ) ) @media screen un (maksimālais platums: 900 pikseļi)( .cn-container h2( font-size) : 48px; līnijas augstums: 95 pikseļi; .cn-slide nav a(font-size: 38px; ). slide-sub nav a:nth-child(nepāra)( margin-labais: 0px; ) )
