ఎలా సృష్టించాలి: ప్రింటింగ్ మెనూ

ప్రింటింగ్ టాప్ మెనూ సృష్టించడం ఎలా

ఒకటో చర్య - ఎచ్చిఎమ్ఎల్ జోడించండి:

<div class="navbar">
  <a href="#home">హోమ్</a>
  <a href="#news">వార్తలు</a>
  <a href="#contact">సంప్రదించండి</a>
</div>
<div class="main">
  <p>కొన్ని వచనాలు కొన్ని వచనాలు కొన్ని వచనాలు కొన్ని వచనాలు అన్నిటికీ..</p>
</div>

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

ప్రింటింగ్ టాప్ మెనూ సృష్టించడానికి ఉపయోగించండి position:fixed మరియు top:0గమనించండి, ప్రింటింగ్ మెనూ మిగతా కంటెంట్ పైన ఆవరించుతుంది. ఈ సమస్యను పరిష్కరించడానికి, మెనూ ప్రాంతంలో ముప్పుగా లేదా అంతకన్నా పెద్ద ముప్పుని ముఖ్యమైన ప్రాంతంపైన జోడించండి (margin-top).

/* నేవిగేషన్ బార్ */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* నేవిగేషన్ బార్ ను ప్రింటింగ్ స్థానంలో ఉంచండి */
  top: 0; /* నేవిగేషన్ బార్ ను పేజి పైన ఉంచండి */
  width: 100%; /* పూర్తి వెడల్పు */
}
/* నేవిగేషన్ బార్ లోని లింకులు */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* మౌస్ హోవర్ వద్ద బ్యాక్గ్రౌండ్ మార్చండి */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* ప్రధాన కంటెంట్ */
.main {
  margin-top: 30px; /* ముఖ్యమైన ప్రాంతంలో వింతరం ఆవరించడానికి పైన బాహ్య సరిహద్దిని జోడించండి */
}

亲自试一试

ప్రింటింగ్ బోటమ్ మెనూ సృష్టించడం ఎలా

ప్రింటింగ్ బోటమ్ మెనూ సృష్టించడానికి ఉపయోగించండి position:fixed మరియు bottom:0:

/* నేవిగేషన్ బార్ */
.navbar {
  position: fixed; /* నేవిగేషన్ బార్ ను ప్రింటింగ్ స్థానంలో ఉంచండి */
  bottom: 0; /* నేవిగేషన్ బార్ ను పేజి అంతంలో ఉంచండి */
  width: 100%; /* పూర్తి వెడల్పు */
}
/* ప్రధాన కంటెంట్ */
.main {
  margin-bottom: 30px; /* ముఖ్యమైన ప్రాంతంలో వింతరం ఆవరించడానికి క్రింది బాహ్య సరిహద్దిని జోడించండి */
}

亲自试一试

相关页面

教程：CSS 导航栏