06 இன் 01
எப்படி CSS மற்றும் படங்கள் கொண்ட தாவலாக்கப்பட்ட ஊடுருவல் உருவாக்குவது
இணைய பக்கங்களில் ஊடுருவல் ஒரு பட்டியல் ஒரு வடிவம், மற்றும் தாவலாக்கப்பட்ட வழிசெலுத்தல் ஒரு கிடைமட்ட பட்டியல் போல. இது CSS உடன் கிடைமட்ட தாவலாக்க வழிசெலுத்தலை உருவாக்க மிகவும் எளிதானது, ஆனால் CSS 3 அவற்றை இன்னும் இனிமையானதுமாக பார்க்க சில கூடுதல் கருவிகளை வழங்குகிறது.
இந்த பயிற்சி HTML மற்றும் CSS மூலம் நீங்கள் எடுக்கும் ஒரு CSS தாவலாக்கப்பட்ட மெனு உருவாக்க. அது எப்படி இருக்கும் என்று பார்ப்பதற்கு அந்த இணைப்பைக் கிளிக் செய்க.
இந்த தாவப்பட்ட மெனுவானது HTML மற்றும் CSS 2 மற்றும் CSS 3 ஆகிய படங்களைப் பயன்படுத்துவதில்லை. இது மேலும் தாவல்களைச் சேர்க்க அல்லது அவற்றை உரை மாற்றுவதற்கு எளிதாக திருத்த முடியும்.
உலாவி ஆதரவு
இந்தத் தாவல் மெனு அனைத்து முக்கிய உலாவிகளில் வேலை செய்யும். இண்டர்நெட் எக்ஸ்ப்ளோரர் வட்டமான மூலைகளை காட்டாது, ஆனால் மற்றபடி, அது பயர்பாக்ஸ், சபாரி, ஓபரா மற்றும் குரோம் போன்ற தாவல்களைக் காண்பிக்கும்.
06 இன் 06
உங்கள் மெனு பட்டியலை எழுதுங்கள்
அனைத்து வழிசெலுத்தல் மெனுக்கள் மற்றும் தாவல்கள் உண்மையில் ஒரு வரிசையிலமையாத பட்டியல். எனவே நீங்கள் செய்ய வேண்டிய முதல் விஷயம், உங்கள் தாவலாக்கப்பட்ட வழிசெலுத்தல் செல்ல விரும்பும் இணைப்புகளின் வரிசையற்ற பட்டியலை எழுத வேண்டும்.
இந்த உரை உங்கள் HTML ஐ ஒரு உரை ஆசிரியரில் எழுதும் மற்றும் உங்கள் வலைப்பக்கத்தில் உங்கள் மெனுக்கான HTML ஐ எங்கே வைக்க வேண்டுமென்று உங்களுக்குத் தெரியும் என்று கருதுகிறது.
உங்கள் வரிசைப்படுத்தப்பட்ட பட்டியலை இவ்வாறு எழுதுங்கள்:
- வர்க்கம் = "tablist">
- CSS 3
- id = "நடப்பு"> தாவல்கள்
- ஐந்து
- மெனுக்கள்
வகுப்பு இரண்டு விஷயங்களை அழைக்கிறது என்பதைக் கவனிக்கலாம்: class = "tablist" மற்றும் id = "current". முதலில் தேவைப்படுகிறது . உங்கள் வரிசையற்ற பட்டியலில் tablist வர்க்கத்தை வைக்கவில்லை என்றால், தாவல்கள் இயங்காது. இரண்டாவது விருப்பமானது. அந்த பக்கத்தில் நீங்கள் தனிப்படுத்திக்கொள்ள விரும்பும் எந்தவொரு தாவிலும் id = "current" ஐ வைக்கவும். நான் வழக்கமாக இந்த பக்கத்தை நான் பயன்படுத்துகின்றேன், ஆனால் மிக முக்கியமான தாவலை முன்னிலைப்படுத்த நீங்கள் இதைப் பயன்படுத்தலாம். அல்லது நீ அதை அகற்றலாம்.
06 இன் 03
உங்கள் உடை தாளை திருத்துவதை தொடங்குக
நீங்கள் ஒரு வெளிப்புற நடை தாள் அல்லது ஒரு உள் நடை தாள் பயன்படுத்த முடியும் . மாதிரி மெனு பக்கம் ஆவணம்
இல் ஒரு உள் நடை தாள் பயன்படுத்துகிறது.முதல் நாம் உடை UL தன்னை
நாம் வகுப்பு tablist பயன்படுத்த எங்கே இது. HTML இல். யுஎல் குறிச்சொல்லை ஸ்டைலிங் செய்வதற்குப் பதிலாக, உங்கள் பக்கத்தில் உள்ள அனைத்து வரிசையற்ற பட்டியல்களும் பாணியில் இருக்கும், நீங்கள் UL வர்க்கம் மட்டும் பாணியில் இருக்க வேண்டும். tablist எனவே உங்கள் CSS முதல் நுழைவு இருக்க வேண்டும்:
.tablist {}நான் முடிவில்லா சுருள் பிரேஸில் (}) முன்னால் வைக்க விரும்புகிறேன், அதனால் நான் அதை மறக்க மாட்டேன்.
நாம் தாவல் மெனு பட்டியலில் ஒரு வரிசையற்ற பட்டியல் குறிச்சொல்லைப் பயன்படுத்துகையில், ஆனால் எந்த புல்லட் அல்லது எண்களும் உள்ளே ஊர்ந்து செல்வதை நாங்கள் விரும்பவில்லை. பட்டியலில் பாணி: யாரும்; உலாவிக்கு இது ஒரு பட்டியலாக இருக்கும்போது, அது எந்த முன் தீர்மானிக்கப்பட்ட பாணியுடன் (தோட்டாக்கள் அல்லது எண்களைப் போன்ற) பட்டியலாகும்.
பின்னர், நீங்கள் நிரப்ப விரும்பும் இடத்தை பொருத்த உங்கள் பட்டியலின் உயரத்தை அமைக்கலாம். நான் என் உயரம் 2em தேர்வு, அது இரட்டை எழுத்துரு அளவு இரட்டை, மற்றும் தாவலை உரை மேலே மற்றும் கீழே அரை ஒரு எம் கொடுக்கிறது. உயரம்: 2em; ஆனால் நீங்கள் விரும்பும் அளவுக்கு உங்கள் அகலம் அமைக்க முடியும். UL குறிச்சொற்கள் தானாகவே 100% அகலத்தை எடுத்துக் கொள்ளும், எனவே நீங்கள் தற்போதைய கொள்கலன் விட சிறியதாக இருக்க வேண்டும் எனில், அகலத்தை வெளியேற்றலாம்.
இறுதியாக, உங்கள் மாஸ்டர் பாணி தாள் UL மற்றும் OL குறிச்சொற்களை முன்னுரிமை இல்லை என்றால், நீங்கள் அவற்றை வைக்க வேண்டும் என்று அர்த்தம். நீங்கள் உங்கள் UL மீது எல்லைகளை, ஓரங்கள், மற்றும் திணிப்பு அணைக்க வேண்டும் என்று அர்த்தம். திணிப்பு: 0; விளிம்பு: 0; எல்லை: எதுவும் இல்லை; நீங்கள் ஏற்கனவே UL குறிச்சொல்லை மீட்டமைத்திருந்தால், உங்கள் வடிவமைப்புடன் பொருந்தக்கூடிய ஓரங்கள், திணிப்பு அல்லது எல்லையை மாற்றலாம்.
உங்கள் இறுதி .tablist வர்க்கம் இப்படி இருக்க வேண்டும்:
.tablist {list-style: none; உயரம்: 2em; திணிப்பு: 0; விளிம்பு: 0; எல்லை: எதுவும் இல்லை; }06 இன் 06
LI பட்டியல் உருப்படிகளை திருத்துதல்
நீங்கள் உங்கள் வரிசையற்ற பட்டியலை பாணியில் செய்தால், அதை உள்ளே உள்ள LI குறிச்சொற்களை பாணியுங்கள். இல்லையெனில், அவர்கள் ஒரு நிலையான பட்டியல் மற்றும் ஒவ்வொரு தாவலை சரியாக உங்கள் தாவல்களை வைக்காமலேயே செயல்படுவார்கள்.
முதலில், உங்கள் பாணி சொத்து அமைக்க:
.tablist li {}பின்னர் நீங்கள் உங்கள் தாவல்களை மிதக்க வேண்டும், அதனால் அவர்கள் கிடைமட்ட விமானத்தில் வரிசையாக நிற்க வேண்டும். மிதந்து: இடது;
தாவல்களுக்கு இடையில் சில ஓரங்களை சேர்க்க மறக்காதீர்கள், அதனால் அவை ஒன்றிணைக்காது. விளிம்பு வலதுபுறமாக: 0.13em;
உங்கள் li பாணிகள் இதைப் போல இருக்க வேண்டும்:
.tablist li {float: left; விளிம்பு வலதுபுறமாக: 0.13em; }06 இன் 05
தாவல்கள் CSS 3 உடன் தாவல்கள் போல தோற்றமளிக்கிறது
இந்த நடை தாள் மிக அதிக தூரத்தை செய்ய, நான் வரிசையிலமையாத பட்டியலில் உள்ள இணைப்புகளை இலக்காகக் கொண்டிருக்கிறேன். மற்ற குறிச்சொற்களை விட வலைப்பக்கத்தில் இணைப்புகள் இன்னும் அதிகமாக இருப்பதை உலாவிகள் அடையாளம் காண்கின்றன, எனவே பழைய உலாவிகளில் நீங்கள் நங்கூரம் குறிச்சொற்களை (இணைப்புகள்) இணைக்கினால், மிதவை மாநிலங்கள் போன்றவற்றைப் பொருத்துவது எளிது. எனவே முதலில் உங்கள் பாணி பண்புகளை எழுதுங்கள்:
.tablist li a {} .tablist li a: hover {}இந்த தாவல்கள் ஒரு பயன்பாட்டில் தாவல்களைப் போல செயல்படுவதால், இணைக்கப்பட்ட உரை மட்டுமல்ல, தாவலின் முழு பகுதியும் கிளிக் செய்யப்பட வேண்டும். இதை செய்ய, நீங்கள் ஒரு குறிச்சொல்லை மாற்ற வேண்டும் அது சாதாரண " இன்லைன் " மாநில ஒரு தொகுதி உறுப்பு . காட்சி: தொகுதி; (வேறுபாட்டைப் பற்றி மேலும் தெரிந்து கொள்ள ஆர்வமாக இருந்தால், பிளாக்-லெவல் வெர்சஸ் இன்லைன் கூறுகள் .)
பின்னர், உங்கள் தாவல்கள் ஒருவரோடு ஒருவர் சமச்சீர் நிலையில் இருப்பதற்கு வற்புறுத்துவதற்கான ஒரு எளிய வழி, ஆனால் உரையின் அகலத்தை பொருத்துவதற்கு வலுவான மற்றும் இடது திணிப்புகளை உருவாக்க வேண்டும். மேல் மற்றும் கீழ் இடது மற்றும் வலது மற்றும் இடது மற்றும் இடது பக்கம் அமைக்க, நான் பேஷிங் சுருக்கெழுத்து சொத்து பயன்படுத்தினேன். திணிப்பு: 0 1;
நான் இணைப்பை அகற்ற தேர்வு, தாவல்கள் இணைப்புகள் போல குறைவாக இருக்கும் என்று. ஆனால் உங்கள் பார்வையாளர்கள் குழம்பிவிட்டால், இந்த வரியை வெளியே விடுங்கள். இணைப்பு-அலங்காரம்: யாரும்;
தாவல்களை சுற்றி ஒரு மெல்லிய எல்லை வைத்து, அதை அவர்கள் தாவல்கள் போன்ற செய்கிறது. நான் எல்லை சுழற்சியை பயன்படுத்தி நான்காவது பக்க எல்லைக்கு எல்லையொட்டி எல்லைகளை வைத்தேன்: 0.06em திட # 000; பின்னர் கீழிருந்து அதை அகற்ற எல்லை-கீழே சொத்து பயன்படுத்தப்படும். எல்லை-கீழ்: 0;
பின்னர் நான் தாவல்களின் எழுத்துரு, வண்ணம் மற்றும் பின்புல நிறத்தில் சில மாற்றங்களைச் செய்தேன். உங்கள் தளத்துடன் பொருந்தும் பாணிகளில் இதை அமைக்கவும். எழுத்துரு: தைரியமான 0.88em / 2 ஏ ஏரியல், ஜீனெ, ஹெல்வெடிகா, சான்ஸ்-செரிஃப்; நிறம்: # 000; பின்னணி-நிறம்: #ccc;
மேலே உள்ள அனைத்து பாணிகளும் தேர்வாளருக்கு செல்ல வேண்டும். Tablist li a, ஆட்சி பொதுவாக அவர்கள் நங்கூரம் குறிச்சொற்களை பாதிக்கும். பின்னர் தாவல்கள் மேலும் கிளிக் செய்ய தோன்றும், நீங்கள் ஒரு சில மாநில விதி சேர்க்க வேண்டும் .tablist li ஒரு: மிதவை.
நான் அதை சுட்டி போது தாவலை பாப் செய்ய உரை மற்றும் பின்னணி நிறம் மாற்ற விரும்புகிறேன். பின்னணி: # 3cf; நிறம்: #fff;
நான் இணைக்கப்பட்டிருக்க மாட்டேன் என்று விரும்பும் உலாவிகளுக்கு மற்றொரு நினைவூட்டல் சேர்க்கப்பட்டுள்ளது. உரை அலங்காரம்: யாரும்; இன்னொரு பொதுவான முறை, தாவலை நீங்கள் சுட்டி போது அடிக்கோடிட்டு திரும்ப வேண்டும். நீங்கள் அதை செய்ய விரும்பினால், அதை உரை-அலங்காரத்திற்கு மாற்றவும்: அடிக்கோடிடு;
ஆனால் CSS 3 எங்கே?
நீங்கள் கவனத்தை செலுத்துகிறீர்கள் என்றால், பாணியில் பயன்படுத்தப்படும் எந்த CSS 3 பாணிகளும் அங்கு இல்லை என்பதை நீங்கள் கவனித்திருக்கலாம். இண்டர்நெட் எக்ஸ்ப்ளோரர் உட்பட எந்த நவீன உலாவிலும் இது வேலை செய்யும் நன்மை. ஆனால் சதுர பெட்டிகளிலும் தாவல்கள் அதிகமாக எதையும் பார்க்காது. ஒரு CSS 3 பாணி அழைப்பு எல்லை-ஆரம் சேர்த்து (மற்றும் அது தொடர்புடைய உலாவி-குறிப்பிட்ட அழைப்புகளை) நீங்கள் ஒரு மில்லா கோப்புறையில் தாவல்கள் போன்ற, தோற்றமளிக்கும் விளிம்புகள் செய்ய முடியும்.
.tablist li ஒரு விதியை நீங்கள் சேர்க்க வேண்டும்: -webkit-border-top-right-radius: 0.50em; வெப்கிட்-எல்லை-மேல் இடது-ஆரம்: 0.50em; -moz-எல்லை-ஆரம்-topright: 0.50em; -moz-எல்லை-ஆரம்-topleft: 0.50em; எல்லை-மேல் வலது-ஆரம்: 0.50em; எல்லை மேல்-இடது ஆரம்: 0.50em;
இவை நான் எழுதிய இறுதி நடைமுறை விதிகளாகும்:
.tablist li a {display: block; திணிப்பு: 0 1; உரை அலங்காரம்: யாரும்; எல்லை: 0.06em திட # 000; எல்லை-கீழ்: 0; எழுத்துரு: தைரியமான 0.88em / 2 ஏ ஏரியல், ஜீனெ, ஹெல்வெடிகா, சான்ஸ்-செரிஃப்; நிறம்: # 000; பின்னணி-நிறம்: #ccc; / * CSS 3 உறுப்புகள் * / வெப்கிட்-எல்லை-மேல்-வலது-ஆரம்: 0.50; வெப்கிட்-எல்லை-மேல் இடது-ஆரம்: 0.50em; -moz-எல்லை-ஆரம்-topright: 0.50em; -moz-எல்லை-ஆரம்-topleft: 0.50em; எல்லை-மேல் வலது-ஆரம்: 0.50em; எல்லை மேல்-இடது ஆரம்: 0.50em; } .tablist li a: hover {background: # 3cf; நிறம்: #fff; உரை அலங்காரம்: யாரும்; }இந்த பாணிகள், நீங்கள் அனைத்து முக்கிய உலாவிகளில் வேலை மற்றும் CSS 3 இணக்கமான உலாவிகளில் நல்ல அச்சிடப்பட்ட தாவல்கள் போல் ஒரு தாவலாக்கப்பட்ட பட்டி வேண்டும். அடுத்த பக்கம் நீங்கள் இன்னும் அதை உடுத்தி இன்னும் ஒரு விருப்பத்தை கொடுக்கிறது.
06 06
தற்போதைய தாவலை முன்னிலைப்படுத்தவும்
நான் உருவாக்கிய HTML இல், யூஎல் ஒரு ஐடி ஒரு பட்டியல் உறுப்பு இருந்தது. இது ஒரு LI ஐ வேறுபட்ட பாணியில் இருந்து கொடுக்க அனுமதிக்கிறது. மிகவும் பொதுவான சூழ்நிலை தற்போதைய தாவலை சில வழியில் வெளியே நிற்க வேண்டும். இதைப் பற்றி சிந்திக்க இன்னொரு வழி, நீங்கள் வாழாத தாவல்களை சாம்பல் செய்ய வேண்டும். நீங்கள் வித்தியாசமான பக்கங்களில் எங்கு இருக்கிறீர்கள் என்பதை மாற்றவும்.
நான் # ஸ்டாண்டர்ட் ஒரு டேக் மற்றும் #current ஒரு இருவரும்: ஒரு இரண்டு மிதவை என்று sta மிதவை. நீங்கள் நிறம், பின்னணி வண்ணம், உயரம், அகலம் மற்றும் அந்த உறுப்பு திணிப்பு ஆகியவற்றை மாற்றலாம். உங்கள் வடிவமைப்பில் எந்த மாற்றத்தையும் செய்யுங்கள்.
.tablist li # தற்போதைய {background-color: # 777; வண்ணம்: # ff; } .tablist li # நடப்பு a: hover {background: # 39C; }நீங்கள் முடித்துவிட்டீர்கள்! உங்கள் இணையதளத்தில் ஒரு தாவலாக்கப்பட்ட மெனுவை உருவாக்கியுள்ளீர்கள்.