Aloitetaan.

HTML5-merkintä

Ensinnäkin meidän on luotava html asiakirja, jossa on seuraava merkintä:

 
 
 
 
Apple iPhone 4 - 16 Gt
 
Eniten hämmästyttävä iPhone.
 
 
 
  
 
 
Nopeampi kaksisydäminen A5-siru. 8MP: n kamera, jossa on kaikki uudet optiikat, ottaa myös 1080p: n HD-videota. Ja esitellään Siri. Se on hämmästyttävä iPhone vielä.
 
 
Tuotteen ominaisuudet
 
 
8 megapikselin kamera, jossa on 1080p: n videotallennus
 
Siri ääni avustaja
 
iCloud
 
Air Print
 
Retina-näyttö
 
Kuvien ja videoiden maantieteellinen merkintä
 
 
 Osta nyt 
 
 

Käytämme useita uusia HTML5-tunnisteita, kuten ylätunniste, hgroup, kuva, jakso, ja yksi, josta olemme keskustelleet aiemmin; yksityiskohdat ja yhteenveto tag.

Emme kuitenkaan aio kaivaa näihin tunnisteisiin, ei siksi, ettemme ole halukkaita, vaan pikemminkin ne ovat perusaiheita, jotka löydät helposti muualta. Joten jos olet todella uusi HTML5: lle, suosittelen lukemaan seuraavat merkinnät; he ovat selittäneet ne kattavasti:

• Puhutaan semanttisesta
• HTML5-otsikkorivi
• Hgroup-elementti
• HTML5-tunniste

Katsotaanpa nyt sivun ensimmäinen esiintyminen.

No, se näyttää järkevältä ilman mitään tyylejä. Hyvin yläosassa on otsikko, ja sitten tulee kuvan kuva, kuvaus ja lopuksi Osta nyt -painike. Nyt keräämme tämän sivun.

Tyylit

Aloitamme normalisoimalla kaikki tämän tyylitaulukon oletusasetukset ja lisäämällä html tag.

 html korkeus: 100%; tausta: # f3f3f3; tausta: -moz-lineaarinen gradientti (alkuun, # f3f3f3 0%, #ffffff 50%); tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # f3f3f3), värin pysäytys (50%, # ffffff)); tausta: -webkit-lineaarinen gradientti (alkuun, # f3f3f3 0%, # ffffff 50%); tausta: -o-lineaarinen gradientti (alkuun, # f3f3f3 0%, # ffffff 50%); tausta: -ms-lineaarinen gradientti (alkuun, # f3f3f3 0%, # ffffff 50%); tausta: lineaarinen gradientti (alkuun, # f3f3f3 0%, # ffffff 50%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Muista, että tuote- elementit on kääritty kaikki div luokkaan. Joten täällä haluaisimme keskittää kääre ja asettaa leveyden noin 650 kuvapistettä.

 .kääre leveys: 650px; marginaali: auto; pehmuste: 25px 0px; 

Otsikon osa

Otsikko-osassa on kaksi otsikkoa H1 ja h4, Joten tyyli näitä elementtejä.

 h1, h4 font-perhe: Helvetica Neue, Arial, sans-serif; font-weight: normaali; marginaali: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; väri: #aaa; 

Ja lisää sitten vähän tilaa ylätunniste marginaali.

 otsikko marginaali-pohja: 20px; 

Jos katsot otsikon oikeaa reunaa, siellä olisi paljon välilyöntiä.

Miksi emme myös aseta Apple-logoa sinne.

 otsikko marginaali-pohja: 20px; tausta: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') ei-toista oikeaa keskusta; 

Tuotekuva

Seuraavaksi siirrä kuva vasemmalle ja määritä kuvan maksimileveys 350 kuvapistettä.

 kuva float: vasen;  kuva img max-leveys: 350px; 

Koska kuva on työnnetty vasemmalle, kelluu kuvauksen osa oikealle ja säädä leveys 300px.

 osa font-family: Tahoma, Arial, sans-serif; linjan korkeus: 150%; float: oikea; leveys: 300px; väri: # 333; 

Nyt katsotaan tulos tähän mennessä.

Se alkaa näyttää hyvältä, mutta yksityiskohdatunniste ei vieläkään toimi vielä (paitsi Chrome), joten anna tyylin seuraavaksi.

Nappi

