Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.
Šiame pranešime ketiname dirbti su išgalvotu projektu, kuriame bus sukurtas vienas „iPhone 4S“ produktų puslapis, o šiame projekte taip pat ketiname įgyvendinti metodus, kuriuos aptarėme ankstesniuose pranešimuose; elementas ir neigimo parinkiklis.
Pradėkime.
HTML5 žymėjimas
Pirma, turime sukurti html dokumentas su tokiu žymėjimu:
Apple iPhone 4 - 16GB
Pats nuostabiausias „iPhone“.
Greitesnis dviejų branduolių A5 lustas. 8MP kamera su visa nauja optika taip pat fotografuoja 1080p HD vaizdo įrašą. Ir įvesti Siri. Tai pats nuostabiausias „iPhone“.
Prekės savybės
8 megapikselių kamera su visu 1080p vaizdo įrašu
Siri balso asistentas
iCloud
Oro spausdinimas
Tinklainės ekranas
Nuotraukų ir vaizdo įrašų geografinis žymėjimas
Naudojame keletą naujų žymių iš HTML5 spec antraštė, hgroup, skaičius, skyrius, ir vieną, apie kurią kalbėjome anksčiau; informacija ir santrauka žyma.
Tačiau mes nenorime kasti šių žymių ne todėl, kad nenorime, bet tai yra pagrindinės temos, kurias galite lengvai rasti kitur. Taigi, jei esate tikrai naujas HTML5, rekomenduoju perskaityti šias šių žymų nuorodas; jie išsamiai paaiškino juos:
Pakalbėkime apie semantinį
HTML5 antraštės elementas
Hgroup elementas
HTML5 žymos nuoroda
Dabar pažiūrėkime į pirmą puslapį.
Na, tai atrodo protinga be jokių stilių. Pačioje viršuje yra antraštė, o tada ateina vaizdo dalis, aprašymas ir galiausiai mygtukas „Pirkti dabar“. Dabar pakalbėkime šį puslapį.
Stiliai
Pradėsime normalizuodami visus numatytuosius stilius naudodami šį stilių ir pridėsime gradiento foną html žyma.
Atminkite, kad mūsų produktų elementai yra suvynioti į a div su produktų klase. Taigi, mes norėtume centruoti vyną ir nustatyti, kad plotis būtų apie 650 pikselių.
.įvyniojimas plotis: 650px; marža: auto; paminkštinimas: 25px 0px;
Antraštės skyrius
Antraštės dalyje turime dvi antraštes h1 ir h4, todėl leiskite stiliui šiuos elementus.
Kaip įprasta, IE (Internet Explorer) visada sukelia tam tikrų problemų; jei atidarote bet kurią IE, kuri yra mažesnė nei 9, puslapis išliks nestandartinis.
Taip yra todėl, kad „Internet Explorer“ neatpažįsta naujų elementų (skyrius, antraštė, ir tt), todėl stilius, kuriuos mes nurodėme, nepavyko taikyti. Taigi, sekančiame žingsnyje mes spręsime šią problemą.
Naršyklės palaikymo testavimas
Mūsų ankstesnėje žinutėje mes išsprendėme naršyklės palaikymą detalės elementui, naudojant šį polifilą; kad jis galėtų veikti nepalaikomose naršyklėse. Tačiau šį kartą bandysime tai padaryti su „Modernizr“.
Oficialioje svetainėje, "„Modernizr“ yra atviro kodo „JavaScript“ biblioteka, kuri padeda sukurti naujos kartos HTML5 ir CSS3-tinklavietėse". Techniškai „Modernizr“ išbandys naršyklės paramą tam tikriems naujiems elementams ir funkcijoms. Jei parama nėra teikiama, mes turime suteikti atsarginę galią, jei tai būtų suteikiant skirtingus stilius ar teikiant polifilai. Tokiu atveju mes panaudosime „Modernizr“, kad galėtume išbandyti detales ir santraukos elementą.
Eikite į „Modernizr“ ir pereikite prie atsisiuntimo puslapio.
Atsisiuntimo puslapyje „Modernizr“ pateikia keletą parinkčių, kaip konfigūruoti biblioteką, todėl jūs turite pasirinkti tik tam tikras funkcijas, kurios jums tikrai reikalingos jūsų svetainėje. Šiuo atveju mums reikia:
HTML5Shiv 3.4
Pridėti CSS klases, ši funkcija automatiškai įtrauks klases į html žymą.
Modernizr.load,
eikite į bendruomenės priedų langelį ir pasirinkite element-details,
Susieti jį su „html“ ir iš naujo įkelti puslapį „Internet Explorer“. Dabar puslapis turėtų būti sukurtas, nes „Internet Explorer“ dabar gali atpažinti žymes.
Ir jei peržiūrėsite šaltinį arba patikrinsite elementą, rasite „html“ žymelę, kurioje nėra informacijos klasės; nurodant, kad naršyklė, kurioje peržiūrime puslapį; šiuo metu nepalaiko detalių elemento. @@@@ [Aš negaliu suprasti šio sakinio. ]
Tada mes galime sukurti atsargą, naudodami šią klasę kaip kablys, kurį darysime sekančiame žingsnyje.
Atgal
Šiame etape mes suteiksime panašius informacija elementų funkcijos kitoms naršyklėms (išskyrus „Chrome“). Ankstesniame pranešime šis veiksmas buvo automatiškai atliktas naudojant šį scenarijų, tačiau šį kartą mes jį sukursime pačiam.
Pastaba: Tiesiog peržiūrėkite šiek tiek iš ankstesnio pranešimo; detalių elementas šiuo metu yra palaikomas tik „Chrome“ naršyklėje.
Taigi pirmiausia pradėkime CSS.
Santraukos žyma keičiame žymeklio režimą į rodyklę, todėl vartotojas pastebės, kad jis yra paspaudžiamas.
Norėdami pateikti daugiau tarpų detalės elemento viršuje ir apačioje su paraštėmis.
informacija margin: 20px 0px;
Pagal numatytuosius nustatymus suvestinė žyma turės rodyklę. Bet čia norėtume ją pakeisti plius minuso piktograma.
Pastaba: Prieš tęsdamas, anksčiau „Fugue“ atsisiuntė piktogramas iš šios kolekcijos, atsisiųsdavau jas ir sudėjau į vieną failą.
Pridėkime prieš pseudo elementą ir pridėkite piktogramą kaip foną. Atkreipkite dėmesį, kad šiuo metu fono padėtis yra viršuje, kurioje bus rodoma pliuso piktograma.
Dabar pagal nutylėjimą rodoma rodyklė buvo pakeista mūsų piktograma, o jei ją matysite „Chrome“, jau turėsite perjungimo efektą, kai jį spustelėsite; piktograma atitinkamai pasikeis. Tačiau kitose naršyklėse nieko nebus. Taigi, sekančiame žingsnyje bandysime pakartoti efektą su jQuery.
Perjungimo efektas su jQuery
Prieš pradedant su „jQuery“ dalimi, norėčiau padėkoti Ianui Devlinui už įkvėpimą..
Gerai, sukuriame kintamąjį, kad išsaugotume suvestinę žymą.
var summary = $ („informacijos santrauka“);
Tada apibendrina visus santraukos brolio elementus a div.
Summary.siblings (). wrapAll ('„);
Ir paslėpti tą div, kai detalės elementas neturi atviros klasės.
$ („išsami informacija: ne (.open) santrauka“). broliai / seserys („div“).
Paspaudus suvestinę, norime, kad būtų parodyta paslėpta dalis, o priešingai, kai div pradžioje bus atidaryta, ji būtų paslėpta.
Norėdami įsitikinti, kad šios funkcijos bus vykdomos tik nepalaikomose naršyklėse, mes jas supakuojame į šį sąlyginį pareiškimą.
jei ($ ('html'). hasClass („ne-detales“)) // kodas čia
Ir žemiau yra kodas, kurį turime:
jei ($ ('html'). hasClass ('ne-detales')) var summary = $ („detalių suvestinė“); Summary.siblings (). wrapAll ('„); $ („išsami informacija: ne (.open) santrauka“). broliai / seserys („div“). Summary.click (funkcija () $ (this) .siblings ('div'). perjungti (); $ ('detales') toggleClass ('open'););
Dabar išbandykime naršyklę; perjungimo efektas dabar turėjo dirbti visose naršyklėse, aš asmeniškai patikrinau (kol „Internet Explorer 7“).
Demo
Atsisiųsti šaltinį
Patarimai: Arba galite pakeisti .perjungti () su .slinktis () sukurti skaidrių efektą. Taip pat, jei norite, kad detalė būtų atidaryta iš pradžių, detalės elemente galite pridėti klasę.
Išvada
Mes atlikome visus vieno puslapio sukūrimo veiksmus, naudodami HTML5, derindami nepalaikomas naršykles, taip pat atkartojome detalių elementų perjungimo efektą, todėl tikiuosi, kad galite daug sužinoti iš jo.
Vis dėlto žinau, kad šiame pranešime išsamiai nepaaiškinau, todėl, jei norite išvalyti kažką, nedvejodami rašykite klausimą komentarų laukelyje.
