Маркерът се използва активно в уеб дизайна за създаване на блокове на html страници, вътре в които можете да поставите съдържание от всякакво естество - текст, картинки, таблици и т.н.
Инструкции
Етап 1
Когато се използва, се изисква краен маркер. Може да се използва със следните атрибути:
- подравняване - подравняване (вляво, в центъра, вдясно, подравняване), например Text;
- клас - име на клас (Текст);
- id - името на идентификатора на html тагове;
- стил - посока на стила;
- заглавие - подсказка.
Стъпка 2
Когато използвате блокове, препоръчително е да използвате таблица със стилове. Например, ако искате да създадете два различни блока със съдържание на страница, тогава кодът ще изглежда по следния начин:
.block1 {
ширина: 500px;
височина: 200px;
фон: жълт;
подплата: 0px;
подложка вдясно: 0px;
граница: плътна 0px черна;
плувка: ляво;
}
.block2 {
ширина: 200px;
височина: 500;
фон: зелен;
подплата: 0px;
подложка вдясно: 0px;
граница: плътна 0px черна;
плувка: вдясно;
}
Жълтият блок е първият с ширина 500px и дължина 200px.
Зеленият блок е първият с ширина 200px и дължина 500px.
Стъпка 3
Дясното / лявото подравняване на блоковете може да се зададе, като се използват стилове:
.leftimg {
плувка: ляво;
марж: 5px 15px 7px 0;
}
.rightimg {
плувка: вдясно;
марж: 7px 0 7px 7px;
}
Стъпка 4
С помощта на етикета можете да организирате променливата промяна на снимките.
div # rotator {позиция: относителна; височина: 150px; поле вляво: 15px;}
div # rotator ul li {float: ляво; позиция: абсолютна; стил на списъка: няма;}
div # rotator ul li.show {z-index: 500;}
функция theRotator () {
$ ('div # rotator ul li'). css ({непрозрачност: 0.0});
$ ('div # rotator ul li: first'). css ({непрозрачност: 1.0});
setInterval ('rotate ()', 5000);
}
функция rotate () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: first'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var следващ = $ (sibs [rndNum]);
next.css ({непрозрачност: 0.0})
.addClass ('шоу')
.animate ({непрозрачност: 1.0}, 1000);
current.animate ({непрозрачност: 0.0}, 1000)
.removeClass ('show');
};
$ (документ).ready (функция () {
theRotator ();
});
