Sāksim.

HTML5 atzīme

Pirmkārt, mums ir jāizveido html dokuments ar šādu atzīmi:

 
 
 
 
Apple iPhone 4 - 16GB
 
Visvairāk apbrīnojamais iPhone.
 
 
 
  
 
 
Ātrāka divkodolu A5 mikroshēma. 8MP kamera ar visu jauno optiku arī uzņem 1080p HD video. Un ieviešot Siri. Tas ir pats pārsteidzošākais iPhone.
 
 
Produkta īpašības
 
 
8 megapikseļu kamera ar pilnu 1080p videoierakstu
 
Siri balss asistents
 
iCloud
 
Gaisa druka
 
Tīklenes displejs
 
Foto un video ģeogrāfiskā marķēšana
 
 
 Pērc tagad 
 
 

Mēs izmantojam vairākus jaunus tagus no HTML5 spec., Piemēram, galvenes, hgroup, skaitlis, sadaļā, un vienu, ko mēs iepriekš apspriedām; the detaļas un kopsavilkums tag.

Tomēr mēs neparedzēsim šos tagus nevis tāpēc, ka mēs nevēlamies, bet drīzāk tie ir pamatjautājumi, kurus var viegli atrast citur. Tātad, ja jums ir patiešām jauns HTML5, es ieteiktu jums izlasīt šādas atsauces uz šīm tagiem; viņi tos ir izskaidrojuši:

• Runāsim par semantisko
• HTML5 galvenes elements
• Hgroup Element
• HTML5 tagu atsauce

Tagad aplūkosim mūsu lapas pirmo izskatu.

Nu, tas šķiet saprātīgi bez jebkādiem stiliem. Tajā pašā augšpusē ir virsraksts, un pēc tam nāk attēla sadaļa, apraksts un, visbeidzot, poga Pirkt tagad. Tagad pieņemsim šo lapu.

Stili

Mēs sāksim, normalizējot visus noklusējuma stilus, izmantojot šo stilu, un pievienosim gradienta fonu html tag.

 html augstums: 100%; fons: # f3f3f3; fons: -moz-lineārs gradients (augšā, # f3f3f3 0%, #ffffff 50%); fons: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # f3f3f3), krāsu apstāšanās (50%, # ffffff)); fons: -webkit-lineārs gradients (augšā, # f3f3f3 0%, # ffffff 50%); fons: -o-lineārs gradients (augšā, # f3f3f3 0%, # ffffff 50%); fons: -ms-lineārs gradients (augšā, # f3f3f3 0%, # ffffff 50%); fons: lineārais gradients (augšā, # f3f3f3 0%, # ffffff 50%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Atcerieties, ka mūsu produktu elementi ir iesaiņoti a div ar produktu klasi. Tātad, šeit mēs gribētu centrēt iesaiņojumu un iestatīt platumu 650px.

 .iesaiņojums platums: 650px; starpība: auto; polsterējums: 25px 0px; 

Galvenes sadaļa

Virsrakstu sadaļā ir divas pozīcijas h1 un h4, tāpēc pieņemsim šos elementus.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serifs; fontu svars: normāls; starpība: 0;  h1 font-size: 24pt;  h4 fonta lielums: 16pt; krāsa: #aaa; 

Un tad pievienojiet nelielu vietu galvenes ar rezervi.

 header margin-bottom: 20px; 

Ja paskatīsieties pa labi virsraksta pusē, šajā pusē būtu daudz vietas.

Tātad, kāpēc mēs arī ievietojam Apple logotipu.

 header margin-bottom: 20px; fons: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') neatkārtots labais centrs; 

Produkta attēls

Tālāk peldiet attēlu pa kreisi un iestatiet attēla maksimālo platumu uz 350px.

 attēls float: pa kreisi;  attēls img max-width: 350px; 

Tā kā attēls ir izspiests pa kreisi, tad mēs peldēsim apraksta sadaļu pa labi un iestatīsim platumu uz 300px.

 sadaļa font-family: Tahoma, Arial, sans-serif; līnijas augstums: 150%; pludiņš: pa labi; platums: 300px; krāsa: # 333; 

Tagad aplūkosim līdzšinējo rezultātu.

Tā sāk izskatīties labi, bet detaļu atzīme vēl nedarbojas (izņemot pārlūku Chrome), tāpēc pieņemsim nākamo pogu.

Poga

