Πώς να δημιουργήσετε: πίνακα πλοήγησης σε εικόνα

Πώς να δημιουργήσετε πίνακα πλοήγησης σε εικόνα

Βήμα 1 - Προσθήκη HTML:

Δημιουργία πίνακα πλοήγησης:

<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

Βήμα 2 - Προσθήκη CSS:

Ρύθμιση στυλ πίνακα πλοήγησης:

.bg-img {
  /* χρησιμοποιούμενη εικόνα */
  εικόνα περιβάλλοντος: url("img_nature.jpg");
  ελάχιστη ύψος: 380px;
  /* τοποθέτηση της εικόνας στο κέντρο και κατάλληλη κλίμακα */
  θέση περιβάλλοντος: κέντρο;
  αναπαραγωγή περιβάλλοντος: χωρίς επανάληψη;
  μεγεθός περιβάλλοντος: καλύπτει;
  /* απαιτείται τοποθέτηση του πίνακα πλοήγησης */
  θεωρία θέσης: σχετική;
{}
/* τοποθέτηση του πίνακα πλοήγησης στο εσωτερικό της εικόνας */
.container {
  θεωρία θέσης: αριστερά;
  μαρτύρας: 20px;
  πλάτος: αυτόματο;
{}
/* πίνακας πλοήγησης */
.topnav {
  περιήγηση: κρυφή;
  χρώμα περιβάλλοντος: #333;
{}
/* σύνδεσμοι πλοήγησης πίνακα */
.topnav a {
  κίνηση: αριστερά;
  χρώμα: #f2f2f2;
  συγχρονισμός κειμένου: κέντρο;
  παράθεση: 14px 16px;
  διακοσμητική: none;
  μεγεθος γραμματοσειράς: 17px;
{}
.topnav a:hover {
  χρώμα-υποβάθρου: #ddd;
  χρώμα: μαύρο;
{}

Δοκιμάστε το προσωπικά