Еквивалентен DIV HTML5 - javascript, html5, html, header

Опитвам се да повторя урока, който бях публикувалпрепраща към предишния въпрос, за да има колкото HTML5 и CSS3 код. Четох в някои онлайн статии, че в HTML5 те се опитват да се отърват от идеята за Div тагове, а по-скоро настояват за нещо известно като раздел. Това е правилно наблюдение. Например имам този раздел от кода от горе настойнически. https://skitch.com/android86/r67ey/dreamweaver и какво ме интересува да знам дали трябва да бъдаизползвайки div маркери в моя HTML5 код, или има ли по-добър начин да го направите, отколкото да използвате Div? Това, което имам в моя HTML5 код в момента, е следното. https://skitch.com/android86/r67ej/dreamweaver Благодарим Ви за ценовия вход на групата.

Отговори:

доказателство за концепция за плъзгаща се връзка към съдържанието (с display: block) на мишката, използвайки само CSS3 преходи.
ЗАБЕЛЕЖКА: това е единственият синтаксис за webkit (сафари и хром), за да видите синтаксиса за останалите браузъри: http://css3.bradshawenterprises.com/transitions/
прост елемент със следния стил:

a {
z-index: 100;
position: fixed;
-webkit-transition: all 1s ease-in-out;
display: block;
background-color: black;
width: 100%;
height: 500px; }

и стила на държавния стила:

a:hover { height: 700px; }

Представеният код изглежда добре, но ще включа допълнителните линии, за да обхване Firefox и Opera.

-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

След това можете да използвате Modernizr (http://www.modernizr.com/), за да покриете всички браузъри с резервен Javascript.

Бих използвал нещо подобно:

    a.slideDown {
z-index: 100;
position: fixed;
display: block;
background-color: black;
width: 100%;
height: 500px;
-webkit-transition: top .2s ease;
-moz-transition: top .2s ease;
-o-transition: top .2s ease;
transition: top .2s ease;
top:5px;

}

a:hover.slideDown {
top:495px;
}

Ако сте включили CSS3 като част от HTML5 (което трябва да позволите анимация!), Разгледайте: http://css3.bradshawenterprises.com/sliding/ , JQuery не е необходимо, вместо това можете да използвате: target pseudo елемент.

За вашия случай просто задайте преход на елемента, след което променете височината или най-високата стойност, като използвате избрания обект.

Това вероятно е около 4 реда код, ако искате да работи само в по-нови браузъри.

Съгласен съм с коментарите за използването на CSS3 запреходи. Използвах това на портфолио и изглежда доста добре. Това е само няколко реда код и ако браузърът не поддържа преходите, той пак ще покаже съдържанието на курсора на мишката, само без анимацията.