Pogas stiliem mēs imitēsim to no Apple.com veikala. Un šeit ir viss sintakse, kas jums jāievieto jūsu stilu lapā.

 poga fons: # 36a9ea; fons: -moz-lineārs gradients (augšā, # 36a9ea 0%, # 127fd2 100%); fons: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # 36a9ea), krāsu apstāšanās (100%, # 127fd2)); fons: -webkit-lineārs gradients (augšā, # 36a9ea 0%, # 127fd2 100%); fons: -o-lineārs gradients (augšā, # 36a9ea 0%, # 127fd2 100%); fons: -ms-lineārs gradients (augšā, # 36a9ea 0%, # 127fd2 100%); fons: lineārs gradients (augšā, # 36a9ea 0%, # 127fd2 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); robeža: 1px cietais # 00599d; krāsa: #fff; polsterējums: 8px 20px; -webkit-robežu rādiuss: 3px; robežu rādiuss: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), ieliktnis 0px 1px 0px 0px rgba (250, 250, 250, .3); kastes ēna: 0px 1px 1px 0px rgba (0, 0, 0, .1), ieliktnis 0px 1px 0px 0px rgba (250, 250, 250, .3); teksta ēna: 0px 1px 1px # 156cc4; filtrs: dropshadow (krāsa = # 156cc4, offx = 0, offy = 1); fonta lielums: 10pt;  poga: lidināties fons: # 2f90d5; fons: -moz-lineārs gradients (augšā, # 2f90d5 0%, # 0351b7 100%); fons: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # 2f90d5), krāsu apstāšanās (100%, # 0351b7)); fons: -webkit-lineārs gradients (augšā, # 2f90d5 0%, # 0351b7 100%); fons: -o-lineārs gradients (augšā, # 2f90d5 0%, # 0351b7 100%); fons: -ms-lineārs gradients (augšā, # 2f90d5 0%, # 0351b7 100%); fons: lineārs gradients (augšā, # 2f90d5 0%, # 0351b7 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  poga: aktīva fons: # 127fd2; -webkit-box-shadow: ieliktnis 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: ieliktnis 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Tagad pogai vajadzētu izskatīties labāk.

Problēma programmā Internet Explorer

Kā parasti, IE (Internet Explorer) vienmēr izraisa dažas problēmas; ja to atverat jebkurā IE, kas ir zemāka par 9, lapa paliks nepiederoša.

Tas ir tāpēc, ka Internet Explorer neatpazīst jaunos elementus (sadaļā, galvenes, utt.), tāpēc stilu, ko esam norādījuši, neizmanto. Tādējādi nākamajā solī mēs risināsim šo problēmu.

Pārlūkprogrammas atbalsta testēšana

Iepriekšējā ziņojumā mēs esam risinājuši pārlūkprogrammas atbalstu detaļu elementam, izmantojot šo polifilumu; tā varētu darboties neatbalstītajās pārlūkprogrammās. Tomēr šoreiz mēs izmēģināsim dažādus veidus, kā to izdarīt ar Modernizr.

No oficiālās tīmekļa vietnes, "Modernizr ir atvērtā koda JavaScript bibliotēka, kas palīdz veidot nākamās paaudzes HTML5 un CSS3-tīmekļa vietnes". Tehniski modernizr pārbaudīs pārlūkprogrammas atbalstu dažiem jauniem elementiem un funkcijām. Ja atbalsts netiek sniegts, tad mums ir jānodrošina, ka tas ir, piešķirot dažādus stilus vai sniedzot polifilijas. Šajā gadījumā mēs izmantosim Modernizr, lai palīdzētu mums pārbaudīt detaļas un kopsavilkuma elementu.

1. Dodieties uz Modernizr un dodieties uz lejupielādes lapu.

2. Lejupielādes lapā Modernizr ir dažas iespējas, kā konfigurēt bibliotēku, tāpēc jums ir jāizvēlas tikai dažas funkcijas, kas jums patiešām ir nepieciešamas jūsu vietnei. Šajā gadījumā mums ir nepieciešams:

   • HTML5Shiv 3.4
   • Pievienojiet CSS klases, šī funkcija automātiski ievietos klases html tagā.
   • the Modernizr.load,
   • dodieties uz kopienas lodziņu un atlasiet element-details,
   • Paplašināmības sadaļā izvēlieties Modernizr.addTest.
3. Izveidojiet un lejupielādējiet failu.
4. Pievienojiet to savam html un ielādējiet lapu pārlūkprogrammā Internet Explorer. Lapai tagad jābūt veidotai, jo Internet Explorer tagad var atpazīt tagus.

Un, ja skatāties avotu vai pārbaudāt elementu, jūs atradīsiet informāciju, kas nav iekļauta html tagā; norādot, ka pārlūks, kurā mēs apskatām lapu; pašlaik neatbalsta detaļu elementu. @@@@ [Es nesaprotu šo teikumu. ]

Tad mēs varam izveidot rezerves, izmantojot šo klasi kā āķi, ko mēs darīsim nākamajā solī.

Fallback

Šajā solī mēs nodrošināsim līdzīgus detaļas elementu funkcionalitāte citām pārlūkprogrammām (izņemot Chrome). Iepriekšējā ziņojumā šis solis tika automātiski veikts, izmantojot šo skriptu, bet šoreiz mēs to izveidosim paši.

Piezīme: Vienkārši pārskatiet mūsu iepriekšējo ziņu; detaļu elements pašlaik tiek atbalstīts tikai pārlūkprogrammā Chrome.

Tātad, vispirms sāksim strādāt pie CSS.