Painikkeiden tyylit jäljittelevät niitä Apple.com Storesta. Ja tässä on kaikki syntaksi, joka sinun täytyy laittaa tyylitaulukkoon painikkeelle.

 painike tausta: # 36a9ea; tausta: -moz-lineaarinen gradientti (alkuun, # 36a9ea 0%, # 127fd2 100%); tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # 36a9ea), värin pysäytys (100%, # 127fd2)); tausta: -webkit-lineaarinen gradientti (alkuun, # 36a9ea 0%, # 127fd2 100%); tausta: -o-lineaarinen gradientti (alkuun, # 36a9ea 0%, # 127fd2 100%); tausta: -ms-lineaarinen gradientti (alkuun, # 36a9ea 0%, # 127fd2 100%); tausta: lineaarinen gradientti (alkuun, # 36a9ea 0%, # 127fd2 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); raja: 1kpl kiinteä # 00599d; väri: #fff; pehmuste: 8px 20px; -webkit-border-radius: 3px; raja-säde: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), 0px 1px 0px 0px rgba (250, 250, 250, 3); teksti-varjo: 0px 1px 1px # 156cc4; suodatin: dropshadow (väri = # 156cc4, offx = 0, offy = 1); kirjasinkoko: 10pt;  -näppäin: hover background: # 2f90d5; tausta: -moz-lineaarinen gradientti (alkuun, # 2f90d5 0%, # 0351b7 100%); tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # 2f90d5), värin pysäytys (100%, # 0351b7)); tausta: -webkit-lineaarinen gradientti (alkuun, # 2f90d5 0%, # 0351b7 100%); tausta: -o-lineaarinen gradientti (alkuun, # 2f90d5 0%, # 0351b7 100%); tausta: -ms-lineaarinen gradientti (alkuun, # 2f90d5 0%, # 0351b7 100%); tausta: lineaarinen gradientti (alkuun, # 2f90d5 0%, # 0351b7 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  -näppäin: aktiivinen tausta: # 127fd2; -webkit-box-shadow: 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); laatikko-varjo: 0px 2px 1px 0px rgba (0, 47, 117, 5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Nyt painikkeen pitäisi näyttää paremmalta.

Ongelma Internet Explorerissa

Kuten tavallista, IE (Internet Explorer) aiheuttaa aina ongelmia; jos avaat tämän missä tahansa IE: ssä, joka on alle 9, sivu pysyy epäkunnossa.

Tämä johtuu siitä, että Internet Explorer ei tunnista uusia elementtejä (jakso, ylätunniste, jne.), joten tyylit, joita olemme määrittäneet, eivät sovellu. Niinpä seuraavassa vaiheessa pyrimme ratkaisemaan tämän ongelman.

Selaimen tuen testaus

Edellisessä postissamme olemme käsittäneet selaintuen yksityiskohtaiselle elementille tämän polyfillin avulla; jotta se voisi toimia tuetuissa selaimissa. Tällä kertaa yritämme kuitenkin tehdä erilaisia ​​tapoja Modernizrin kanssa.

Virallisella verkkosivustollaan, "Modernizr on avoimen lähdekoodin JavaScript-kirjasto, joka auttaa rakentamaan seuraavan sukupolven HTML5 ja CSS3-powered sivustot". Modernizr testaa teknisesti tiettyjen uusien elementtien ja ominaisuuksien selaimen tuen. Jos tukea ei anneta, meidän on annettava varmuuskopio siitä, antako se eri tyylejä tai tarjoamalla polyfills. Tässä tapauksessa käytämme Modernizr-ohjelmaa, jotta voimme testata yksityiskohtia ja yhteenvetoelementtiä.

1. Siirry Modernizriin ja siirry sen lataussivulle.

2. Lataussivulla Modernizr tarjoaa joitakin asetuksia kirjaston määrittämiseksi, joten sinun on valittava vain tiettyjä ominaisuuksia, joita tarvitset sivustossasi. Tässä tapauksessa tarvitsemme:

   • HTML5Shiv 3.4
   • Lisää CSS-luokat, tämä ominaisuus lisää automaattisesti luokkia html-tunnisteeseen.
   • Modernizr.load,
   • siirry yhteisön lisäosien ruutuun ja valitse elem yksityiskohdat,
   • Valitse Laajennettavuus-osiosta Modernizr.addTest.
3. Luo ja lataa tiedosto.
4. Yhdistä se html-sivustoon ja lataa sivu uudelleen Internet Explorerissa. Sivun pitäisi olla nyt muotoiltu, koska Internet Explorer voi nyt tunnistaa tunnisteet.

Ja jos tarkastelet lähdettä tai tarkastelet elementtiä, löydät html-tunnisteeseen lisätyn ei-tietoluokan; osoittaa, että selain, jossa tarkastelemme sivua; ei tällä hetkellä tue yksityiskohtia. @@@@ [En ymmärrä tätä sanaa. ]

Silloin voimme luoda tämän luokan kuin koukun, jota teemme seuraavassa vaiheessa.

Takaisin

Tässä vaiheessa annamme samanlaisia yksityiskohdat elementtien toiminnallisuus muille selaimille (pois lukien Chrome). Edellisessä postissa tämä vaihe tehtiin automaattisesti käyttämällä tätä komentosarjaa, mutta tällä kertaa luomme sen omasta.

Huomautus: Tarkastellaan vain vähän edellisestä viestistämme; yksityiskohtaelementtiä tuetaan tällä hetkellä vain Chrome-selaimessa.

Joten aloitetaan ensin CSS: n käsittely.

