В този урок ще разгледаме процеса на създаване на Лайтбокс използват само XHTML и CSS. Полученият код ще работи в Firefox, Opera, Chrome, Safari, IE6, IE7 и IE8.
Стъпка 1. Писане за маркиране.
Маркирането е много проста. На този етап, ние имаме две връзки, които водят до никъде. Тези връзки в крайна сметка ще бъдат използвани, за да включите светещи кутии, но първо трябва да добавите маркиране за тези светещи кутии след контейнера
Такова маркиране се избира само за този урок. Тя ви позволява да направите CSS съвсем проста и ясна. всичко може да се промени в реалния свят проекти, както се изисква от дизайна на интерфейса.
Стъпка 2. Направете хубав страница
CSS ще добави следния код в секцията
вашия документ (вграден CSS се използва само за илюстрации, само като част от урока):Всичко е относително просто, но трябва да направи няколко обяснения защо някои елементи имат набор. Кръстова важна роля, изиграна от следните настройки:
Имайте предвид, че ние използваме RGBA за цвета на фона. Internet Explorer, както винаги, не поддържа RGBA. Ето защо е необходимо да се добави специфичен оформление и стил за IE, за заобикаляне на засадата. Поставете следния код в секцията за CSS
документа:След това добавете следното маркиране на дефинирате дънни кутии (преди затварянето Всеки Лайтбокс):
Стъпка 3. позициониране Лайтбокс
Ако се вгледате в междинните резултати, лайтбоксът е в процес на нашия форум. която не е в съответствие с концепцията на този елемент от уеб интерфейса. Така че ние трябва да добавите CSS свойства на Lightbox намира в горната част на съдържанието. трябва да се добави следния код, за да #container стил.
Този код може да бъде малко объркващо. Защо ние да го добавите към #container. и да не се елемент стил #lightboxes. Защото, ако го добавите към #lightboxes на елемент от стила. тогава това дете елемент винаги ще бъде на #container (независимо от личното), така че ние никога няма да бъде в състояние да кликнете върху линка в областта на съдържанието отново, дори когато лайтбоксът е "затворен". И ние имаме # containermezhdu елементи наследници #lightboxes. Защо е необходимо да стане ясно в следващия етап.
Също така, ние трябва да видим в същото време само една Лайтбокс, така че добавете към #lightboxes стил.
Етап 4: отваряне и затваряне на лайтбокса
Така че ние вид зададете елементи и позициониране всичко на страницата, но как ще да отваря и затваря Лайтбокс? Точно.
Сега трябва да се отстрани с цвета на фона # Затваряне елемент. за да изглежда така, сякаш няма нищо, и го поставете зад #container елемент, така че ние можем да кликнете върху връзките в #container.
Не забравяйте, че #container елемент, позициониран между елементите на лайтбоксът? Това е причината се крие.
Следващата част от CSS за да добавите към елемент стил # Затваряне.
Сега можете да отваряте и затваряте лайтбоксът!
Как става това? Ако не зададете Z-индекса на елемента, той ще бъде поставен в зависимост от тяхната позиция в кода. Следователно елементи Избрани
Стъпка 5. Добавяне на съдържание към контейнер
В този момент в нашия съд, не много съдържание, така че всичко това е показано на една страница и всичко работи добре. Все пак, ако се добавят няколко страници съдържание, вие ще откриете, че не сме все още там. Появява Лента за превъртане, което ви позволява да преминете през съдържание чужбина Лайтбокс и неговите лежащите слоеве. Това е така, защото, че документът може да се превърта, но лайтбоксът е само 100% от височината на прозореца, а не документ. #container елемент също има 100% от височината на прозореца, така че най-лесното решение е да се прелее на контейнера, така че тя ще се превърта вместо документа. Добавянето на елемент стил #container.
Ако сега погледнем документ ви в Internet Explorer, ще се види, две ленти за превъртане. Един за #container и недостъпни плъзгач за документа. Това е лесно да се коригира чрез добавяне на CSS код в следващия раздел за IE:
Целият документ ще изглежда така:
заключение
Всичко на свършената работа е само тест на сила, и е малко вероятно, че някой ще го използва в реални проекти. Но никой не може да знае кои мисли и идеи може да прокара подобен опит!
Малкият ефект с интерактивни анимационни герои.
Малък концепция за забавни съвети, които се изпълняват на SVG и anime.js. В допълнение към специалната стил в примера реализира анимация и преобразуване на графични обекти.
Експеримент: анимирани SVG писма базирани anime.js библиотека.
Cool уеб страница дисплей на експеримента, които "първо лице" чрез слънчеви очила.
пилотен сценарий падащото навигация.
Dicky_forester
колелцето на мишката неадекватен отговор
postaltomsk
вие не можете да свалите и да поставите в колекция) THX
както и се движи курсора на мишката върху лентата за превъртане, а след това всичко изчезва (опера ст. 10,62)
Много глупави изглежда като произведение на демо бутон.
На kalosiko Bat защо прозорец отговаря? това не е необходимо.
knyazsergei
Когато директно върху кутията на светлина се превърта, той си тръгва, но страницата не преминете!
Няколко хакове прилагат и персонализирани стилове Както всички правила, дори и сложи DLE
Хората, колкото е възможно като realties правят ако proyzashla някои realties грешка в tokuyu изходящия прозорец?
очевидно му текст по-лесно да се чете от търсачките. BU дори може да е да ги замени feysboks, дори и само да не преминете Колесен))
tasmanangel
Свали кода "на източника на урок." Няма нищо свитъци, въпреки че кодът като едно и също нещо. Но аз не се сравни напълно.
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!