Responsives Webdesign -Rasteransicht
Was ist eine Rasteransicht?
Viele Webseiten werden auf Basis eines Rasters entworfen, was bedeutet, dass die Webseiten in Spalten angeordnet sind.
Die Verwendung einer Rasteransicht hilft uns, Webseiten zu gestalten. Dadurch lassen sich Elemente leichter zur Webseite hinzufügen.
Eine responsive Rasteransicht hat normalerweise 12 Spalten, ist 100% breit und dehnt sich automatisch aus und zieht sich zusammen, wenn die Größe des Browserfensters geändert wird.
Erstellen einer responsiven Rasteransicht
Als Nächstes erstellen wir eine responsive Rasteransicht.
Stellen Sie zunächst sicher, dass alle HTML-Elementebox-sizingdas Attribut aufborder-box gesetzt haben.。
Stellen Sie sicher, dass Außenabstände und Rahmen in Breite und Höhe des Elements einbezogen sind.
Fügen Sie den folgenden Code hinzu:
* {
box-sizing: border-box;
}
Klicken Sie hier für weitere Inhalte zu box-sizing:CSS3 box-sizing-Eigenschaft。
Das folgende Beispiel zeigt eine einfache responsive Webseite mit zwei Spalten:
Das obige Beispiel enthält zwei Spalten.
Ein 12-Spalten-Grid-System kann eine responsive Webseite besser steuern.
Zuerst können wir den Prozentsatz jeder Spalte berechnen: 100% / 12 Spalten = 8.33%.
Geben Sie in jeder Spalte eine Klasse an,class="col-"Wird verwendet, um festzulegen, wie viele Spalten jede Spalte überspannt:
CSS:
.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%;}
Selbst ausprobieren »
Alle Spalten werden nach links gefloatet, mit einem Padding von 15px:
CSS:
float: left;
padding: 15px;
border: 1px solid red;
}
Jede Zeile wird mit einem <div> umschlossen. Die Gesamtzahl der Spalten sollte 12 ergeben:
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>
Zeilen in den Spalten floaten nach links, und fügen Sie das Clearen von Floats hinzu:
CSS:
content: "";
clear: both;
display: block;
}
Wir können einige Stile und Farben hinzufügen, damit es besser aussieht:
Beispiel
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;
}
Selbst ausprobieren »