አቀባዊ CSS ምናሌ: ራስህ በማድረግ

አንዳንድ የድር ጌታዎች ቀደም መኖራቸውን ከባዶ ቀላል ንጥረ ነገሮች ከ በማደግ ላይ ጊዜ ማሳለፍ አይፈልጉም. እነዚህ ለረጅም ጊዜ በዚያ ቆይቷል ነገር ላይ ጊዜ ከማባከን ውስጥ ምንም ነጥብ የለም እንደሆነ ያምናሉ. እንዲያውም, ልክ HTML እና CSS አቀላጥፈው ናቸው ሰዎች, ሰዎች ሥራ ጥሩ ግንዛቤ እንዲኖራቸው ራስህ ብዙ ነገሮችን ማድረግ አስፈላጊ ነው. ይህ ምናሌ ይመለከታል. አንድ ቋሚ የሲ ምናሌዎች ይፍጠሩ. ጃቫስክሪፕት እና JQuery በመጠቀም ያለምንም ብቻ HTML እና CSS ላይ የተመሠረተ ይሆናል. ለእያንዳንዱ ምናሌ ወደ ጣቢያው ገጾች ወደ የሚያመሩ አገናኞች ዝርዝር ነው.

መሠረታዊ እርምጃዎች

ቀላል ለመፍጠር ቋሚ ምናሌ የሲ, የሚከተሉትን ደረጃዎች ያስፈልግዎታል:

1. በመጀመሪያ, ወደ ምናሌ ይሆናል ይህም አገናኞች (ኮድ ኤችቲኤምኤል በመጠቀም), ዝርዝር ይወስናል. ለምሳሌ ያህል, እንደሚከተለው ናቸው, በእነርሱ ስም ይስጡ:

1. መነሻ.
2. የእኛ ታሪክ.
3. Guide.
4. አገልግሎቶች.
5. እውቅያዎች.

እናንተ የሲ እርዳታ የሚፈልጉ እንደ 2. ከዚያም አገናኞችን ቅጥ.

እኛ መጻፍ , HTML ኮድ my_Vmenu.html ፋይል ውስጥ ለመጠበቅ እና በአሳሹ ውስጥ ምን እንደሚመስል ለማየት:

ይህ ምናሌ መሠረት (አጽም) ነው. # 1, # 2, ወዘተ ማጣቀሻ መተካት አለበት. አንድ አሳሽ ውስጥ ምን እንደሚመስል ይመልከቱ. የሚወዷቸውን አይደለም ያለው ስዕል. አሁን ሙሉ ቋሚ የሲ ምናሌዎች ለማድረግ, የአጻጻፍ ክፍሎች ለመግለጽ መጀመር አለበት.

መግለጫ ቅጦች

እናንተ ጣቢያው እንዲህ ያለ ጠቃሚ ንጥረ መልክ ለማሻሻል የሚፈልጉ ሁሉ ለማዘጋጀት አንድ ፋይል my_Vmenu.css, ይፍጠሩ. እዚህ ላይ አቀባዊ የሲ ምናሌዎች ለማደስ ይሆናል መግቢያ የትኛው ኮድ ነው. ይህም እና አዲሱ ፋይል ለመጻፍ, ከዚያም እኛ ይበልጥ መውሰድ የተሰጠ መሆኑን ዋና መስመሮች መካከል ያለውን ትርጉም እንመለከተዋለን.

ዝርዝር መግለጫ ተጠቅሟል stylesheet

አሁን የእኛ CSS ቋሚ ምናሌ ውስጥ በዝርዝር እንመልከት:

ዝርዝር-ቅጥ-አይነት እናንተ ማርከር ዝርዝር ለማስወገድ ይፈቅዳል. የ ህዳግ እና ድብዳብ ወደ «0» ቅንብር ዝርዝር ውስጥ ተጨማሪ ድብዳብ ማስወገድ. የ HTML ኮድ ከ ሊታይ የሚችለው እንደ የእኛ ምናሌው ዝርዝር ነው, እና ቅጦች CSS በመጠቀም የተገለጹ ናቸው.

ul # my_Vmenu - ሙሉውን ዝርዝር አጠቃላይ ቅጥ.

ul # my_Vmenu ሊ ሀ - የ መለያ ሊ መካከል አይነት አገናኞች.

ul # my_Vmenu ሊ አንድ: ማንዣበብ - አንድ ሕዝብ ላይ ሲያንዣብብ በአንድ ጊዜ ምናሌ ንጥሎች ከግምት በታች አይነት መግለጫ.

ul # my_Vmenu ሊ አንድ ስንዝር - የፅሁፍ መግለጫ (አርዕስት ምናሌ).

ይህ my_Vmenu.css my_Vmenu.html ፋይሎች እና ተመሳሳይ ማውጫ ውስጥ ተጠብቆ መሆን አለበት ያስታውሱ. ይሁን እንጂ, እነዚህ በተለያዩ አቃፊዎች ውስጥ የሚገኙ ሊሆን ይችላል, ነገር ግን ከዚያ my_Vmenu.css ወደ my_Vmenu.html የፋይል ዱካ ውስጥ ለመመዝገብ አስፈላጊ ነው. ምክንያቱም ይህ ችግር ወደ መጤዎች ብዙውን ጊዜ, ይጠንቀቁ.

ቅጥ የ html-ፋይል ውስጥ ራስ መለያዎች መካከል መገናኘት አለበት. menu_1.png እና menu_2.png - ይህ የተለመደ ሁኔታ እና ማንዣበብ ውስጥ ያለውን ስዕል ምናሌ ንጥል ስዕል ነው.

ይህም, ምስሎች የተለየ አቃፊ ውስጥ ምስሎች በመረጥነው my_images ስም, ነገር ግን ከዚያም የሲ ኤስ ኮድ ያስተካክሉ የተሻለ ነው. እነዚህ ምስሎች ይታያሉ የት ጻፍ; በዚህ አቃፊ ውስጥ ናቸው: ዩአርኤል (my_images / menu_1.png) እና ዩ አር ኤል (my_images / menu_2.png).

የ CSS ኮድ ውስጥ የተገለጹት ንብረቶች የቀሩት ውስጥ, በቀላሉ ለመረዳት. እነሱ የእኛን ምናሌ ገጽታ መግለጽ. አንተም በእነርሱ ላይ መዳፊቱን ጊዜ ንጥሎች ወርድ እና ቁመት ወደ መደበኛው ሁኔታ ተመሳሳይ ንጥሎች በተጠቀሰው መሆኑን ልብ ቀላል ነው. የፊደል መጠን 18 ፒክስል, ድብዳብ ቦታ ስሞች የተለያዩ ጎኖች ከ በገቡ ይገልጻል. ማሳያ እርስዎ ወርድ እና ድብዳብ ለማዘጋጀት ያለውን ማሳያ አሃድ እንዲያዋቅሩ ያስችልዎታል.

የእኛ ቋሚ ምናሌ

ከዚህ ማየት እንደምትችለው, ወደ ቀዋሚ የሲ ምናሌዎች በቀላሉ ለመፍጠር. የእውቀት ውሂብ መሠረት ላይ ይህ ውብ እና የድር ጣቢያ ጎብኚዎች ማራኪ ማድረግ አትችልም! የእርስዎ ጣቢያ የተሟላ የእርስዎን የፈጠራ; ከዚያም ቄንጠኛ ምናሌ ይጠቀሙ.