01 ቀን 06
በሲ.ሲ.ኤስ. እና ምስሎች ምስልን እንዴት እንደሚፈጥሩ
በድረ-ገጾች ላይ አሰሳ ዝርዝር የሆነ ዝርዝር ነው, እናም በትዕስት አሰሳ እንደ አግድም ዝርዝር ነው. በሲኤስኤስ ውስጥ አግድመት የትር ዳሰሳን መፍጠር ቀላል ነው, ነገር ግን CSS 3 ተጨማሪ የሆኑ መሳሪያዎችን እንዲመስሉ ለማድረግ ያስችለናል.
ይህ ማጠናከሪያ የ CSS የተሰበሰቡ ምናሌዎችን ለመፍጠር የሚያስፈልጉትን በኤችቲኤምኤል እና በሲ.ኤስ.ኤስ ውስጥ ይወስድዎታል. ምን እንደሚመስል ለማየት በሚቀጥለው አገናኝ ላይ ጠቅ ያድርጉ.
ይህ የትርፍ ምናሌ ምንም ኤችቲኤምኤል እና የ CSS 2 እና CSS 3 ምስሎችን አይጠቀምም. ተጨማሪ ትሮችን ለመጨመር ወይም ጽሁፉን ለመቀየር በቀላሉ አርትዕ ሊደረግ ይችላል.
የአሳሽ ድጋፍ
ይህ የትር ምናሌ በሁሉም ዋና አሳሾች ላይ ይሰራል. የበይነመረብ አሳሽ የተጠጋ ማእዘኖችን አያሳይም, ግን አለበለዚያ እንደ Firefox, Safari, Opera እና Chrome የመሳሰሉ ትሮችን ያሳያል.
02/6
የእርስዎን ዝርዝር ዝርዝር ይጻፉ
ሁሉም የአሰሳ ምናሌዎች እና ትሮች በትክክል ያልተዘጋጀ ዝርዝር ናቸው. ስለዚህ ማድረግ የሚፈልጓት የመጀመሪያ ነገር ያልተመረጠ የአገናኞቹን ዝርዝር በየትኛው የታብ አሰሳዎ እንዲሄድ የሚፈልጉትን አድራሻ መጻፍ ነው.
ይህ መማሪያ በኤችቲኤምኤል ውስጥ ኤች ቲ ኤም ኤልዎን እየጻፉ መሆኑን እንዲሁም በድረ-ገጽዎ ውስጥ ላለው ምናሌዎ ኤችቲኤምኤል የት ቦታ እንደሚሰቅሉ ያውቃሉ.
ያንተ የማይታዘዝ ዝርዝር እንዲህ ይጻፉ:
- class = "tablist">
- CSS 3
- id = "current"> ትሮች
- ለ
- ምናሌዎች
ኮዱ ሁለት ነገሮችን እንደሚጠቅስ ያስተውላሉ: class = "tablist" እና id = "current". የመጀመሪያው ይጠየቃል . የሽብሪድ ክፍሉን ባልተደረደረ ዝርዝርዎ ውስጥ ካላስቀመጡ ትሩ አይሰራም. ሁለተኛው አማራጭ ነው. በዛ ገጽ ላይ ምልክት ማድረግ በሚፈልጉት ማንኛውም ቦታ ላይ id = "current" ን ያስቀምጡት. እኔ የምጠቀምበትን ገጽ ለማብራት በአብዛኛው ይሄን እጠቀማለሁ, ነገር ግን በጣም አስፈላጊውን ትር ለማጉላት ሊጠቀሙበት ይችላሉ. ወይም ሙሉ ለሙሉ ሊያስወግዱት ይችላሉ.
03/06
የእርስዎን ቅጥ ገጽታ ማርትዕ ይጀምሩ
ወይም የውጫዊ ቅጥ ሉህ ወይም የውስጣዊ ቅጥ ገጽ መጠቀም ይችላሉ. የናሙና ገፁ ገጽ በሰነዱ ውስጥ <ራስ> ውስጥ የውስጠኛ ቅጥ ገጽ ይጠቀማል.
በመጀመሪያ እራሱን ከእሱ እንቀላቅለዋለን
እዚህ ቦታ እዚህ ላይ ኤችቲኤምኤል የመማሪያ ክፍልን እንጠቀማለን. በርስዎ ገጽ ላይ ሁሉንም ያልተመዘገቡ ዝርዝሮች ቅደም ተከተል የሚያደርግ የ UL መለያን አለማቀፍ ከማድረግ ይልቅ የ UL ክፍሎችን ብቻ ቅደም ተከተል መከተል አለብዎት. ታብላሪ ስለዚህ የርስዎ CSS ወስጥ የመጀመሪያ ግቤት መሆን ያለበት:
.tablist {}የመጨረሻውን የኮድ እከን (}) ቀድመው ማስቀመጥ እወዳለሁ, ስለዚህ በኋላ ላይ አልረሳውም.
ለአርዕስት ምናሌ ዝርዝር ያልተዘጋጀ የዝርዝር መለያ እየተጠቀምን ቢሆንም ግን ምንም ነጥቦችን ወይም ቁጥሮች ወደ ውስጥ ለመግባት አንፈልግም. ስለዚህ የመጀመሪያውን ቅጥ ማከል ነው. list-style: ምንም; ይህ አሳሹ ለዝርዝር ሲሆን, ምንም ቅድመ-የተያዙ ቅጦች (እንደ ጥይት ወይም ቁጥሮች) ያለ ዝርዝር ነው.
በመቀጠል, የዝርዝርዎ ቁመትን ለመሙላት ከሚፈልጉት ቦታ ጋር ለማዛመድ ይችላሉ. እኔ ለሱ ቁመት 2 አ, እኔ ደግሞ መደበኛውን የቅርፀ-ቁምፊ መጠነ-እጥፍ በመምረጥ, እና ከትርጉም ግማሽ በላይ የሆነውን እና ግማሽ በላይ የሆነውን ይሰጣል. ቁመት: 2 ደ; ግን የእርስዎን ስፋር ሊፈልጉት የሚፈልጉትን መጠን ማዘጋጀት ይችላሉ. UL መለያዎች ከመደፊያው 100% በራስ-ሰር ይወስዳሉ, ስለዚህ ከአሁኑ መያዣ አነስ ሹልት ካልፈለጉ, ወራጩን መውጣት ይችላሉ.
በመጨረሻም, ጌታዎ የቅጡ ሉህ ለ UL እና OL መለያዎች ቅድመ መቅረቶች ከሌለው እንዲገቡዋቸው ይፈልጋሉ. ይህ ማለት በ UL ላይ ያሉትን ድንበሮች, ጠርዝ እና ማሸጊያዎችን ማጥፋት አለብዎት. ማጣበቂያ: 0; ኅዳግ: 0; ድንበር: ምንም; አስቀድመህ የ UL መለያ ዳግም ማስጀመር ከሆንክ, ንድፍህን, ማስተካከልን ወይም ከንድፍህ ጋር ለሚሄድ ነገር መቀየር ትችላለህ.
የመጨረሻው ጎብኚዎች ክፍልዎ የሚከተለውን ይመስላሉ:
.tablist {list-style: none; ቁመት: 2 ደ; ማጣበቂያ: 0; ኅዳግ: 0; ድንበር: ምንም; }04/6
የ LI የመደመር ዝርዝር ንጥሎችን በማረም ላይ
ያልተመዘገበዎ ዝርዝር ካደረጉ በኋላ, በውስጡ ያሉትን የ LI መለያዎችን መምሰል ያስፈልግዎታል. አለበለዚያ ግን እንደ መሰረታዊ ዝርዝር ይሰራሉ እና እያንዳንዱን ትሮችዎን ሳይጨምር ወደ ቀጣዩ መስመር ይንቀሳቀሳሉ.
በመጀመሪያ, የእርስዎን የቅልት ባህሪ ያቀናብሩ:
.bat li {}ከዚያ በአግሮጌው አውሮፕላን ላይ እንዲቀመጡ ትሮችዎን ለማራተት ይፈልጋሉ. ተንሳፈው: ግራ;
እና በትሮች መካከል አንዳንድ ሽፋኑን መጨመር እንዳይረሱ, ስለዚህ አብረው አይጣመሩም. ህዳግ-ቀኝ: 0.13 ኤም;
የእርስዎ የፈጠራ ስልቶች የሚከተለውን ይመስላሉ:
. li {float: left; ህዳግ-ቀኝ: 0.13 ኤም; }05/06
በትራፊክ መስራት በሲኤስ 3 ያሉ ትሮችን ይመስላሉ
በዚህ የቅጥ ሉህ ውስጥ ብዙውን ከባድ የማንሳት ስራ ለመስራት እኔ ባልተዘረዘረው ዝርዝር ውስጥ ያሉትን አገናኞች እፈጥራለሁ. አሳሾች አገናኞች ከሌሎች መለያዎች ይልቅ በድረ-ገጽ ላይ እንደሚሰሩ እውቅና ይሰጣሉ, ስለዚህ እንደ የመጠባበቂያ መለያ (አገናኞች) ካያዟቸው አሮጌ ማሰሻዎችን እንደ የመጠባበቅ ሁኔታዎችን እንዲያከብሩ ለማገዝ ቀላል ነው. ስለዚህ በመጀመሪያ የእርስዎን ቅጥ ባህሪያት ይፃፉ:
.tablist li a {} .tablist li a: hover {}እነዚህ ትሮች በመተግበሪያ ውስጥ እንደ ትሮች መስራት ስላለባቸው, የትሩ አጠቃላይው ቦታ ጠቅ የተደረገው ፅሁፍ ሳይሆን ጠቅ ማድረግ እንዲችል ይፈልጋሉ. ይህንን ለማድረግ የ መለያን ወደ መደበኛው " መስመር ውስጥ " ሁኔታ ወደ < ግድግዳ አባል> መቀየር አለብዎት. ማሳያ: አግድ; (ስለ ልዩነት የበለጠ ለማወቅ ፍላጎት ካሎት Block-Level vs. Inline Elements የሚለውን ማንበብ).
ከዚያም, ትሮችዎ እርስ በርስ እንዲስማሙ ለማስቻል ቀላል መንገድ ነው, ነገር ግን ጽሑፉ ከርዕሰ-ጉዳዩ ጋር ለመገጣጠም የተገቢው መንገድ ወደ ቀኝ እና ግራ መታጠፍ ነው. ከላይ ያለውን እና ታችን ወደ 0 እና ወደ ቀኝ እና ወደ 1em ለመለየት የ "padding" ቁንጽል ባህሪን ተጠቀምሁ. ጥቅል: 0 1em;
እንዲሁም አገናኞቹን እንደ አገናኞች ትንሽ እንዲመስሉ አገናኙን ከስር ማውጣትን ለማስወገድ መርጣለሁ. ነገር ግን አድማጮችህ በዛው ግራ ቢጋቡ ይህን መስመር ተወው. አገናኝ-ማስገር: ምንም;
በትራኮች ዙሪያ አንድ ቀጭን ክፈፍ በማስቀመጥ ትሮችን ይመስላሉ. ባለ አራት ማዕዘን ጠርዝ በዙሪያው ያሉትን ክፈፎች በመጠቀም የድንበር አሻራ ባህሪን እጠቀም ነበር. እና ከዚያ ከታች ያለውን ለመውሰድ ጠርዝ-ታች ንብረቱን ይጠቀሙ. ግርጌ-ታች: 0;
ከእዚያ የትርጉም ካሬዎች, ቀለም እና የጀርባ ቀለም አንዳንድ ማስተካከያዎችን አድርጌያለሁ. እነዚህን ከጣቢያዎ ጋር ለሚጣጣሙ ቅጦች ያቀናብሩ. ቅርጸ-ቁምፊ: ደማቅ 0.88em / 2em arial, geneva, helvetica, sans-serif; ቀለም # 000; የበስተጀርባ - ቀለም: #ccc;
ከላይ ያሉት ሁሉም ቅጦች በመረጡት ቦታ ውስጥ መሄድ አለባቸው. ትሮችን የበለጠ ጠቅ ሊደረጉ በሚችሉበት ጊዜ, ጥቂት የክፍለ-ግዛት ሕጎችን ማከል አለብዎት.
ትርጉሙ ሲነካው ትር ብቅ የሚለው ብቅ እንዲል የፅሁፍ እና የጀርባ ቀለም መቀየር እፈልጋለሁ. ጀርባ: # 3cf; ቀለም: #fff;
እንዲሁም አገናኙን እንዲመርጡ የምፈልጋቸውን አሳሾች ሌላ አስታዋሽ ያካትት ነበር. ጽሑፍ-ማስገር: ምንም; ሌላኛው የተለመደ ዘዴ ትሩን ላይ ሲያንዣብቡ ከበድ ያለ ማሽከርከር ነው. ይህን ለማድረግ ከፈለጉ, ለፅሁፍ-ማስገር ይለውጡ: ከስር መስመር ላይ;
ግን CSS3 የት አለ?
ትኩረት እየሰጡ ከሆነ, በቅጥ ሉሆች ውስጥ ምንም የ CSS 3 ቅጦች አለመኖራቸውን ሳያውቁ ይሆናል. ይህ የኢንተርኔት ኤክስፕሎረር ጨምሮ በየትኛውም ዘመናዊ ማሰሪያ ውስጥ መሥራት ጥቅሞች አሉት. ነገር ግን ትሮቹን ከካሬ ሳጥኖች ውጭ ምንም ነገር አይመስልም. የ CSS 3 ቅጥን ከክፍለ-ራዲየስ (በ "አሳሽ-ተኮር" ጥሪዎች ጋር በማከል) ጠርዙን ዙሪያውን እንዲሰሩ ለማድረግ, በማኒላ አቃፊ ውስጥ ትሮችን ለመምሰል ይችላሉ.
ወደ .tablis ላይ ማከል ያለብዎት ቅደም ተከተሎች -webkit-border-right-radius: 0.50em; -ዌብ-ኪት-ድንበር-ከላይ ወደ ግራ-ራዲየስ: 0.50 ኤም; -ሞዝ-ድንበር-ራዲየስ-ወደ ጫፍ: 0.50em; -ሞዝ-ክፈፍ-ራዲየስ-ተጭነው-0.50 ኤም; ክፈፍ-ቀኝ-ራዲየስ-0.50 ኤም; ወሰን-ከላይ-ግራ-ራዲየስ: 0.50 ኤም;
እነዚህ እኔ የጻፍኳቸው የመጨረሻው የቅጥ መመሪያዎች ናቸው:
.tablist li a {display: block; ጥቅል: 0 1em; ጽሑፍ-ማስገር: ምንም; ክፈፍ: 0.06 ደ ጠንካራ # 000; ግርጌ-ታች: 0; ቅርጸ-ቁምፊ: ደማቅ 0.88em / 2em arial, geneva, helvetica, sans-serif; ቀለም # 000; የበስተጀርባ - ቀለም: #ccc; / * CSS 3 ክፍሎች * / webkit-border-right-radius: 0.50em; -ዌብ-ኪት-ድንበር-ከላይ ወደ ግራ-ራዲየስ: 0.50 ኤም; -ሞዝ-ድንበር-ራዲየስ-ወደ ጫፍ: 0.50em; -ሞዝ-ክፈፍ-ራዲየስ-ተጭነው-0.50 ኤም; ክፈፍ-ቀኝ-ራዲየስ-0.50 ኤም; ወሰን-ከላይ-ግራ-ራዲየስ: 0.50 ኤም; } .tablist li a: hover {background: # 3cf; ቀለም: #fff; ጽሑፍ-ማስገር: ምንም; }በእነዚህ ቅጦች አማካኝነት በሁሉም ዋና አሳሾች ላይ የሚሰራ በትር የተቀመጠ ምናሌ እና በሲኤስ 3 አሳታሪ አሳሾች ውስጥ ያሉ ጥሩ የታተመ ትሮችን ይመስላል. የሚቀጥለው ገጽ ለበለጠ መረጃ ለማቅረብ የበለጠ አንድ አማራጭ ይሰጥዎታል.
06/06
የአሁኑን ትር ያድምቁ
እኔ በፈጠርኩት ኤች.ኤል.ኤል (ኤች.ኤል.ኤል) ውስጥ አንድ ዩኤ ኤል አንድ መታወቂያ ያለው አንድ ዝርዝር አለው. ይህም ከተቀረው ቀያፊ ውስጥ አንዱን ፈለግ ለሌላ ለማቅረብ ያስችልዎታል. በጣም የተለመደው ሁኔታ የአሁኑን ትርብጥ በተለየ መልኩ ማዘጋጀት ነው. ይህንኑ እንዲያስታውቅ የሚረዳበት ሌላኛው መንገድ በቀጥታ ላልሆኑ ትሮችን ማቅለል ነው. ከዚያም መታወቂያው በተለያዩ ገጾች ላይ በሚለወጥበት ቦታ ይለወጣሉ.
ሁለቱም ቋሚ መለያዎች እንዲሁም የ # ተደጋጋሚ A: አንዣብ መለጠፍ ሁሇቱም ትንሽ ናቸው. ቀለሙን, የጀርባውን ቀለም, የዚያን ኤለመንት ቁመት, ስፋትና ፓድል ጨምሮ መለወጥ ይችላሉ. በንድፍዎ ውስጥ የሚለወጡ ለውጦችን ያድርጉ.
.tablist li # current a {background-color: # 777; ቀለም: #fff; } .tablist አልባ # ወቅቱ a: hover {background: # 39C; }እና ጨርሰሃል! ለድር ጣቢያዎ አንድ የታብል ምናሌ ፈጥረዋል.