መለያው በኤችቲኤምኤል ገጾች ላይ ብሎኮችን ለመፍጠር በድር ዲዛይን ውስጥ በንቃት ጥቅም ላይ ይውላል ፣ በውስጡም ማንኛውንም ይዘት - ጽሑፍ ፣ ስዕሎች ፣ ጠረጴዛዎች ፣ ወዘተ.
መመሪያዎች
ደረጃ 1
ጥቅም ላይ በሚውልበት ጊዜ የመጨረሻ መለያ ያስፈልጋል። ከሚከተሉት ባህሪዎች ጋር መጠቀም ይቻላል
- አሰላለፍ - አሰላለፍ (ግራ ፣ መሃል ፣ ቀኝ ፣ ትክክለኛ) ፣ ለምሳሌ ፣ ጽሑፍ;
- ክፍል - የክፍል ስም (ጽሑፍ);
- id - የ html መለያ መለያ ስም;
- ዘይቤ - የቅጥ መመሪያ;
- ርዕስ - የመሳሪያ ጫወታ።
ደረጃ 2
ብሎኮችን ሲጠቀሙ የቅጥ ሉህ መጠቀሙ ተገቢ ነው ፡፡ ለምሳሌ ፣ በአንድ ገጽ ላይ በይዘት ሁለት የተለያዩ ብሎኮችን መፍጠር ከፈለጉ ኮዱ እንደዚህ ያለ ነገር ይመስላል
. ብሎክ 1 {
ስፋት 500px;
ቁመት 200px;
ዳራ: ቢጫ;
መቅዘፊያ: 0px;
መቅዘፊያ-ቀኝ: 0px;
ድንበር: ጠንካራ 0 ፒክስል ጥቁር;
ተንሳፋፊ: ግራ;
}
. ብሎክ 2 {
ስፋት: 200px;
ቁመት 500;
ዳራ: አረንጓዴ;
መቅዘፊያ: 0px;
መቅዘፊያ-ቀኝ: 0px;
ድንበር: ጠንካራ 0 ፒክስል ጥቁር;
ተንሳፋፊ: ትክክል;
}
ቢጫው ብሎክ የመጀመሪያው 500px ስፋት እና 200px ርዝመት ያለው ነው ፡፡
አረንጓዴው ብሎክ የ 200 ፒክስል ስፋት እና 500 ፒክስል ርዝመት ያለው የመጀመሪያው ነው ፡፡
ደረጃ 3
የአንድን ብሎኮች የቀኝ-ግራ / የግራ አሰላለፍ ዘይቤዎችን በመጠቀም ማዘጋጀት ይቻላል-
.ftftimg {
ተንሳፋፊ: ግራ;
ህዳግ: 5 ፒክስል 15 ፒክስል 7 ፒክስል 0;
}
.rightimg {
ተንሳፋፊ: ትክክል;
ህዳግ 7px 0 7px 7px;
}
ደረጃ 4
በመለያው እገዛ የስዕሎችን ተለዋጭ ለውጥ ማደራጀት ይችላሉ ፡፡
div # rotator {position: አንፃራዊ; ቁመት: 150px; ህዳግ-ግራ: 15px;}
div # rotator ul li {ተንሳፋፊ: ግራ; አቀማመጥ: ፍጹም; ዝርዝር-ዘይቤ-የለም ፤}
div # rotator ul li.show {z-index: 500;}
ተግባር ሮተር () {
$ ('div # rotator ul li')። css ({opacity: 0.0});
$ ('div # rotator ul li: first')። css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
ተግባር ማሽከርከር () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). ርዝመት)? ((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 ({opacity: 0.0})
.addClass ('show')
. ግምታዊ ({ግልጽነት: 1.0}, 1000);
የአሁኑ ግምታዊ ({ግልጽነት: 0.0}, 1000)
.removeClass ('show');
};
$ (ሰነድ). ቀድሞውኑ (ተግባር () {
ሮተርተር ();
});
