06 నుండి 01
ఎలా CSS మరియు సంఖ్య చిత్రాలు తో చేసిన నావిగేషన్ సృష్టించు
వెబ్ పుటలలో నావిగేషన్ అనేది ఒక జాబితా, మరియు టాబ్డ్ నావిగేషన్ సమాంతర జాబితా లాగా ఉంటుంది. ఇది CSS తో హారిజాంటల్ టాబ్డ్ పేజీకి సంబంధించిన లింకులు సృష్టించడానికి చాలా సులభం, కానీ CSS 3 వాటిని మరింత NICER చూడండి చేయడానికి మాకు కొన్ని మరింత టూల్స్ ఇస్తుంది.
ఈ ట్యుటోరియల్ CSS ట్యాబ్డ్ మెనూను రూపొందించడానికి అవసరమైన HTML మరియు CSS ద్వారా మిమ్మల్ని తీసుకెళ్తుంది. అది ఎలా కనిపిస్తుందో చూడటానికి లింక్పై క్లిక్ చేయండి.
ఈ ట్యాబ్డ్ మెను కేవలం HTML మరియు CSS 2 మరియు CSS 3 లను ఎటువంటి చిత్రాలను ఉపయోగిస్తుంది. ఇది మరిన్ని ట్యాబ్లను జోడించడానికి లేదా వాటిలో టెక్స్ట్ని మార్చడానికి సులభంగా సవరించవచ్చు.
బ్రౌజర్ మద్దతు
ఈ టాబ్ మెను అన్ని ప్రధాన బ్రౌజర్లలో పనిచేస్తుంది . ఇంటర్నెట్ ఎక్స్ ప్లోరర్ గుండ్రని మూలలని చూపించదు, కాని ఇది ఫైర్ఫాక్స్, సఫారి, ఒపెరా మరియు క్రోమ్ వంటి ట్యాబ్లను చూపుతుంది.
02 యొక్క 06
మీ మెనూ జాబితా వ్రాయండి
అన్ని నావిగేషన్ మెనుల్లో మరియు టాబ్లు నిజంగా ఒక క్రమం లేని జాబితా. కాబట్టి మీరు చేయదలిచిన మొదటి విషయం ఏమిటంటే మీ టాబ్డ్ పేజీకి సంబంధించిన లింకులు వెళ్లాలనే దానికి అనుసంధానింపబడని లింకుల జాబితా రాయండి.
ఈ ట్యుటోరియల్ మీరు మీ HTML ను ఒక టెక్స్ట్ ఎడిటర్లో రాస్తున్నారని మరియు మీ వెబ్ పేజీలో మీ మెను కోసం HTML ను ఎక్కడ ఉంచాలో తెలుసుకున్నారని ఊహిస్తున్నారు.
మీ క్రమం లేని జాబితాను వ్రాయండి:
- తరగతి = "tablist">
- CSS 3
- id = "ప్రస్తుత"> ట్యాబ్లు
- కోసం
- మెనూలు
మీరు కోడ్ రెండు విషయాలను పిలుస్తున్నారని గమనించవచ్చు: class = "tablist" మరియు id = "current". మొదటి అవసరం . మీరు మీ క్రమం లేని జాబితాలో ట్యాబ్లిస్ట్ క్లాస్ను ఉంచకపోతే, ట్యాబ్లు పనిచేయవు. రెండవ ఐచ్ఛికం. మీరు ఆ పేజీలో హైలైట్ చెయ్యాలనుకుంటున్న ట్యాబ్లో ఐడి = "ప్రస్తుత" ను ఉంచండి. నేను ఈ పేజీని నేను ఉపయోగిస్తున్న పేజీని హైలైట్ చేయడానికి ఉపయోగించుకుంటాను, కానీ మీరు ముఖ్యమైన ట్యాబ్ను హైలైట్ చేయడానికి దాన్ని ఉపయోగించవచ్చు. లేదా మీరు పూర్తిగా తొలగించవచ్చు.
03 నుండి 06
మీ శైలి షీట్ను సవరించడం ప్రారంభించండి
మీరు బాహ్య శైలి షీట్ లేదా అంతర్గత శైలి షీట్ను ఉపయోగించవచ్చు . నమూనా మెను పేజీ పత్రం యొక్క
లో అంతర్గత శైలి షీట్ను ఉపయోగిస్తుంది.మొట్టమొదటిది మేము శైలి UL స్వయంగా చేస్తాము
మేము ఇక్కడ తరగతి ట్యాబ్లిస్ట్ ఉపయోగించుకుంటాం .ఈ HTML లో. UL ట్యాగ్ స్టైలింగ్ కాకుండా, ఇది మీ పేజీలో అన్ని క్రమం లేని జాబితాలను శైలి చేస్తుంది, మీరు UL తరగతి శైలిని మాత్రమే కలిగి ఉండాలి. tablist కాబట్టి మీ CSS లో మొదటి ఎంట్రీ ఉండాలి:
.tablist {}నేను ముందే వంకర కలుపు బ్రేస్ (}) లో ముంచెత్తుతాను, కాబట్టి నేను దానిని మరచిపోలేను.
మేము ట్యాబ్ మెను జాబితా కోసం క్రమం లేని జాబితా ట్యాగ్ను ఉపయోగిస్తున్నప్పుడు, కానీ మేము ఏ బులెట్లు లేదా సంఖ్యలు చైతన్యవంతం కాకూడదనుకుంటున్నాము. కనుక మొదటి శైలి మీరు జోడించాలి. జాబితా శైలి: none; బ్రౌసర్కు ఇది ఒక జాబితాగా ఉన్నప్పుడు, ముందుగా నిర్ణయించిన శైలులు (బులెట్లు లేదా సంఖ్యల వంటివి) లేని జాబితాకు ఇది చెబుతుంది.
అప్పుడు, మీరు పూరించాలని మీరు కోరుకున్న స్థలానికి సరిపోలడానికి మీ జాబితా యొక్క ఎత్తును సెట్ చేయవచ్చు. నేను నా ఎత్తు కోసం 2 ని ఎంచుకున్నాను, అది ప్రామాణిక ఫాంట్ పరిమాణాన్ని రెండింతలు చేస్తుంది మరియు ట్యాబ్ యొక్క వచనం పైన మరియు దిగువన సగం em ఇస్తుంది. ఎత్తు: 2em; కానీ మీరు మీ వెడల్పును మీకు కావలసిన పరిమాణంతో అమర్చవచ్చు. UL ట్యాగ్లు స్వయంచాలకంగా వెడల్పు 100% పడుతుంది, కాబట్టి మీరు ప్రస్తుత కంటైనర్ కంటే చిన్నది కాకూడదనుకుంటే, వెడల్పుని వదిలివేయవచ్చు.
చివరగా, మీ మాస్టర్ స్టైల్ షీట్ UL మరియు OL ట్యాగ్ల కోసం ప్రీసెట్లు కలిగి ఉండకపోతే, మీరు వాటిని ఉంచాలనుకుంటున్నారు. దీని అర్థం మీరు మీ UL లో సరిహద్దులు, అంచులు మరియు పాడింగ్లను ఆపివేయాలి. padding: 0; margin: 0; సరిహద్దు: none; మీరు ఇప్పటికే UL ట్యాగ్ని రీసెట్ చేస్తే, మీరు మీ డిజైన్తో సరిపోయే ఏదో అంచులు, పాడింగ్ లేదా సరిహద్దుని మార్చవచ్చు.
మీ చివరి .tablist తరగతి ఇలా ఉండాలి:
.tablist {list-style: none; ఎత్తు: 2em; padding: 0; margin: 0; సరిహద్దు: none; }04 లో 06
LI జాబితా అంశాలు సవరించడం
మీరు మీ క్రమం లేని జాబితాలో శైలిని చేసిన తర్వాత, దాని లోపల LI ట్యాగ్లను మీరు శైలి చేయాలి. లేకపోతే, వారు మీ ట్యాబ్లను సరిగ్గా ఉంచకుండా ఒక ప్రామాణిక జాబితా వలె మరియు ప్రతి కదలికను తరువాతి శ్రేణికి అమలు చేస్తారు.
మొదట, మీ శైలి లక్షణాన్ని సెటప్ చేయండి:
.tablist li {}అప్పుడు మీరు మీ ట్యాబ్లను ఫ్లోట్ చేయాలనుకుంటున్నారు, తద్వారా అవి క్షితిజ సమాంతర విమానంలో వరుసలో ఉంటాయి. ఫ్లోట్: ఎడమ;
మరియు ట్యాబ్ల మధ్య కొన్ని మార్జిన్లను జోడించడానికి మర్చిపోవద్దు, కాబట్టి వారు కలిసి విలీనం చేయలేరు. మార్జిన్ కుడి: 0.13em;
మీ li శైలులు ఇలా ఉండాలి:
.tablist li {ఫ్లోట్: ఎడమ; మార్జిన్ కుడి: 0.13em; }05 యొక్క 06
ట్యాబ్లను CSS 3 తో ట్యాబ్లను చూడండి
ఈ శైలి షీట్లో భారీ ట్రైనింగ్ చేయడానికి, నేను క్రమం లేని జాబితాలోని లింక్లను లక్ష్యంగా చేస్తున్నాను. బ్రౌజర్లు ఇతర ట్యాగ్ల కంటే వెబ్ పేజీలో మరింత చేస్తాయని గుర్తించాయి, కాబట్టి పాత బ్రౌజర్లను మీరు యాంకర్ ట్యాగ్ (లింక్లు) కు జోడించి ఉంటే హోవర్ రాష్ట్రాలు వంటి వాటిని అనుసరించడం సులభం. సో మొదటి మీ శైలి లక్షణాలు వ్రాయండి:
.tablist li a {} .tablist li a: hover {}ఈ ట్యాబ్లు ఒక అప్లికేషన్ లో ట్యాబ్ల వలె వ్యవహరించాలి కనుక, టాబ్ యొక్క మొత్తం ప్రాంతం క్లిక్ చేయదగినది కావాలి, కేవలం లింక్ చేయబడిన టెక్స్ట్ మాత్రమే కాదు. ఇది చేయటానికి, మీరు దాని యొక్క సాధారణ ట్యాగ్ను " ఇన్లైన్ " రాష్ట్రానికి బ్లాక్ ఎలిమెంట్గా మార్చాలి. ప్రదర్శన: బ్లాక్; (మీరు వ్యత్యాసం గురించి మరింత తెలుసుకోవడంలో ఆసక్తి ఉంటే, బ్లాక్-లెవెల్ వర్సెస్ ఇన్లైన్ ఎలిమెంట్స్ చదవండి .)
అప్పుడు, మీ ట్యాబ్లు ఒకదానితో సుష్టంగా ఉండటానికి బలవంతం చేయడానికి సులభమైన మార్గం, కానీ వచనం యొక్క వెడల్పుకు సరిపోయేలా వంచు అయితే కుడి మరియు ఎడమ పాడింగ్ను ఒకేలా చేస్తుంది. నేను పాడింగ్ సంక్షిప్తచిహ్నం ఆస్తిని ఉపయోగించాను, పైన మరియు దిగువకు 0 మరియు కుడికి మరియు 1 ని ఎడమవైపుకు ఉంచాను. padding: 0 1em;
నేను లింక్ను తొలగించాలని ఎంచుకున్నాను, దాంతో ట్యాబ్లు తక్కువ లింకులా కనిపిస్తాయి. కానీ మీ ప్రేక్షకులు అయోమయానికి గురైనట్లయితే, ఈ పంక్తిని వదిలేయండి. లింక్-decoration: none;
ట్యాబ్ల చుట్టూ సన్నని అంచును ఉంచడం ద్వారా, వాటిని ట్యాబ్ల వలె చేస్తుంది. నేను నాలుగు అంచుల సరిహద్దు చుట్టూ సరిహద్దును ఉంచడానికి సరిహద్దు కుదుపు ఆస్తిని ఉపయోగించాను: 0.06em ఘన # 000; ఆపై దిగువ నుండి తొలగించడానికి సరిహద్దు-దిగువ ఆస్తిని ఉపయోగించారు. సరిహద్దు-bottom: 0;
అప్పుడు నేను టాబ్ల ఫాంట్, రంగు మరియు నేపథ్య రంగులకు కొన్ని సర్దుబాట్లను చేసాను. మీ సైట్కు సరిపోలే శైలులకు వీటిని సెట్ చేయండి. ఫాంట్: బోల్డ్ 0.88em / 2em ఏరియల్, జెనీవా, హెల్వెటికా, సాన్స్-సెరిఫ్; color: # 000; నేపథ్య రంగు: #ccc;
పైన శైలులు అన్ని సెలెక్టర్ లో వెళ్ళాలి .tablist li, నియమం వారు సాధారణంగా యాంకర్ టాగ్లు ప్రభావితం కాబట్టి. టాబ్లు మరింత క్లిక్ చేయదగినవిగా చేయడానికి, మీరు కొన్ని రాష్ట్ర పాలనను జోడించాలి .tablist li a: hover.
నేను మీరు మౌస్ మీద ఉన్నప్పుడు టాబ్ పాప్ చేయడానికి టెక్స్ట్ మరియు నేపథ్య రంగు మార్చడానికి ఇష్టం. నేపధ్యం: # 3cf; రంగు: #fff;
మరియు లింక్ నేను అండర్లైన్ కాదు ఉండాలని బ్రౌజర్లు మరొక రిమైండర్ చేర్చారు. టెక్స్ట్ అలంకరణ: none; ఇంకొక సాధారణ పద్దతి ట్యాబ్ పై మౌస్ మీద ఉన్నప్పుడు అండర్లైన్ను తిరిగి ప్రారంభించడమే. మీరు దీన్ని చేయాలనుకుంటే, టెక్స్ట్-అలంకరణకు మార్చండి: అండర్లైన్;
కానీ CSS 3 ఎక్కడ ఉంది?
మీరు దృష్టి పెట్టారు ఉంటే, మీరు బహుశా శైలి షీట్లో ఉపయోగించిన ఏ CSS 3 శైలులు లేవు గమనించాము. ఇంటర్నెట్ ఎక్స్ప్లోరర్తో సహా, ఏ ఆధునిక బ్రౌజర్లో అయినా పనిచేయడం దీనికి తోడ్పడుతుంది. కానీ ఇది చదరపు పెట్టెల కంటే ట్యాబ్లు మరింతగా కనిపించదు. ఒక CSS 3 స్టైల్ కాల్ సరిహద్దు-వ్యాసార్థాన్ని జోడించడం ద్వారా (మరియు అది సంబంధిత బ్రౌజర్-నిర్దిష్ట కాల్స్) మీరు అంచులు గుండ్రంగా, మనీలా ఫోల్డర్లో మరిన్ని ట్యాబ్లలాగా చూడవచ్చు.
మీరు .tablist li నియమానికి జోడించే శైలులు: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-ఎడమ వ్యాసార్థం: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topright: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topleft: 0.50em; border-top-రైట్-వ్యాసార్థం: 0.50em; border-top-ఎడమ వ్యాసార్థం: 0.50em;
ఈ నేను వ్రాసిన చివరి శైలి నియమాలు:
.tablist li {display: block; padding: 0 1em; టెక్స్ట్ అలంకరణ: none; సరిహద్దు: 0.06 ఎం ఘన # 000; సరిహద్దు-bottom: 0; ఫాంట్: బోల్డ్ 0.88em / 2em ఏరియల్, జెనీవా, హెల్వెటికా, సాన్స్-సెరిఫ్; color: # 000; నేపథ్య రంగు: #ccc; / * CSS 3 మూలకాలు * / వెబ్కిట్-సరిహద్దు-కుడి-కుడి-వ్యాసార్థం: 0.50 ఎం; -webkit-border-top-ఎడమ వ్యాసార్థం: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topright: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topleft: 0.50em; border-top-రైట్-వ్యాసార్థం: 0.50em; border-top-ఎడమ వ్యాసార్థం: 0.50em; } .tablist li a: hover {background: # 3cf; రంగు: #fff; టెక్స్ట్ అలంకరణ: none; }ఈ శైలులతో, మీరు అన్ని ప్రధాన బ్రౌజర్లు మరియు CSS 3 కంప్లైంట్ బ్రౌజర్లు లో nice ముద్రించిన టాబ్లు కనిపిస్తోంది ఒక చేసిన మెను కలిగి. తదుపరి పేజీ మీరు మరింత అది దుస్తులు ధరించడానికి ఉపయోగించే మరొక ఎంపికను ఇస్తుంది.
06 నుండి 06
ప్రస్తుత ట్యాబ్ను హైలైట్ చేయండి
నేను సృష్టించిన HTML లో, UL ఒక ID తో ఒక జాబితా మూలకం ఉండేది. ఇది ఒక LI ను మిగిలిన శైలి నుండి ఇవ్వడానికి మిమ్మల్ని అనుమతిస్తుంది. ప్రస్తుత టాబ్ కొన్ని మార్గాల్లో నిలబడటానికి అత్యంత సాధారణ పరిస్థితి. ఈ ఆలోచించడానికి మరో మార్గం మీరు లైవ్ లేని టాబ్లను బయటకు బూడిద కావలసిన ఉంది. Id ఎక్కడ వేర్వేరు పేజీలలో ఉన్నదో మీరు మార్చండి.
నేను # ప్రగతికి చెందిన ఒక ట్యాగ్ అలాగే # కరెంట్ A రెండింటినీ: హోవర్ STA రెండూ కొద్దిగా భిన్నంగా ఉంటాయి. మీరు రంగు, నేపథ్య రంగు, ఎత్తు, వెడల్పు మరియు ఆ మూలకాల పాడింగ్ కూడా మార్చవచ్చు. మీ రూపకల్పనలో ఏవైనా మార్పులు చేస్తాయి.
.tablist li # ప్రస్తుత {background-color: # 777; రంగు: # ff; } .tablist li # ప్రస్తుతము: హోవర్ {background: # 39C; }మరియు మీరు పూర్తి చేసారు! మీరు మీ వెబ్సైట్ కోసం టాబ్ చేసిన మెనుని సృష్టించారు.