Хајде да почнемо.

ХТМЛ5 ознака

Прво, морамо да креирамо хтмл документ са следећом ознаком:

 
 
 
 
Аппле иПхоне 4 - 16ГБ
 
Још невероватан иПхоне.
 
 
 
  
 
 
Бржи дуал-цоре А5 чип. 8МП камера са потпуно новом оптиком такође снима 1080п ХД видео. И упознавање са Сири. То је још невероватан иПхоне.
 
 
Карактеристике производа
 
 
Камера од 8 мегапиксела са пуним 1080п видео записом
 
Сири воице асситант
 
иЦлоуд
 
Аир Принт
 
Ретина дисплеј
 
Геоозначавање фотографија и видео записа
 
 
 Буи Нов 
 
 

Користимо неколико нових ознака из ХТМЛ5 спец., Као што је хеадер, хгроуп, фигура, сецтион, и онај о коме смо раније расправљали; тхе детаљи и суммари таг.

Међутим, нећемо се упуштати у ове ознаке, не зато што то нисмо вољни, већ су то основне теме које можете пронаћи на другим мјестима. Дакле, ако сте заиста нови у ХТМЛ5, препоручујем да прочитате следеће референце тих ознака; објаснили су им свеобухватно:

• Хајде да причамо о семантичком
• Елемент заглавља ХТМЛ5
• Елемент групе
• ХТМЛ5 Референце Референце

А сада да видимо прву појаву наше странице.

Па, изгледа паметно без икаквих стилова. На самом врху се налази заглавље, а затим долази секција за слику, опис и на крају дугме 'Купи одмах'. Хајде да се нађемо на овој страници.

Тхе Стилес

Почећемо нормализацијом свих подразумеваних стилова користећи овај стил и додати позадину градијента хтмл таг.

 хтмл висина: 100%; бацкгроунд: # ф3ф3ф3; бацкгроунд: -моз-линеар-градиент (топ, # ф3ф3ф3 0%, #фффффф 50%); бацкгроунд: -вебкит-градиент (линеарни, леви врх, леви дно, боја-стоп (0%, # ф3ф3ф3), стоп боја (50%, # фффффф)); бацкгроунд: -вебкит-линеар-градиент (топ, # ф3ф3ф3 0%, # фффффф 50%); бацкгроунд: -о-линеар-градиент (топ, # ф3ф3ф3 0%, # фффффф 50%); бацкгроунд: -мс-линеар-градиент (горе, # ф3ф3ф3 0%, # фффффф 50%); бацкгроунд: линеарно-градијент (топ, # ф3ф3ф3 0%, # фффффф 50%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# ф3ф3ф3", ендЦолорстр = "# фффффф", ГрадиентТипе = 0); 

Запамтите да су сви наши елементи производа умотани у див са класом производа. Дакле, овде бисмо желели да центрирамо омотач и поставимо ширину 650пк.

 .омотач ширина: 650пк; маргин: ауто; паддинг: 25пк 0пк; 

Секција заглавља

У заглављу имамо два наслова х1 и х4, па хајде да стилизујемо ове елементе.

 х1, х4 фонт-фамили: Хелветица Неуе, Ариал, санс-сериф; фонт-веигхт: нормал; маргин: 0;  х1 фонт-сизе: 24пт;  х4 фонт-сизе: 16пт; цолор: #ааа; 

И онда додајте мало места на дно хеадер са маргином.

 заглавие маргин-боттом: 20пк; 

Ако погледате на десну страну заглавља, на тој страни би било пуно празних простора.

Па зашто онда не ставимо Аппле лого тамо.

 заглавие маргин-боттом: 20пк; бацкгроунд: урл ('… /хттпс://ассетс.хонгкиат.цом/уплоадс/хтмл5-сингле-продуцт-паге/аппле.пнг') десно без понављања; 

Слика производа

Затим померите слику на лево и подесите максималну ширину слике на 350пк.

 фигуре флоат: лево;  фигуре имг мак-видтх: 350пк; 

Пошто је слика гурнута улево, онда ћемо приказати одељак описа удесно и подесити ширину на 300пк.

 сецтион фонт-фамили: Тахома, Ариал, санс-сериф; висина линије: 150%; флоат: ригхт; видтх: 300пк; цолор: # 333; 

Сада да видимо резултат до сада.

Почиње изгледати добро, али ознака детаља још увијек не ради (осим у Цхромеу), па хајде да стиснемо гумб поред.

Дугме

