06 ൽ 01
എങ്ങനെ CSS നും ചിത്രങ്ങളോടും ഉള്ള ടാബ്ചെയ്ത നാവിഗേഷൻ സൃഷ്ടിക്കാൻ
വെബ് പേജുകളിലെ നാവിഗേഷൻ ഒരു പട്ടികയുടെ ഒരു രൂപമാണ്, കൂടാതെ നാവിഗേഷൻ നാവിഗേഷൻ ഒരു തിരശ്ചീന ലിസ്റ്റ് പോലെയാണ്. തിരശ്ചീനമായ ടാബിൽ നാവിഗേഷൻ നിർമ്മിക്കുക വളരെ എളുപ്പമാണ്, പക്ഷേ സിഎസ്എസ് 3 അവയെ കുറച്ചുകൂടി മെച്ചപ്പെടുത്തുന്നതിന് കൂടുതൽ ഉപകരണങ്ങൾ നൽകുന്നു.
ഈ ട്യൂട്ടോറിയൽ നിങ്ങളെ ഒരു CSS ടിൽചെയ്ത മെനു ഉണ്ടാക്കുന്നതിനാവശ്യമായ HTML, CSS എന്നിവയിലൂടെ നിങ്ങളെ കൊണ്ടുപോകും. അത് എങ്ങനെ കാണണമെന്നറിയാൻ ആ ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുക.
ഈ ടാബ് മെനു ഉപയോഗിക്കുന്നത് HTML, CSS 2, CSS 3 എന്നിവ മാത്രമാണ്. അത് കൂടുതൽ ടാബുകൾ ചേർക്കാനോ അവയിൽ ടെക്സ്റ്റ് മാറ്റാനോ എളുപ്പത്തിൽ എഡിറ്റുചെയ്യാൻ കഴിയും.
ബ്രൌസർ പിന്തുണ
ഈ ടാബ് മെനു എല്ലാ പ്രധാന ബ്രൗസറുകളിലും പ്രവർത്തിക്കും . ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ വൃത്താകൃതിയിലുള്ള മൂലകൾ കാണിക്കില്ല, പക്ഷേ, ഫയർഫോക്സ്, സഫാരി, ഓപ്പറ, ക്രോം എന്നിവ പോലെയുള്ള ടാബുകൾ കാണിക്കും.
06 of 02
നിങ്ങളുടെ മെനു പട്ടിക എഴുതുക
എല്ലാ നാവിഗേഷൻ മെനുകളും ടാബുകളും യഥാർത്ഥത്തിൽ ഒരു ക്രമപ്പെടുത്താത്ത ലിസ്റ്റാണ്. അതിനാല് നിങ്ങള് ചെയ്യേണ്ട ആദ്യത്തെ കാര്യം താങ്കളുടെ ടാബിംഗ് നാവിഗേഷന് പോകേണ്ട സ്ഥലത്തെ ഒരു നിരക്കില്ലാത്ത ലിസ്റ്റുകള് എഴുതുക എന്നതാണ്.
ഒരു ടെക്സ്റ്റ് എഡിറ്ററിൽ നിങ്ങളുടെ HTML എഴുതുകയും നിങ്ങളുടെ വെബ് പേജിൽ നിങ്ങളുടെ മെനുവിനായി എച്ചിന്റെ സ്ഥാനം എവിടെയാണെന്ന് നിങ്ങൾക്കറിയാമെന്നും ഈ ട്യൂട്ടോറിയൽ അനുമാനിക്കുന്നു.
ഇതുപോലുള്ള നിങ്ങളുടെ ഇതുപോലുള്ള പട്ടിക എഴുതുക:
- class = "tablist">
- CSS 3
- id = "current"> ടാബുകൾ
- വേണ്ടി
- മെനുകൾ
കോഡ് രണ്ട് കാര്യങ്ങൾ വിളിക്കുന്നുവെന്നത് നിങ്ങൾ ശ്രദ്ധിക്കും: class = "tablist", id = "current". ആദ്യത്തേത് ആവശ്യമാണ് . നിങ്ങളുടെ പട്ടികയിലില്ലാത്ത പട്ടികയിൽ ടാബ്ലറ്റ് ക്ലാസ് നൽകാതിരിക്കുകയാണെങ്കിൽ, ടാബുകൾ പ്രവർത്തിക്കില്ല. രണ്ടാമത്തെ ഓപ്ഷണൽ ആണ്. ആ പേജിൽ ഹൈലൈറ്റ് ചെയ്യാനാഗ്രഹിക്കുന്ന ഏതു ടാബിലെയും id = "current" ഇടുക. ഞാൻ ഉപയോഗിക്കുന്ന പേജുകൾ ഹൈലൈറ്റുചെയ്യുന്നതിന് ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നു, എന്നാൽ ഏറ്റവും പ്രധാനപ്പെട്ട ടാബിൽ നിങ്ങൾക്ക് ഹൈലൈറ്റ് ചെയ്യുന്നതിന് അത് ഉപയോഗിക്കാൻ കഴിയും. അല്ലെങ്കിൽ നിങ്ങൾക്ക് അത് പൂർണ്ണമായി നീക്കംചെയ്യാം.
06-ൽ 03
നിങ്ങളുടെ ശൈലി ഷീറ്റ് എഡിറ്റുചെയ്യാൻ ആരംഭിക്കുക
നിങ്ങൾക്ക് ഒരു ബാഹ്യ ശൈലി ഷീറ്റ് അല്ലെങ്കിൽ ആന്തരിക ശൈലി ഷീറ്റ് ഉപയോഗിക്കാം . പ്രമാണം
ലെ ആന്തരിക ശൈലി ഷീറ്റ് സാമ്പിൾ മെനു പേജ് ഉപയോഗിക്കുന്നു.ആദ്യം നമ്മൾ സ്റ്റൈൽ യുലിൻ തന്നെ ആയിരിക്കും
ഇവിടെയാണ് ക്ലാസ് ടാബ്ലലിസ്റ്റ് ഉപയോഗിക്കുന്നത് .ഇത് HTML ൽ. യു.എൽ ടാഗ് രൂപപ്പെടുത്തുന്നതിനേക്കാളുപരി, നിങ്ങളുടെ പേജിൽ ക്രമമില്ലാതെ ക്രമീകരിച്ച ലിസ്റ്റുകൾ, നിങ്ങൾക്ക് UL ക്ലാസ് മാത്രം മതിയാകും. tablist അതിനാൽ നിങ്ങളുടെ CSS ലെ ആദ്യ എൻട്രി ഇതായിരിക്കണം:
.tablist {}ഞാൻ അവസാനത്തെ വക്കിലുള്ള ബ്രേസിൽ (} മുൻകൂട്ടി തയ്യാറാക്കാൻ ആഗ്രഹിക്കുന്നു), അതുകൊണ്ട് ഞാൻ പിന്നീട് മറക്കരുത്.
ടാബ് മെനു പട്ടികയ്ക്കായി ഞങ്ങൾ ഒരു ക്രമമില്ലാത്ത ലിസ്റ്റ് ടാഗ് ഉപയോഗിക്കുമ്പോൾ, പക്ഷെ നമ്മൾ ഒരു ബുള്ളറ്റോ നമ്പറോ ഇല്ലാത്തപ്പോൾ നമ്മൾ ആഗ്രഹിക്കുന്നില്ല. അതിനാൽ നിങ്ങൾ ചേർക്കേണ്ട ആദ്യ ശൈലി ആണ്. പട്ടിക-ശൈലി: ഒന്നുമില്ല; ബ്രൌസറിനോട് അത് ഒരു പട്ടികയിൽ ഉള്ളപ്പോൾ, അത് മുൻകൂട്ടി നിശ്ചയിച്ചിട്ടുള്ള ശൈലികൾ (ബുല്ലെറ്റ് അല്ലെങ്കിൽ അക്കങ്ങൾ പോലെയുള്ളവ) ഉള്ള ഒരു പട്ടികയാണ്.
തുടർന്ന്, നിങ്ങളുടെ ലിസ്റ്റിന്റെ ഉയരം പൂരിപ്പിക്കാൻ നിങ്ങൾ താൽപ്പര്യപ്പെടുന്ന സ്ഥലവുമായി പൊരുത്തപ്പെടുത്താൻ കഴിയും. ഞാൻ എന്റെ ഉയരത്തിനായി 2മെം തിരഞ്ഞെടുത്തു, അത് സാധാരണ ഫോണ്ട് സൈസ് ഇരട്ടിയായതിനാൽ, ടാബ് ന്റെ ടെക്സ്റ്റിന് മുകളിലെയും മുകളിലെയും പകുതി എം എമ്മിനേയും നൽകുന്നു. ഉയരം: 2 ഇം; എന്നാൽ നിങ്ങളുടെ വീതി, നിങ്ങൾ ആഗ്രഹിക്കുന്നത്ര വലുപ്പത്തിൽ ക്രമീകരിക്കാൻ കഴിയും. UL ടാഗുകൾ വീതിയുടെ 100% സ്വയം എടുക്കും, അതിനാൽ നിങ്ങൾ നിലവിലെ കണ്ടെയ്നറുകളേക്കാൾ ചെറുതായിരിക്കില്ലെങ്കിൽ, നിങ്ങൾക്ക് വീതി വിടാവുന്നതാണ്.
അന്തിമമായി, നിങ്ങളുടെ മാസ്റ്റർ സ്റ്റൈൽ ഷീറ്റിന് UL, OL ടാഗുകൾക്ക് പ്രിസെറ്റുകൾ ഇല്ലെങ്കിൽ, നിങ്ങൾക്കിത് നിർത്താൻ നിങ്ങൾ ആഗ്രഹിക്കും. അതിനർത്ഥം നിങ്ങൾ നിങ്ങളുടെ UL- ൽ ബോർഡറുകളും മാർജിനുകളും പാഡിംഗും ഓഫാക്കേണ്ടതുണ്ടെന്നാണ്. പാഡിംഗ്: 0; മാർജിൻ: 0; അതിർത്തി: ഒന്നുമില്ല; നിങ്ങൾ ഇതിനകം UL ടാഗ് പുനഃസജ്ജമാക്കിയിട്ടുണ്ടെങ്കിൽ, മാർജിനുകൾ, പാഡിംഗ് അല്ലെങ്കിൽ ബോർഡർ നിങ്ങളുടെ രൂപകൽപ്പനയുമായി യോജിക്കുന്ന എന്തെങ്കിലും മാറ്റാൻ കഴിയും.
നിങ്ങളുടെ അന്തിമ .tablist ക്ലാസ്സ് ഇങ്ങനെ ആയിരിക്കണം:
.tablist {list-style: none; ഉയരം: 2 ഇം; പാഡിംഗ്: 0; മാർജിൻ: 0; അതിർത്തി: ഒന്നുമില്ല; }06 in 06
ലിസ്റ്റിന്റെ ലിസ്റ്റ് എഡിറ്റുചെയ്യുന്നു
നിങ്ങൾ നിങ്ങളുടെ ഓർഡഡ് ലിസ്റ്റിന്റെ ശൈലി ഒരിക്കൽ, നിങ്ങൾ അതിൽ ഉള്ള LI ടാഗുകൾ ശൈലിയിൽ വേണം. അല്ലെങ്കിൽ, നിങ്ങളുടെ ടാബുകൾ ശരിയായി വയ്ക്കാതെ ഒരു സ്റ്റാൻഡേർഡ് ലിസ്റ്റും ഓരോ വരിയിലേക്കും അടുത്ത നടപടിയിലേക്ക് അവർ പ്രവർത്തിക്കും.
ആദ്യം, നിങ്ങളുടെ സ്റ്റൈൽ പ്രോപ്പർട്ടി ക്രമീകരിക്കുക:
.tablist li {}തുടർന്ന് നിങ്ങളുടെ ടാബുകൾ ഫ്ലോട്ട് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, അങ്ങനെ അവ തിരശ്ചീന തലത്തിൽ വരയിരിക്കും. ഫ്ലോട്ട്: ഇടത്;
ടാബുകൾക്കിടയിൽ ചില മാർജിൻ ചേർക്കാൻ മറക്കരുത്, അതുകൊണ്ട് അവർ ഒരുമിച്ച് ലയിപ്പിക്കാൻ പാടില്ല. മാർജിൻ വലത്: 0.13;
നിങ്ങളുടെ ലി ശൈലികൾ ഇതുപോലെ ആയിരിക്കണം:
.tablist li {float: left; മാർജിൻ വലത്: 0.13; }06 of 05
CSS 3 ഉള്ള ടാബുകൾ പോലെയുള്ള ടാബുകൾ ഉണ്ടാക്കുക
ഈ ശൈലിയിൽ ഹെവി ഹെഡ്ലൈറ്റ് ചെയ്യാൻ, ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റിലെ ലിങ്കുകൾ ഞാൻ ടാർഗെറ്റുചെയ്യുന്നു. മറ്റ് ടാഗുകളെ അപേക്ഷിച്ച് വെബ്പേജുകളിൽ ലിങ്കുകൾ കൂടുതൽ ചെയ്യുമെന്ന് ബ്രൌസറുകൾ തിരിച്ചറിയുന്നു, അതിനാൽ അവയെ ആങ്കർ ടാഗിലേക്ക് (ലിങ്കുകൾ) അറ്റാച്ചുചെയ്യുകയാണെങ്കിൽ ഹോവർ രാഷ്ട്രങ്ങൾ പോലെയുള്ള കാര്യങ്ങൾക്ക് അനുസൃതമായി പഴയ ബ്രൗസറുകൾ നേടുന്നതിന് എളുപ്പമാണ്. ആദ്യം നിങ്ങളുടെ ശൈലിയിലുള്ള വസ്തുതകൾ എഴുതുക:
.tablist li a {} .tablist li a: hover {}ഈ ടാബുകൾ ഒരു ആപ്ലിക്കേഷനിൽ ടാബുകൾ ആയിരിക്കേണ്ടതാണ്, കാരണം ലിങ്കിൻറെ എല്ലാ ഭാഗവും ടാഗ് ചെയ്യേണ്ടതാണ്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങളൊരു സാധാരണ " ഇൻലൈൻ " അവസ്ഥയിൽ നിന്ന് ഒരു ബ്ലോക്ക് എലമെന്റിലേക്ക് ഒരു ടാഗ് പരിവർത്തനം ചെയ്യണം. പ്രദർശിപ്പിക്കുക: തടയുക; (വ്യത്യാസത്തെക്കുറിച്ച് കൂടുതൽ അറിയാൻ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, ബ്ളോക്ക്-ലെവൽ vs ഇൻലൈൻ എലമെന്റുകൾ വായിക്കുക .)
പിന്നെ, നിങ്ങളുടെ ടാബുകൾ പരസ്പരം അനുരൂപമാക്കുന്നതിന് സമ്മർദ്ദം ചെലുത്തുന്നതിനുള്ള ഒരു എളുപ്പ മാർഗ്ഗം, എന്നാൽ ടെക്സ്റ്റിന്റെ വീതി അനുയോജ്യമാക്കാൻ തുടർന്നാൽ അത് വലതുഭാഗവും ഇടത് പാഡിംഗും ഉണ്ടാക്കുക എന്നതാണ്. പാഡിംഗ് ഷോർട്ട് ഹാൻഡ് ഓണാണ് ഞാൻ ഉപയോഗിച്ചത്, ഏറ്റവും മുകളിലുള്ളതും താഴെയുള്ളതും 0 ആയും വലത്തേയും സജ്ജമാക്കി 1 മിനിറ്റ് വരെ അവശേഷിപ്പിച്ചു. പാഡിംഗ്: 0 1 എം;
ഞാൻ ലിങ്ക് അടിവരയിട്ടു നീക്കം തിരഞ്ഞെടുത്തു, അങ്ങനെ ടാബുകൾ കണ്ണികൾ പോലെ കുറവായി കാണപ്പെടുന്നു. എന്നാൽ നിങ്ങളുടെ പ്രേക്ഷകരെ ഇത് ആശയക്കുഴപ്പത്തിലാക്കിയിട്ടുണ്ടെങ്കിൽ, ഈ വരി ഒഴിവാക്കുക. ലിങ്ക്-അലങ്കരിക്കൽ: ഒന്നുമില്ല;
ടാബുകൾക്ക് ചുറ്റും നേർത്ത ബോർഡർ ഇടുന്നതിലൂടെ, അവ ടാബുകൾ പോലെയാക്കി മാറ്റുന്നു. ഞാൻ ബോർഡർ ഷോർട്ട് ഹാൻഡ് ഓണാണ് ഉപയോഗിച്ചത്, അതിർത്തിയുടെ അതിർത്തിയുടെ നാലു വശവും: 0.06em solid # 000; അതിനുശേഷം താഴെ നിന്നും നീക്കം ചെയ്യാൻ ബോർഡർ-ബോഡി പ്രോപ്പർട്ടി ഉപയോഗിച്ചു. ബോർഡർ-താഴെ: 0;
പിന്നീട് ഞാൻ ടാബുകളുടെ ഫോണ്ട്, വർണം, പശ്ചാത്തല നിറങ്ങൾ എന്നിവയിലേക്ക് ചില മാറ്റങ്ങൾ വരുത്തി. നിങ്ങളുടെ സൈറ്റുമായി പൊരുത്തപ്പെടുന്ന ശൈലികളിലേക്ക് ഇവ സജ്ജമാക്കുക. ഫോണ്ട്: ബോൾഡ് 0.88em / 2em arial, geneva, helvetica, sans-serif; നിറം: # 000; പശ്ചാത്തല വർണം: #ccc;
മുകളിലുള്ള എല്ലാ ശൈലികളും സെലക്ടറിലായിരിക്കണം. ടേബിൾ ലിസ്റ്റുകൾ, ഭരണം അങ്ങനെ ആങ്കർ ടാഗുകളെ പൊതുവായി ബാധിക്കുന്നു. പിന്നീട് ടാബുകൾ കൂടുതൽ കാണാൻ കഴിയും, കുറച്ച് സംസ്ഥാന റൂട്ട് ചേർക്കണം .tablist li a: hover.
മുകളിലെ മൌസ് നീക്കുമ്പോൾ ടാപ്പ് പോപ്പ് ചെയ്യാൻ ടെക്സ്റ്റിന്റെയും പശ്ചാത്തലത്തിൻറെയും വർണ്ണം മാറ്റാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. പശ്ചാത്തലം: # 3cf; നിറം: # ff;
ഞാൻ ലിങ്ക് അടിവരയിടുക തുടരണമെന്നു ആഗ്രഹിക്കുന്ന ബ്രൗസറുകൾ മറ്റൊരു റിമൈൻഡർ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല; ടാബിലൂടെ മൗസ് എപ്പോൾ മൌണ്ട് ചെയ്താലും അടിവരയിട്ട് മടങ്ങുക എന്നതാണ് മറ്റൊരു സാധാരണ രീതി. നിങ്ങൾക്കത് ചെയ്യാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, ടെക്സ്റ്റ്-ഡബറേഷനിലേക്ക് മാറ്റുക: അടിവരയിടുക;
പക്ഷെ സിഎസ്എസ് 3 എവിടെയാണ്?
നിങ്ങൾ ശ്രദ്ധ ചെലുത്തിയിട്ടുണ്ടെങ്കിൽ, സ്റ്റൈൽഷീറ്റിലുളള സിഎസ്എസ് 3 ശൈലികൾ ഉണ്ടായിരുന്നില്ലെന്ന് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാറുണ്ട്. ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ ഉൾപ്പടെ ഏത് ആധുനിക ബ്രൗസറിലും ഇത് പ്രവർത്തിക്കുന്നത് പ്രയോജനകരമാണ്. പക്ഷെ ഇത് ടാബുകൾ സ്ക്വയർ ബോക്സുകളേക്കാൾ കൂടുതൽ മറ്റൊന്നില്ല. ഒരു CSS 3 സ്റ്റൈൽ കോൾ ബോർഡർ-ആരം (അതു ബന്ധപ്പെട്ട ബ്രൗസർ-നിർദ്ദിഷ്ട കോളുകൾ ആണ്) ചേർക്കുന്നതിലൂടെ നിങ്ങൾക്ക് മിൽസില ഫോൾഡറിൽ ടാബുകൾ കൂടുതൽ കാണാൻ, അറ്റങ്ങൾ വൃത്താകൃതിയിലാക്കാം.
നിങ്ങൾ ഒരു .tablist ലി ഒരു ഭരണം ചേർക്കുകയാണെങ്കിൽ: -webkit-border-top-right-radius: 0.50em; -വെബ്കിറ്റ്-ബോർഡർ-മുകളിൽ ഇടത്-ആരം: 0.50 എം; -മോസ്-ബോർഡർ-ആരം-ടോപ്പ് വലത്: 0.50 എം. -മോസ്-ബോർഡർ-ആരം-ടോപ്പോഫ്റ്റ്: 0.50 എം; ബോർഡർ-ടോപ്പ്-വലത്-ആരം: 0.50 എം. ബോർഡർ-ടോപ്പ്-ലെഫ്റ്റ്-റേഡിയസ്: 0.50 എം.
ഞാൻ എഴുതിയ അവസാന ശൈലി നിയമങ്ങൾ ഇവയാണ്:
.tablist li a {display: block; പാഡിംഗ്: 0 1 എം; വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല; അതിർത്തി: 0.06 മി. ഖര # 000; ബോർഡർ-താഴെ: 0; ഫോണ്ട്: ബോൾഡ് 0.88em / 2em arial, geneva, helvetica, sans-serif; നിറം: # 000; പശ്ചാത്തല വർണം: #ccc; / * സിഎസ്എസ് 3 ഘടകങ്ങൾ * / വെബ്കിറ്റ്-ബോർഡർ-ടോപ്പ്-വലത്-ആരം: 0.50 എം; -വെബ്കിറ്റ്-ബോർഡർ-മുകളിൽ ഇടത്-ആരം: 0.50 എം; -മോസ്-ബോർഡർ-ആരം-ടോപ്പ് വലത്: 0.50 എം. -മോസ്-ബോർഡർ-ആരം-ടോപ്പോഫ്റ്റ്: 0.50 എം; ബോർഡർ-ടോപ്പ്-വലത്-ആരം: 0.50 എം. ബോർഡർ-ടോപ്പ്-ലെഫ്റ്റ്-റേഡിയസ്: 0.50 എം. } .tablist li a: ഹോവർ {background: # 3cf; നിറം: # ff; വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല; }ഈ ശൈലികളാൽ, നിങ്ങൾക്ക് എല്ലാ പ്രധാന ബ്രൌസറുകളിലും പ്രവർത്തിക്കുന്നു, ഒപ്പം CSS 3 അനുയോജ്യമായ ബ്രൌസറുകളിൽ നല്ല അച്ചടിച്ച ടാബുകൾ പോലെയുള്ള ഒരു ടാബിൽ മെനുവുമുണ്ട്. അടുത്ത പേജ് നിങ്ങൾക്ക് അത് കൂടുതൽ വേഷവിധമായി ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരു ഓപ്ഷൻ നിങ്ങൾക്ക് നൽകുന്നു.
06 06
നിലവിലെ ടാബ് ഹൈലൈറ്റ് ചെയ്യുക
ഞാൻ സൃഷ്ടിച്ച HTML ൽ, യുലിനൊപ്പം ഒരു ഐഡി ഉള്ള ഒരു ലിസ്റ്റ് മൂലകം ഉണ്ടായിരുന്നു. ബാക്കിയുള്ളതിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ശൈലി നൽകുന്നതിന് ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ഏറ്റവും സാധാരണമായ സാഹചര്യം നിലവിലെ ടാബ് ചില രീതിയിൽ നിൽക്കുന്നു എന്നതാണ്. ഇതിനെക്കുറിച്ച് ചിന്തിക്കാനുള്ള മറ്റൊരു മാർഗം നിങ്ങൾ ജീവിച്ചിട്ടില്ലാത്ത ടാബുകളിൽ നിന്ന് ചാരനിറത്തിലാക്കാൻ ആഗ്രഹിക്കുന്നു എന്നതാണ്. തുടർന്ന് വ്യത്യസ്ത പേജുകളിൽ എവിടെയാണെന്ന് നിങ്ങൾ മാറ്റുന്നു.
ഞാൻ # സ്റ്റാൻഡേർഡ് A ടാഗും, #current A: hover സ്റ്റായും രണ്ട് രണ്ടും വ്യത്യസ്ഥമാണ്. നിങ്ങൾക്ക് നിറം, പശ്ചാത്തല വർണം, ആ ഘടകത്തിൻറെ ഉയരം, വീതി, പാഡിംഗ് എന്നിവയും മാറ്റാം. നിങ്ങളുടെ ഡിസൈനിൽ മാറ്റങ്ങൾ വരുത്തുന്നത് ഉറപ്പാക്കുക.
.tablist li # നിലവിലുള്ളത് {background-color: # 777; നിറം: # ff; } .tablist li # നിലവിലുള്ളത്: ഹോവർ {background: # 39C; }നിങ്ങൾ പൂർത്തിയാക്കി! നിങ്ങളുടെ വെബ്സൈറ്റിനായി ടാബിൽ ചെയ്ത മെനു നിങ്ങൾ സൃഷ്ടിച്ചു.