Kopsavilkuma tagā mēs mainām kursora režīmu uz rādītāju, lai lietotājs pamanītu, ka tas ir noklikšķināms.

 kopsavilkums kursors: rādītājs; fonta lielums: 12pt; kontūra: 0; 

Lai detaļas elementa augšdaļā un apakšpusē dotu vairāk atstarpes ar rezervi.

 informācija margin: 20px 0px; 

Pēc noklusējuma kopsavilkuma tagam būs bultiņa. Bet šeit mēs vēlētos to aizstāt ar plus-mīnusa ikonu.

Piezīme: Pirms turpināt, es iepriekš esmu lejupielādējis ikonas no šīs kolekcijas, izmantojot Fugue, lejupielādējot un ielauzot tās vienā failā.

Pievienosim pirms pseidoelementa un pievienosim ikonu kā fonu. Ņemiet vērā, ka šajā brīdī fona stāvoklis ir augšpusē, kurā būs redzama plus ikona.

 informācija> kopsavilkums: pirms platums: 16px; augstums: 16px; displejs: inline-bloks; saturs: "! svarīgi; fons: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') nav atkārtota centra augšējā daļa; 5px; pozīcija: relatīvais; augšā: 2px;

Pēc tam, kad detaļas elements ir atvērts, fona pozīcija pārvietosies uz leju, kas parādīs mīnusa ikonu.

 detaļas [open]> kopsavilkums: pirms, details.open> kopsavilkums: pirms fons: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) nē atkārtojas centrālais grunts; 

The [atvērts] zīme ir selektors. Šādā gadījumā atbalstošā pārlūkprogrammā tā atver atribūtu.

Visbeidzot, mums vajadzētu paslēpt bultiņu, kas pēc noklusējuma tiek rādīta pārlūkā Chrome.

 informācija> kopsavilkums :: - webkit-details-marker display: none; 

Tad apskatīsim rezultātu pārlūkprogrammā uz brīdi.

Tagad noklusētā bultiņa tagad ir aizstāta ar mūsu ikonu, un, ja to redzat pārlūkā Chrome, jums jau būs pārslēgšanas efekts, kad noklikšķināsiet uz tā; ikona attiecīgi mainīsies. Bet citās pārlūkprogrammās nekas nenotiks. Tātad, nākamajā solī mēs mēģināsim atkārtot efektu ar jQuery.

Pārslēgšanas efekts ar jQuery

Pirms mēs sākam ar jQuery daļu, es vēlētos pateikties Ian Devlin par iedvesmu, zemāk redzamais skripts patiesībā ir neliels viņa izmaiņas.

Labi, izveidosim mainīgo, lai saglabātu kopsavilkuma tagu.

 var summary = $ ('detaļu kopsavilkums'); 

Tad mēs apkopojam visus kopsavilkuma māsas elementus ar a div.

Summary.siblings (). wrapAll ('
');

Un slēpt šo div, kad detaļas elementam nav atvērtas klases.

$ ('detaļas: nav (. atvērts) kopsavilkums).) brāļi un māsas (' div ').

Kad kopsavilkums tiek noklikšķināts, mēs vēlamies, lai tiktu parādīts slēptās nodalījums, un, pretēji, ja divreiz ir atvērts, tas būtu paslēpts.

 Summary.click (funkcija () $ (this) .siblings ('div'). toggle (); $ ('detaļas') toggleClass ('open');); 

Lai pārliecinātos, ka šīs funkcijas tiks izpildītas tikai neatbalstītajās pārlūkprogrammās, mēs tos iesaiņojam šajā nosacītajā paziņojumā.

 ja ($ ('html'). hasClass ('no-detaļas')) // kods iet šeit

Un tālāk ir kods, kas mums ir:

 ja ($ ('html'). hasClass ('no-details')) var summary = $ ('detaļu kopsavilkums'); Summary.siblings (). wrapAll ('
'); $ ('detaļas: nav (. atvērts) kopsavilkums).) brāļi un māsas (' div '). Summary.click (funkcija () $ (this) .siblings ('div'). toggle (); $ ('detaļas') toggleClass ('open');); 

Tagad pārbaudīsim to pārlūkprogrammā; pārslēgšanas efekts būtu jāstrādā visās pārlūkprogrammās, es personīgi esmu pārbaudījis (līdz Internet Explorer 7).

• Demo
• Lejupielādēt avotu

Padomi: Varat arī mainīt .pārslēgties () ar .slideToggle () lai izveidotu slaidu efektu. Arī tad, ja vēlaties, lai detaļas tiktu atvērtas sākotnēji, detaļas elementā varat pievienot klasi.

Secinājums

Mēs esam veicuši visus soļus, lai izveidotu vienu produktu lapu, izmantojot HTML5, atkļūdojot neatbalstītas pārlūkprogrammas, kā arī atkārtojot detalizēta elementa pārslēgšanas efektu, tāpēc, cerams, no tā var daudz uzzināt.

Tomēr es apzinos, ka šajā ziņojumā es sīkāk nepaskaidroju, tāpēc, ja vēlaties kaut ko izdzēst, varat uzdot jautājumu tālāk komentāru lodziņā.