За стилове дугмади, ми ћемо опонашати онај из Аппле.цом продавнице. И овде је сва синтакса коју треба да ставите у ваш стилски лист за дугме.

 дугме позадина: # 36а9еа; бацкгроунд: -моз-линеар-градиент (топ, # 36а9еа 0%, # 127фд2 100%); бацкгроунд: -вебкит-градиент (линеарни, леви врх, лево дно, боја-стоп (0%, # 36а9еа), стоп боја (100%, # 127фд2)); бацкгроунд: -вебкит-линеар-градиент (топ, # 36а9еа 0%, # 127фд2 100%); бацкгроунд: -о-линеар-градиент (топ, # 36а9еа 0%, # 127фд2 100%); бацкгроунд: -мс-линеар-градиент (топ, # 36а9еа 0%, # 127фд2 100%); бацкгроунд: линеарно-градијент (топ, # 36а9еа 0%, # 127фд2 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# 36а9еа", ендЦолорстр = "# 127фд2", ГрадиентТипе = 0); бордер: 1пк солид # 00599д; цолор: #ффф; паддинг: 8пк 20пк; -вебкит-бордер-радиус: 3пк; бордер-радиус: 3пк; -вебкит-бок-схадов: 0пк 1пк 1пк 0пк ргба (0, 0, 0, .1), инсет 0пк 1пк 0пк 0пк ргба (250, 250, 250, .3); бок-схадов: 0пк 1пк 1пк 0пк ргба (0, 0, 0, .1), инсет 0пк 1пк 0пк 0пк ргба (250, 250, 250, .3); текст-сенка: 0пк 1пк 1пк # 156цц4; филтер: дропсхадов (боја = # 156цц4, оффк = 0, оффи = 1); фонт-сизе: 10пт;  дугме: ховер бацкгроунд: # 2ф90д5; бацкгроунд: -моз-линеар-градиент (топ, # 2ф90д5 0%, # 0351б7 100%); бацкгроунд: -вебкит-градиент (линеарно, лево горе, лево дно, боја-стоп (0%, # 2ф90д5), боја-стоп (100%, # 0351б7)); бацкгроунд: -вебкит-линеар-градиент (топ, # 2ф90д5 0%, # 0351б7 100%); бацкгроунд: -о-линеар-градиент (топ, # 2ф90д5 0%, # 0351б7 100%); бацкгроунд: -мс-линеар-градиент (топ, # 2ф90д5 0%, # 0351б7 100%); бацкгроунд: линеарно-градијент (топ, # 2ф90д5 0%, # 0351б7 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# 2ф90д5", ендЦолорстр = "# 0351б7", ГрадиентТипе = 0);  дугме: активно позадина: # 127фд2; -вебкит-бок-схадов: инсет 0пк 2пк 1пк 0пк ргба (0, 47, 117, .5), 0пк 1пк 1пк 0пк ргба (0, 0, 0, 0); бок-схадов: инсет 0пк 2пк 1пк 0пк ргба (0, 47, 117, .5), 0пк 1пк 1пк 0пк ргба (0, 0, 0, 0); 

Сада би дугме требало да изгледа боље.

Проблем у програму Интернет Екплорер

Као и обично, ИЕ (Интернет Екплорер) увек изазива неке проблеме; ако отворите ово у било којем ИЕ нижем од 9, страница ће остати не-стилизирана.

То је зато што Интернет Екплорер не препознаје нове елементе (сецтион, хеадер, итд.) тако да се примјењују стилови које смо навели. Тако ћемо у наредном кораку радити на рјешавању овог проблема.

Тестирање подршке за прегледач

У нашем претходном посту, бавили смо се подршком претраживача за елемент детаља користећи овај полифилл; тако да може да ради у неподржаним претраживачима. Међутим, овај пут ћемо покушати на различите начине да то урадимо са Модернизром.

Са свог званичног сајта, "Модернизр је ЈаваСцрипт библиотека отвореног кода која вам помаже да изградите следећу генерацију ХТМЛ5 и ЦСС3-поверед вебситес". Технички, Модернизр ће тестирати подршку за неке нове елементе и функције. Ако подршка није обезбијеђена, онда морамо пружити резерву да ли је то давањем различитих стилова или пружањем полифиллс. У овом случају, користићемо Модернизр да нам помогне да тестирамо детаље и елемент сажетка.

1. Идите на Модернизр и наставите до његове странице за преузимање.

2. На страници за преузимање, Модернизр пружа неке опције за конфигурисање библиотеке, тако да морате само да изаберете одређене функције које су вам заиста потребне за ваш сајт. У овом случају, треба нам:

   • ХТМЛ5Схив 3.4
   • Додај ЦСС класе, ова функција ће аутоматски уметнути класе у хтмл таг.
   • тхе Модернизр.лоад,
   • идите у оквир адд-онс заједнице и изаберите елем-детаилс,
   • У одељку Ектенсибилити, изаберите Модернизр.аддТест.
3. Генеришите и преузмите датотеку.
4. Повежите га са ХТМЛ-ом и поново учитајте страницу у програму Интернет Екплорер. Страница је требала бити обликована пошто Интернет Екплорер сада препознаје ознаке.

И, ако погледате изворни или контролни елемент, наћи ћете да је класа без детаља уметнута у хтмл таг; показује да прегледач где прегледамо страницу; тренутно не подржава елементе детаља. @@@@ [Не разумем ову реченицу. ]

Тада можемо направити замену користећи ову класу као куку, што ћемо радити у следећем кораку.

Тхе Фаллбацк

