Πώς να Δημιουργήσετε: Απαντητική Κεφαλίδα
- Previous page Pill navigation
- Next page Slides
Μάθετε πώς να δημιουργήσετε μια απαντητική κεφαλίδα χρησιμοποιώντας το CSS.
Απαντητική Κεφαλίδα
Καθορίστε το σχεδιασμό της κεφαλίδας ανάλογα με το μέγεθος της οθόνης. Αλλάξτε το μέγεθος του παραθύρου του περιηγητή για να δείτε τα αποτελέσματα.
Δημιουργία ανα��στικής κεφαλίδας
第一步 - Προσθήκη HTML：
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
第二步 - Προσθήκη CSS：
/* Χρήση γκρι φόντου και κάποιων εσωτερικών γωνιών για τη ρύθμιση του στυλ του τίτλου */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
/* Ρύθμιση του στυλ του σύνδεσμου τίτλου */
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
/* Ρύθμιση του στυλ του σύνδεσμου Logo (σημειώστε ότι ρυθμίζουμε την γραμμή υψώσεως και το μέγεθος του κειμένου στους ίδιους τιμές για να αποτρέψουμε την αύξηση του κεφαλιού όταν το κείμενο μεγαλώνει) */
.header a.logo {
font-size: 25px;
font-weight: bold;
/* Αλλαγή του χρώματος του φόντου όταν το ποντίκι αναγνωρίζεται */
.header a:hover {
background-color: #ddd;
color: black;
/* Ρύθμιση του στυλ του ενεργού/τρέχοντος σύνδεσμου */
.header a.active {
background-color: dodgerblue;
color: white;
/* Τοποθέτηση των σύνδεσμων δεξιά */
.header-right {
float: right;
/* Προσθήκη ερωτηματολογίου για την απόκριση - όταν το πλάτος του οθόνη είναι 500px ή μικρότερο, τα σύνδεσμοι θα είναι στοιβάζονται */
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
.header-right {
float: none;
Related pages
Tutorial:CSS navigation bar
- Previous page Pill navigation
- Next page Slides
