Дива хэрхэн бүтээх вэ?

Текст, зураг, хүснэгт гэх мэт агуулга бүхий агуулгыг оруулах боломжтой HTML хуудсанд блок үүсгэх үүднээс уг шошгыг вэб дизайн хийхэд идэвхтэй ашигладаг.

Зааварчилгаа

1-р алхам

Ашигласан тохиолдолд төгсгөлийн шошго шаардлагатай. Үүнийг дараахь шинж чанаруудтай хамт ашиглаж болно.

- зэрэгцүүлэх - зэрэгцүүлэх (зүүн, төв, баруун, зөвтгөх), жишээлбэл, Текст;

- анги - ангийн нэр (Текст);

- 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 {хөвөх: зүүн; албан тушаал: туйлын; жагсаалтын хэв маяг: байхгүй;}

div # rotator ul li.show {z-index: 500;}

theRotator () функц {

$ ('div # rotator ul li'). css ({тунгалаг байдал: 0.0});

$ ('div # rotator ul li: first'). css ({opacity: 1.0});

setInterval ('эргүүлэх ()', 5000);

}

функцийг эргүүлэх () {

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 next = $ (sibs [rndNum]);

next.css ({тунгалаг байдал: 0.0})

.addClass ('show')

.animate ({тунгалаг байдал: 1.0}, 1000);

current.animate ({тунгалаг байдал: 0.0}, 1000)

.removeClass ('show');

};

$ (баримт бичиг). бэлэн (функц () {

theRotator ();

});