Was ist ein Grid-View?
Viele Webseiten auf einem gitter Ansicht basiert, was bedeutet, dass die Seite in Spalten unterteilt ist:
ein Raster-Ansicht zu verwenden ist sehr hilfreich, wenn Web-Seiten zu gestalten. Das macht es leichter Elemente auf der Seite zu platzieren.
Eine ansprechende gitter Ansicht hat oft 12 Spalten und hat eine Gesamtbreite von 100% und wird schrumpfen und zu erweitern, wie Sie das Browser-Fenster ändern.
Der Aufbau einer Responsive Grid-View
Fangen wir eine reaktionsnetz Ansicht zu bauen.
Stellen Sie zunächst sicher , dass alle HTML - Elemente , die haben box-sizing - Eigenschaft auf border-box . Dies stellt sicher, dass die Polsterung und Grenze sind in der gesamten Breite und Höhe der Elemente enthalten.
Fügen Sie den folgenden Code in Ihre CSS:
* {
box-sizing: border-box;
}
Lesen Sie mehr über die box-sizing Immobilie in unserem CSS3 Box Sizing Kapitel.
Das folgende Beispiel zeigt eine einfache ansprechende Web-Seite mit zwei Spalten:
Das obige Beispiel ist in Ordnung, wenn die Web-Seite nur zwei Spalten enthält.
Allerdings wollen wir eine reaktionsnetz Ansicht mit 12 Spalten zu verwenden, mehr Kontrolle über die Web-Seite zu haben.
100% / 12 Spalten = 8,33%: Zuerst müssen wir den Prozentsatz für eine Spalte berechnen.
Dann machen wir eine Klasse für jede der 12 Spalten, class="col-" und eine Nummer , die , wie viele Spalten sollte der Abschnitt erstrecken:
CSS:
.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%;} Versuch es selber " Alle diese Spalten sollten nach links schwebend sein, und haben eine Polsterung von 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Jede Zeile sollte in einem gewickelt werden <div> . Die Anzahl der Spalten in einer Zeile sollte immer summieren sich zu 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>Die Spalten innerhalb einer Reihe sind alle schwebenden nach links, und werden daher aus dem Fluss von der Seite genommen, und andere Elemente werden, wie gebracht werden, wenn die Spalten nicht existiert. Um dies zu verhindern, werden wir einen Stil hinzufügen, die den Fluss löscht:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Wir wollen auch einige Arten und Farben hinzufügen, um es besser aussehen:
Beispiel
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;
} Versuch es selber " Beachten Sie, dass die Webseite im Beispiel sieht nicht gut aus, wenn Sie das Browser-Fenster zu einem sehr geringen Breite ändern. Im nächsten Kapitel erfahren Sie, wie das zu beheben.