Πώς να δημιουργήσετε: Γραμμή αναζήτησης

Εκμάθηση πώς να προσθέσετε κουτί αναζήτησης σε μια αναποδιετήμενη導航菜单.

Δημιουργία γραμμής αναζήτησης

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

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">Σχετικά</a>
  <a href="#contact">Επικοινωνία</a>
  <input type="text" placeholder="Αναζήτηση..">
</div>

Επόμενο βήμα - Προσθήκη CSS:

/* Προσθήκη μαύρου φόντου στο μενού πλοήγησης κορυφής */
.topnav {
  περικοπές: κρυφή;
  χρώμα-βάθος: #e9e9e9;
}
/* Ορισμός των στοιχείων του μενού πλοήγησης που είναι σύνδεσμοι */
.topnav a {
  πτήση: αριστερά;
  παρουσίαση: block;
  χρώμα: μαύρο;
  τεκμηρίωση-προσανατολισμός: κέντρο;
  παράθυρο: 14px 16px;
  απόδοση-γράμματα: none;
  πλάτος-γράφημα: 17px;
}
/* Αλλαγή του χρώματος των συνδέσμων όταν είναι επάνω τους */
.topnav a:hover {
  χρώμα-βάθος: #ddd;
  χρώμα: μαύρο;
}
/* Ορισμός των στοιχείων του μενού πλοήγησης που είναι ενεργά για να επισημαίνουν την τρέχουσα σελίδα */
.topnav a.active {
  χρώμα-βάθος: #2196F3;
  χρώμα: λευκό;
}
/* Ορισμός των στοιχείων του μενού πλοήγησης που είναι πλαίσια αναζήτησης */
.topnav input[type=text] {
  πτήση: δεξιά;
  παράθυρο: 6px;
  περιθώριο: none;
  μαργίνας-πάνω: 8px;
  μαργίνας-δεξιά: 16px;
  πλάτος-γράφημα: 17px;
}
/* Όταν το πλάτος οθόνης είναι κάτω από 600px, τα σύνδεσμοι και τα πλαίσια αναζήτησης είναι οριζόντια αντί για κατακόρυφα */
@μέσος οθόνης και (πλάτος-καθορισμός: 600px) {
  .topnav a, .topnav input[type=text] {
    πτήση: none;
    παρουσίαση: block;
    τεκμηρίωση-προσανατολισμός: αριστερά;
    πλάτος: 100%;
    μαργίνας: 0;
    παράθυρο: 14px;
  }
  .topnav input[type=text] {
    κίτρινη: 1px solid #ccc;
  }
}

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

Σχετικές σελίδες

Εκμάθηση:Πώς να δημιουργήσω; Εφαρμογή αλληλεπιδραστικής κορυφής

Εκμάθηση:CSS νάβιλο