CSS 垂直导航栏
కోర్సు పరిశీలన
వర్టికల్ నేవిగేషన్
实例
width: 200px;
li a {
మీరు <ul> వెడల్పన కూడా నిర్ణయించవచ్చు, మరియు <a> వెడల్పనను తొలగించవచ్చు, ఎందుకంటే వాటిని బ్లాక్ అయినప్పుడు వాటిని పూర్తి వెడల్పన కలిగి ఉంటాయి. ఇది మా ముంది ఉదాహరణలో అన్ని ఫలితాలను కలిగిస్తుంది:
}
వర్టికల్ నేవిగేషన్ నిర్మించడానికి, ముంది చాప్టర్లో ఉన్న కోడ్స్ కాకూడా జాబితాలో <a> మూలకాల స్టైల్స్ నిర్ణయించవచ్చు:
li a {ఉదాహరణ వివరణ:మీరు <ul> వెడల్పన కూడా నిర్ణయించవచ్చు, మరియు <a> వెడల్పనను తొలగించవచ్చు, ఎందుకంటే వాటిని బ్లాక్ అయినప్పుడు వాటిని పూర్తి వెడల్పన కలిగి ఉంటాయి. ఇది మా ముంది ఉదాహరణలో అన్ని ఫలితాలను కలిగిస్తుంది:- లింకులను బ్లాక్ అయిన మూలకంగా చూపించడం ద్వారా మొత్తం లింకు ప్రాంతం క్లిక్ చేయబడగలదు (కేవలం పదబంధాలు కాదు), మరియు వెడల్పన నిర్ణయించవచ్చు (ఉదాహరణకు, ప్రాంతం, మార్జిన్, అడుగునిరంతరం మొదలుకుంటుంది).
- బ్లాక్ అయిన మూలకాలు పూర్తి వెడల్పన కలిగి ఉంటాయి. మేము 60 పిక్సెల్స్ వెడల్పన నిర్ణయించాము.
实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
మీరు <ul> వెడల్పన కూడా నిర్ణయించవచ్చు, మరియు <a> వెడల్పనను తొలగించవచ్చు, ఎందుకంటే వాటిని బ్లాక్ అయినప్పుడు వాటిని పూర్తి వెడల్పన కలిగి ఉంటాయి. ఇది మా ముంది ఉదాహరణలో అన్ని ఫలితాలను కలిగిస్తుంది:
}
width: 200px;
li a {
}
width: 60px;
వర్టికల్ నేవిగేషన్ ఉదాహరణ
实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
కాలర్ బ్లాక్ కాలర్ ఉన్న మూలకం ఉంచబడిన ప్రాంతాన్ని రూపొందించండి, మరియు వాడారు మౌస్ హోవర్ చేసినప్పుడు లింకు బ్యాక్గ్రౌండ్ కాలర్ మార్చండి:
background-color: #f1f1f1;
}
width: 200px;
li a {
display: block;
color: #000;
padding: 8px 16px;
}
text-decoration: none;
/* మౌస్ హోవర్ అయినప్పుడు లింకు రంగు మార్చండి */
li a:hover {
background-color: #4CAF50;
}
background-color: #555;
చటువాను/ప్రస్తుత నేవిగేషన్ లింకు
实例
ప్రస్తుత లింకుకు "active" క్లాస్ జోడించండి, తద్వారా వాడారుకు తెలుసుకునేందుకు అనువు అవుతుంది:
.active {
background-color: #4CAF50;
}
color: white;
మధ్యను ఉంచబడిన లింకును మరియు బార్డర్ జోడించండి. మధ్యను ఉంచబడిన లింకును మరియు బార్డర్ జోడించండి. text-align:center
జోడించండి <li> లేదా <a>కు, లింకులను మధ్యను ఉంచండి. border అమర్చు <ul>కు విశేషంగా నేవిగేషన్ చుట్టూ బార్డర్ జోడించండి. మీరు నేవిగేషన్ లోపల బార్డర్ జోడించాలని కోరుకుంటే, అన్ని <li> మూలకాలకు border-bottomచివరి మూలకం మినహా:
实例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
全高固定垂直导航栏
创建全高的“粘性”侧面导航：
实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全高 */
position: fixed; /* గాలిపోవడం చేయండి, కానీ స్క్రోల్ చేసినప్పటికీ */
overflow: auto; /* సెకండ్లైన్ కంటెంట్ చాలా ఉంటే స్క్రోల్ బార్ చేతనం చేయండి */
}
మీరు మనం ప్రయత్నించండి:ఈ ఉదాహరణ మొబైల్ పరికరంలో సరిగ్గా పని చేయకపోవచ్చు.