У овом кораку пружићемо сличне информације детаљи функционалност елемената за друге прегледаче (осим Цхроме-а). У претходном посту, овај корак је аутоматски извршен користећи ову скрипту, али овај пут ћемо је сами креирати.

Белешка: Само прегледам мало из нашег претходног поста; елемент детаља је тренутно подржан само у прегледачу Цхроме.

Дакле, хајде да почнемо да радимо на ЦСС-у прво.

На ознаци сажетка, ми променимо режим курсора на показивач, тако да ће корисник приметити да се може кликнути.

 суммари цурсор: поинтер; фонт-сизе: 12пт; оутлине: 0; 

Да бисте додали више простора на врху и дну елемента детаља са маргином.

 подробности маргин: 20пк 0пк; 

Ознака сажетка подразумевано има стрелицу. Али овде желимо да је заменимо иконом плус-минус.

Белешка: Пре него што наставим, претходно сам преузела иконе из ове колекције од стране Фугуе, преузела их и спрактовала у једну датотеку.

Додајмо псеудо-елемент пре и додамо икону као позадину. Обратите пажњу да је у овом тренутку позиција у позадини на врху која ће приказати икону плус.

 детаљи> резиме: пре видтх: 16пк; хеигхт: 16пк; дисплеј: инлине-блоцк; цонтент: "! импортант; бацкгроунд: урл ('… /хттпс://ассетс.хонгкиат.цом/уплоадс/хтмл5-сингле-продуцт-паге/плус-мин.пнг') 5пк; поситион: релативе, топ: 2пк;

Затим, када је елемент детаља отворен, позадинска позиција ће се померити на дно које ће приказати минус икону.

 детаљи [отвори]> сажетак: пре, детаилс.опен> суммари: бефоре бацкгроунд: урл ('… /хттпс://ассетс.хонгкиат.цом/уплоадс/хтмл5-сингле-продуцт-паге/плус-мин.пнг' ) средишње дно без понављања; 

Тхе [отвори] знак је селектор. У овом случају, он ће изабрати атрибут отворености детаља у подржаном претраживачу.

На крају треба да сакријемо стрелицу која је подразумевано приказана у Цхроме-у.

 детаљи> резиме :: - вебкит-детаилс-маркер дисплаи: ноне; 

Онда, да видимо резултат у претраживачу неко време.

Подразумевана стрелица је сада замењена нашом иконом, а ако је видите у Цхроме-у, већ ћете имати ефекат преклапања када кликнете на њега; икона ће се променити у складу са тим. Али, у другим претраживачима ништа се неће догодити. Дакле, у следећем кораку покушаћемо да поновимо ефекат са јКуери.

Преклопни ефекат са јКуери

Пре него што почнемо са јКуери делом, желела бих да се захвалим Иану Девлину на инспирацији, скрипта испод је заправо мала модификација његовог.

У реду, хајде да креирамо променљиву да сачувамо ознаку сажетка.

 вар сажетак = $ ('суммари суммари'); 

Затим ћемо све елементе сродника из резимеа замотати са а див.

суммари.сиблингс (). врапАлл ('
');

И сакријте тај див када елемент детаља нема отворену класу.

$ ('детаилс: нот (.опен) суммари'). сиблингс ('див'). хиде ();

Када се кликне на сажетак, желимо да се прикаже скривени див, а супротно, када је див у почетку отворен, он би био скривен.

 суммари.цлицк (фунцтион () $ (тхис) .сиблингс ('див'). тоггле (); $ ('детаилс'). тогглеЦласс ('опен');); 

Да бисмо се уверили да ће се те функције извршавати само у неподржаним претраживачима, пребацујемо их унутар ове условне наредбе.

 иф ($ ('хтмл').) хасЦласс ('но-детаилс')) // кодот е ту

И испод је код који имамо:

 иф ($ ('хтмл')) хасЦласс ('но-детаилс')) вар суммари = $ ('суммари суммари'); суммари.сиблингс (). врапАлл ('
'); $ ('детаилс: нот (.опен) суммари'). сиблингс ('див'). хиде (); суммари.цлицк (фунцтион () $ (тхис) .сиблингс ('див'). тоггле (); $ ('детаилс'). тогглеЦласс ('опен');); 

Сада ћемо га тестирати у прегледнику; ефекат пребацивања требало је сада да ради на свим прегледачима, лично сам проверио (све док Интернет Екплорер 7).

• Демо
• Довнлоад Соурце

Савети: Алтернативно можете да промените .искључи() са .слидеТоггле () за креирање ефекта слајда. Такође, ако желите да се почетни детаљ отвори, можете додати класу која је отворена у елементу детаља.

Закључак

Прошли смо све кораке креирања једне странице производа користећи ХТМЛ5, отклањамо грешке за неподржане прегледаче, као и копирамо ефекат преклапања за елемент детаља, тако да се надамо да можете научити много тога.

Међутим, свестан сам да у овом посту нисам све детаљно објаснио, па ако желите нешто да разјасните, слободно поставите питање у поље за коментар испод.