Ние правим красиви единично място - красив дизайн на сайта - ди-велик

Принципната структура на страниците на продажбата на всеки продукт е почти винаги един и същ. Те се състоят от отделни блокове, позовавайки се на който потребителят може да се състави мнение за продукти, продавани на него. Ако всеки блокира първоначалния въпрос, на страницата, която се състои от тях, тя ще изглежда ярка и привлекателна. Така, че посетителят е искал да бъде сигурен за закупуване на предлаганите стоки, дори ако само преди пет минути той не знае и мисъл. Тук ще разгледаме как да се създаде правилно блок срещу ползите за CSS. Нека да разгледаме този въпрос по отделно, тъй като използването на блокове - най-популярният начин за организиране на сайт на една страница.






Това, което трябва да се получи в резултат: конструктивна единица се състои от два компонента - видимото и скритото. Видим до икона модул и име на ползи, предимства. Скритата страна се поставя пълно описание на ползите, тя се появява, когато мишката върху иконата.







За да видите ефектите Изтегляне това с един пример:

Ние правим красиви единично място - красив дизайн на сайта - ди-велик
Изтегли: Ние правим красиви единично място - красив дизайн на сайта

Как да си направим красив дизайн за вашия уеб сайт за търговия?

1. HTML структура

Първата стъпка е да поставите икони от FontAwesome между тагове . която ще бъде използвана, за да опише:

  • С първия петнадесетия шевове - общ блок, съдържащ три описание блок.
  • Вторият през шестата линии - отделно звено с описание на ползи.
  • Третият ред - блок икона.
  • Четвъртата линия - указано на видно място на модула с ползи.
  • Петият ред - скрит модул с подробно описание на ползите.

Както можете да видите, много прост дизайн. Сега трябва да добавите анимация.

2. CSS стилове

Държим да уточним, стиловете, които са общи за трите блока: