Σχεδιασμός ιστοσελίδας CSS

Website layout

Websites are usually divided into page headers, menus, content, and footers:

There are many different layout designs to choose from. However, the above structure is one of the most common structures, and we will study it in detail in this tutorial.

Page header

The page header (header) is usually located at the top of the website (or just below the top navigation menu). It usually contains a logo or the name of the website:

Παράδειγμα

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Ε 결과:

Page header

Δοκιμάστε το Εξ ορισμού

Navigation bar

The navigation bar contains a list of links to help visitors browse your website:

Παράδειγμα

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Link - Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Ε 결과:

Δοκιμάστε το Εξ ορισμού

Content

The choice of layout usually depends on your target users. The most common layouts are one of the following (or a combination of them):

  • 1-στήληΔιάταξη (γενικά χρησιμοποιείται για τους κινητούς περιηγητές)
  • 2-στήλεςΔιάταξη (γενικά χρησιμοποιείται για τα tablet και τα laptop)
  • 3-στήλεςΔιάταξη (μόνο για επιτραπέζια συστήματα)

1-στήλη:

2-στήλες:

3-στήλες:

Θα δημιουργήσουμε διάταξη τριών στηλών και θα την μετατρέψουμε σε διάταξη μιας στήλης σε μικρότερες οθόνες:

Παράδειγμα

/* Δημιουργία τριών ισών στηλών που να είναι παράλληλες */
.column {
  float: left;
  width: 33.33%;
}
/* Καθαρισμός του float πίσω από τις στήλες */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Λειτουργικό διάταξη - Στα stackδυναμικά τα τρία στήλες, αντί να παραλληλοπλέξουν σε μικρότερες οθόνες (πλάτος 600 εικονοστοιχείων ή μικρότερο) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Ε 결과:

Πλήρες εμπορικό έντυπο τεχνολογίας ιστότοπου

Το εμπορικό μας έντυπο καλύπτει όλες τις πτυχές της τεχνολογίας του ιστότοπου.

Ενcludeται η τεχνολογία πρότυπου W3C: HTML, CSS, XML. Κατάλληλο και άλλες τεχνολογίες, όπως JavaScript, PHP, SQL κ.λπ.

Εργαλεία δοκιμών διαδικτυακών παραδειγμάτων

Στο CodeW3C.com, παρέχουμε χιλιάδες παραδείγματα.

Με τη χρήση του διαδικτυακού μας επεξεργαστή, μπορείτε να επεξεργαστείτε αυτά τα παραδείγματα και να δοκιμάσετε τον κώδικα.

Γρήγορη και κατανοητική μέθοδος μάθησης

Ο χρόνος είναι χρήμα, οπότε σας παρέχουμε γρήγορο και κατανοητό περιεχόμενο μάθησης.

Εδώ, μπορείτε να αποκτήσετε οποιαδήποτε γνώση που χρειάζεστε με έναν κατανοητό και εύκολο τρόπο.

Δοκιμάστε το Εξ ορισμού

Συμβουλή:Για να δημιουργήσετε διάταξη δύο στηλών, αλλάξτε το πλάτος σε 50%. Για να δημιουργήσετε διάταξη τεσσάρων στηλών, χρησιμοποιήστε 25%.

Συμβουλή:Είστε ενδιαφερόμενοι για το πώς λειτουργεί η �όλη @media; Διαβάστε το CSS Ερωτήσεις Μέσα Μάθετε περισσότερα σχετικά με τις γνώσεις που θα μάθετε σε αυτό το κεφάλαιο.

Συμβουλή:Μια πιο μοντέρνα μέθοδος δημιουργίας διάταξης στηλών είναι η χρήση του CSS Flexbox. Ωστόσο, ο Internet Explorer 10 και οι προηγούμενοι δεν υποστηρίζουν αυτό. Αν χρειάζεστε υποστήριξη για IE6-10, χρησιμοποιήστε το float (όπως παραπάνω)

Για περισσότερες πληροφορίες σχετικά με το μοντέλο διάταξης Flexible Box, διαβάστε το CSS Flexbox Εκμάθηση.

Μη ίσες στήλες

Το κύριο περιεχόμενο (main content) είναι η μεγαλύτερη και πιο σημαντική πτυχή του ιστότοπου σας.

Συνήθως δεν είναι ίσες οι πλάτες των στηλών, επειδή η περισσότερη χώρος παραμένει για το κύριο περιεχόμενο. Οι βοηθητικές πληροφορίες (αν υπάρχουν) χρησιμοποιούνται συνήθως ως εναλλακτική πλοήγηση ή για να καθορίσουν πληροφορίες που σχετίζονται με το κύριο περιεχόμενο. Μπορείτε να αλλάξετε την πλάτη, αλλά να θυμάστε ότι η συνολική της ποσότητα πρέπει να είναι 100%:

Παράδειγμα

.column {
  float: left;
}
/* Αριστερή και δεξιά στήλη */
.column.side {
  width: 25%;
}
/* Κεντρική στήλη */
.column.middle {
  width: 50%;
}
/* Λειτουργικό διάταξη - Στα堆δυναμικά τα τρία στήλες, αντί να παραλληλοπλέξουν */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Ε 결과:

Πλήρες εμπορικό έντυπο τεχνολογίας ιστότοπου

Το εμπορικό μας έντυπο καλύπτει όλες τις πτυχές της τεχνολογίας του ιστότοπου.

Ενcludeται η τεχνολογία πρότυπου W3C: HTML, CSS, XML. Κατάλληλο και άλλες τεχνολογίες, όπως JavaScript, PHP, SQL κ.λπ.

Εργαλεία δοκιμών διαδικτυακών παραδειγμάτων

Στο CodeW3C.com, παρέχουμε χιλιάδες παραδείγματα.

Με τη χρήση του διαδικτυακού μας επεξεργαστή, μπορείτε να επεξεργαστείτε αυτά τα παραδείγματα και να δοκιμάσετε τον κώδικα.

Γρήγορη και κατανοητική μέθοδος μάθησης

Ο χρόνος είναι χρήμα, οπότε σας παρέχουμε γρήγορο και κατανοητό περιεχόμενο μάθησης.

Εδώ, μπορείτε να αποκτήσετε οποιαδήποτε γνώση που χρειάζεστε με έναν κατανοητό και εύκολο τρόπο.

Δοκιμάστε το Εξ ορισμού

Πόδια Σελίδας

Το πόδι της σελίδας βρίσκεται στο κάτω μέρος της σελίδας. Γενικά περιέχει πληροφορίες όπως πνευματικά δικαιώματα και επαφές:

Παράδειγμα

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Ε 결과:

Πόδια Σελίδας

Δοκιμάστε το Εξ ορισμού

Προσαρμοστική Σύνταξη Ιστοσελίδας

Με τη χρήση του παραπάνω CSS κώδικα, δημιουργήσαμε έναν προσαρμοστικό ιστότοπο, ο οποίος αλλάζει μεταξύ δύο στήλων και μιας πλήρους πλάτης ανάλογα με την πλάτη της οθόνης:

Δοκιμάστε το Εξ ορισμού