Wir haben den gesamten Inhalt, den wir für diese Seitenausgabe benötigen, und wir haben den Header installiert. Jetzt können wir CSSin 'den Inhalt in das Design starten, das wir in Photoshop haben.
Wir haben die Liste der sieben Kategorien statisch gemacht. Es ist nur ein Aufruf von wp_list_pages () weniger und damit etwas effizienter. Wenn wir jemals die Kategorien ändern, ist das eine so große Sache, dass es keine große Sache ist, diesen Code erneut zu besuchen.
Wir brauchen hier im Wesentlichen ein zweispaltiges Design. Das ist einfach genug, um nur ein paar Divs zu schweben (oder wahrscheinlicher, wenn wir unser vorhandenes Grid-Framework verwenden). Das hilft uns jedoch nicht dabei, Säulen mit „gleicher Höhe“ zu erstellen, wie es unser Design hier vorschreibt. Schließlich sind Divs ohne festgelegte Höhen nur so hoch wie der Inhalt in ihnen. Das Einstellen einer Höhe für ein Div ist im Allgemeinen eine schlechte Idee.
Um Spalten mit gleicher Höhe zu erhalten, fälschen wir sie mit einer kleinen Idee, bei der wir ein großes Wrapper-Div (das so hoch ist wie die höchste der darin enthaltenen Spalten) verwenden und einen Verlaufshintergrund festlegen. Kein Farbverlauf von einer Farbe zur anderen, sondern ein Farbverlauf mit harten Stopps genau dort, wo die Spalte bricht. Dies gibt uns die Grau-links- und Weiß-rechts-Farbe, die wir brauchen.
Wir wenden die verschiedenen Hintergrundfarben auf jeden Kategorielink in der linken Spalte mit einer Reihe von: nth-child () - Selektoren an. Wir entscheiden uns eher für diese Methode als für Klassen, da die Reihenfolge der Farben wichtiger ist als die Anpassung der Farbe an die Kategorie (eher willkürlich).
Bevor wir mit diesem Screencast fertig sind, aktivieren wir den Schatteneffekt (eine nachdrückliche Trennung zwischen den Spalten), indem wir ein Pseudoelement auf die Navigation anwenden, die sich von oben nach unten auf der Seite erstreckt. Dieses Pseudoelement hat einen eigenen schwarz-transparenten Farbverlauf, der es wie einen Schatten aussehen lässt.