Πολλές ιστοσελίδες βασίζονται σε προβολή πλέγματος, που σημαίνει ότι η σελίδα χωρίζεται σε στήλες:
Η χρήση μιας προβολής πλέγματος είναι πολύ χρήσιμη κατά το σχεδιασμό ιστοσελίδων. Διευκολύνει την τοποθέτηση στοιχείων στη σελίδα.
Μια αποκριτική προβολή πλέγματος έχει συχνά 12 στήλες και έχει συνολικό πλάτος 100%, και θα συρρικνωθεί και θα επεκταθεί καθώς αλλάζετε το μέγεθος του παραθύρου του προγράμματος περιήγησης.
Παράδειγμα: Αποκριτική προβολή πλέγματος:
Ας αρχίσουμε να χτίζουμε μια αποκριτική προβολή πλέγματος.
Πρώτα βεβαιωθείτε ότι όλα τα στοιχεία HTML έχουν την ιδιότητα box-sizing που έχει οριστεί σε border-box. Αυτό διασφαλίζει ότι η επένδυση και το περίγραμμα περιλαμβάνονται στο συνολικό πλάτος και ύψος του τα στοιχεία.
Προσθέστε τον ακόλουθο κώδικα στο CSS σας:
* {
box-sizing: border-box;
}Διαβάστε περισσότερα σχετικά με την ιδιότητα box-sizing στο κεφάλαιο CSS Box Sizing.
Το ακόλουθο παράδειγμα δείχνει μια απλή αποκριτική ιστοσελίδα, με δύο στήλες:
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Το παραπάνω παράδειγμα είναι καλό εάν η ιστοσελίδα περιέχει μόνο δύο στήλες.
Ωστόσο, θέλουμε να χρησιμοποιήσουμε μια αποκριτική προβολή πλέγματος με 12 στήλες, για να έχουμε περισσότερες έλεγχο της ιστοσελίδας.
Πρώτα πρέπει να υπολογίσουμε το ποσοστό για μία στήλη: 100%/12 στήλες = 8,33%.
Μετά εμείς φτιάξτε μια κλάση για καθεμία από τις 12 στήλες, class="col-" και έναν αριθμό ορίζοντας πόσες στήλες πρέπει να εκτείνεται η ενότητα:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
Όλες αυτές οι στήλες θα πρέπει να αιωρούνται προς τα αριστερά και να έχουν μια συμπλήρωση 15 εικονοστοιχείων:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}Κάθε σειρά πρέπει να είναι τυλιγμένη σε ένα <div>. Ο αριθμός των στηλών μέσα σε μια σειρά πρέπει πάντα να αθροίζονται έως 12:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>Οι στήλες μέσα σε μια γραμμή είναι όλες αιωρούμενες προς τα αριστερά, και επομένως είναι αφαιρείται από τη ροή της σελίδας και άλλα στοιχεία θα τοποθετηθούν σαν να μην υπάρχουν οι στήλες. Για να το αποτρέψουμε αυτό, θα το κάνουμε προσθέστε ένα στυλ που καθαρίζει τη ροή:
.row::after {
content: "";
clear: both;
display: table;
}Θέλουμε επίσης να προσθέσουμε μερικά στυλ και χρώματα για να το κάνουμε να φαίνεται καλύτερο:
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
Παρατηρήστε ότι η ιστοσελίδα στο παράδειγμα δεν φαίνεται καλή όταν αλλάζετε το μέγεθος του παραθύρου του προγράμματος περιήγησης σε πολύ μικρό πλάτος. Στο επόμενο κεφάλαιο θα μάθετε πώς να το διορθώσετε.