Yhteenvetotunnisteessa muutamme kohdistimen tilaa osoittimeksi, joten käyttäjä huomaa, että se on napsautettavissa.

 yhteenveto kursori: osoitin; kirjasinkoko: 12pt; ääriviivat: 0; 

Jos haluat antaa lisää välilyöntejä yksityiskohdan ylä- ja alaosassa marginaalilla.

 tiedot marginaali: 20px 0px; 

Yhteenvetotunnisteessa on oletusarvoisesti nuoli. Mutta täällä haluaisimme korvata sen plus-miinus-kuvakkeella.

Huomautus: Ennen kuin jatkat, Fugue on aiemmin ladannut tämän kokoelman kuvakkeet, ladannut ne ja yhdistänyt ne yhteen tiedostoon.

Lisäämme ennen pseudoelementtiä ja liitä kuvake taustaksi. Huomaa, että tässä vaiheessa taustapaikan yläreunassa näkyy plus-kuvake.

 yksityiskohdat> yhteenveto: ennen leveys: 16px; korkeus: 16px; näyttö: inline-block; sisältö: "! tärkeää; tausta: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') ei-toista keskelle ylhäältä, marginaali-oikea: 5px, sijainti: suhteellinen, alkuun: 2px;

Sitten, kun yksityiskohdan elementti on auki, tausta-asento siirtyy alareunaan, josta näkyy miinus-kuvake.

 tiedot [open]> yhteenveto: ennen, details.open> yhteenveto: ennen tausta: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) ei-toista keskipohja; 

[avata] merkki on valitsin. Tällöin se valitsee avattavan attribuutin tiedot tukevassa selaimessa.

Lopuksi meidän pitäisi piilottaa nuoli, joka oletuksena näkyy Chromessa.

 yksityiskohdat> yhteenveto :: - webkit-tiedot-merkki display: none; 

Sitten katsotaan tulos selaimessa jonkin aikaa.

Oletusnuoli on nyt korvattu kuvakkeellemme, ja jos näet sen Chromessa, sinulla on jo nyt vaihtokyky, kun napsautat sitä; kuvake muuttuu vastaavasti. Mutta muissa selaimissa mikään ei tapahdu vielä. Niinpä seuraavassa vaiheessa yritämme toistaa vaikutuksen jQueryn avulla.

Vaihtovaikutus jQueryn kanssa

Ennen kuin aloitamme jQuery-osan kanssa, haluan kiittää Ian Devliniä inspiraatiosta, alla oleva skripti on itse asiassa pieni muutos hänen.

Hyvä on, luomme muuttujan, joka tallentaa yhteenvedon.

 var summary = $ ('yksityiskohtien yhteenveto'); 

Sitten käärimme kaikki yhteenvedon sisarelementit a: lla div.

summary.siblings (). wrapAll ('
');

Ja piilota tämä div, kun yksityiskohdan elementillä ei ole avointa luokkaa.

$ ('yksityiskohdat: ei (.open) yhteenveto).) sisarukset (' div '). piilota ();

Kun yhteenvetoa napsautetaan, haluamme piilotetun divin näkyvän ja päinvastoin, kun div on alunperin auki, se olisi piilotettu.

 summary.click (toiminto () $ (this) .siblings ('div'). toggle (); $ ('yksityiskohdat') toggleClass ('open');); 

Varmistaaksesi, että nämä toiminnot suoritetaan vain tuetuissa selaimissa, pakataan ne tähän ehdolliseen lausuntoon.

 jos ($ ('html'). hasClass ('no-details')) // koodi menee täällä

Ja alla on koodi, jota meillä on:

 jos ($ ('html'). hasClass ('no-details')) var summary = $ ('yksityiskohtien yhteenveto'); summary.siblings (). wrapAll ('
'); $ ('yksityiskohdat: ei (.open) yhteenveto).) sisarukset (' div '). piilota (); summary.click (toiminto () $ (this) .siblings ('div'). toggle (); $ ('yksityiskohdat') toggleClass ('open');); 

Testataan nyt selaimessa; Vaihtovaikutus olisi pitänyt nyt toimia kaikissa selaimissa, olen henkilökohtaisesti tarkistanut (kunnes Internet Explorer 7).

• esittely
• Lataa lähde

vinkkejä: Vaihtoehtoisesti voit muuttaa .toggle () kanssa .slideToggle () luoda diaesityksen. Jos haluat myös, että tiedot avataan aluksi, voit lisätä luokan yksityiskohtiin.

johtopäätös

Olemme suorittaneet kaikki vaiheet, joissa luodaan yksi tuotesivu HTML5: n avulla, virheenkorjaus ei-tuetuilla selaimilla sekä kopioi yksityiskohtaelementin vaihtoteho yksin, joten toivottavasti voit oppia paljon siitä.

Olen kuitenkin tietoinen siitä, että en ole selittänyt kaikkea yksityiskohtaisesti tässä viestissä, joten jos haluat tyhjentää jotain, voit lähettää kysymyksen alla olevaan kommenttikenttään.