ጥሩ ተቆልቋይ ምናሌ በጃቫስክሪፕት ውስጥ ብቻ ሳይሆን መደበኛ የኤችቲኤምኤል መለያዎችን በመጠቀምም ሊፈጠር ይችላል። ተቆልቋይ ምናሌን የመፍጠር ይህ ዘዴ ጣቢያዎችን በመፍጠር የመጀመሪያ እርምጃዎቻቸውን ለጀመሩ እና በገጾች ላይ ምናሌዎችን የመፍጠር ስራን ለማቃለል ለሚፈልጉ ጠቃሚ ይሆናል ፡፡
መመሪያዎች
ደረጃ 1
በኤችቲኤምኤል ኮድ ውስጥ እንደዚህ ያለ ምናሌ በውስጣቸው የጎጆ ዝርዝር ያላቸው ያልተዘረዘረ ዝርዝር ነው ፡፡ ለመጀመር የቅጥ.ሲ.ሲ.ሲ. ፋይል ይፍጠሩ እና ምናሌውን ለመቅረጽ እና ቅርፀት ለማድረግ የሚከተለውን የ CSS ኮድ እዚያ ይቅዱት
# ናቭ ፣ # ናቭ ኡል {
ዝርዝር-ዘይቤ;
ህዳግ: 0;
መቅዘፊያ: 0;
ወሰን: 1 ፒክስል ጠንካራ # 000;
ዳራ: # 515151;
ተንሳፋፊ: ግራ;
ስፋት 100%;
}
# ናቭ ሊ {
ተንሳፋፊ: ግራ;
አቀማመጥ: ዘመድ;
የጀርባ-ቀለም # 003366;
ጀርባ / መሬት: የለም;
}
# ናቭ ሊ ኡል {
ማሳያ: የለም;
አቀማመጥ: ፍጹም;
የጀርባ-ቀለም # 003366;
መቅዘፊያ: 8 ፒክስል 0;
ስፋት 138 ፒክስል;
}
ደረጃ 2
አሁን ወደ ምናሌ ንጥሎች ጥቂት ማስጌጫዎችን ማከል ያስፈልገናል ፡፡ ስፋቱን እና ቁመቱን ለእነሱ ይግለጹ ፣ የመስመሩ መስመሮችን ያስወግዱ ፣ ለእያንዳንዱ አገናኝ ግልጽ የሆነ ስፋት ያዘጋጁ እና የሚፈለጉትን የጀርባ ቀለሞች ይግለጹ ፡፡
ደረጃ 3
ለእነዚህ ለውጦች ሁሉ የሚከተለውን ኮድ ወደ ፋይሉ ያክሉ
# ናቭ አንድ {
ቀለም #fff;
ጽሑፍ-ማጌጫ-የለም;
ማሳያ: አግድ;
ስፋት 120 ፒክስል;
መቅዘፊያ: 4px 10px;
የጀርባ-ቀለም: # 003366 መድገም-y ቀኝ;
}
#nav a: ማንዣበብ {
ቀለም # 000;
የጀርባ-ቀለም: # 0033FF;
}
#nav li: ማንዣበብ {
የጀርባ-ቀለም # 333333;
}
ከዚያ ምናሌውን ለማጠናቀቅ የሚከተለውን ኮድ ያክሉ:
#nav li: ማንዣበብ ሊ ኡል {
ማሳያ: የለም;
ስፋት 138 ፒክስል;
ከላይ: -9px;
ግራ 133 ፒክስል;
}
#nav li: hover li: ማንዣበብ ኡል {
ማሳያ: ብሎክ;
}
ደረጃ 4
በኤችቲኤምኤል ስሪት ውስጥ አጠቃላይ ያልተመዘገበው ምናሌ ዝርዝር ይህን ይመስላል - በእሱ መሠረት ፣ በአንቀጹ ውስጥ የተጠቀሰው ምናሌ ተፈጠረ ፡፡
- ቤት
-
ካታሎግ
-
ሁሉም ምርቶች
- እስከዛሬ
- አምራቾች
- ሌላ
-
