Was ist eine gute Online-Ressource für CSS-Designmuster?[geschlossen]

Question

Kann jemand da draußen eine gute Online-Ressource für CSS-Designmuster empfehlen?

Ich weiß, dass sich Designmuster im Softwarekontext normalerweise auf OO-basierte Designmuster beziehen, aber ich meine Designmuster im weiteren Sinne des Begriffs:d.h.gemeinsame, saubere Lösungen für häufige Probleme/Aufgaben.

Ein Beispiel für eine solche Ressource wäre diese Liste von Tischdesigns, Hier erhalten Sie alles, was Sie wirklich wissen müssen, um mithilfe einer Reihe von CSS-Techniken Tabellen schön aussehen zu lassen.

Andere Beispiele für häufige Probleme, für die es schöne Lösungen geben könnte, wären Dinge wie abgerundete Ecken bei Divs, sehr benutzerfreundliche Formularlayouts usw.

Answer 1

ich beziehe mich auf Eine Liste für sich Ständig Artikel über solche Dinge.Sie führen eine Menge Versuch-und-Irrtum-Recherchen durch, um wirklich kreative Wege zu finden, um diese häufigen CSS-Probleme auf die sauberste und portabelste Art und Weise zu lösen.

Answer 2

Einige Websites, die sich mit Webdesign-Mustern befassen, sind unten aufgeführt.Sie stellen nicht speziell den HTML- und/oder CSS-Code bereit, um die gewünschten Ergebnisse zu erzielen, aber sie stellen Beispiele für Live-Sites bereit, die Sie nutzen können Quelltext anzeigen an (oder, noch besser, verwenden Feuerkäfer).

UI-Muster

Dies ist wahrscheinlich das Beste von allen.Es unterteilt die Dinge in Kategorien, die die Breite der Webseiten-Designaufgaben abdecken.Sie finden unter anderem Kategorien wie Tag-Clouds, Live-Vorschau und Benutzerregistrierung.Dies ist eine wirklich umfassende Ressource, die gut organisiert ist.Es erklärt jedes Muster und bietet zahlreiche Beispiele.

Muster tippen

Ähnlich wie UI-Patterns, allerdings derzeit nicht so umfassend.Bei der Zusammenstellung von Designmustern wird ein sozialerer Ansatz verfolgt, indem Benutzern die Möglichkeit gegeben wird, ihre eigenen Kategorien („Benutzergruppen“) zu erstellen und diese mit ihrer eigenen Auswahl an Websites zu füllen.

Yahoo Design Pattern Library

Im Gegensatz zu den anderen beiden enthält dieses nicht viele Beispiele für echte Websites.Es ist gut organisiert und recht umfassend.

Elemente des Designs

Dies ist ein Blog, der verschiedene Elemente des Webdesigns präsentiert.Es werden die Muster nicht besprochen, aber es eignet sich gut als schnelle Inspirationsquelle oder als Mittel, um mit der eigenen Analyse zu beginnen.

Answer 3

Der Float-Tutorial ist ein guter Ausgangspunkt zum Erlernen des wichtigen CSS-Attributs „float“ und seiner Verwendung zum Layouten von Inhalten unter Verwendung einiger gängiger Muster, einschließlich zweispaltiger und dreispaltiger flüssiger Layouts.

FloatUtorial führt Sie durch die Grundlagen schwimmender Elemente wie Bilder, Dropkappen, Nächst- und Rückschaltflächen, Bildgalerien, Inline-Listen und mehrspaltigen Layouts.

Answer 4

Das bereits erwähnte Eine Liste für sich ist sehr gut.Eine andere Website, die ich seit Beginn meiner Webentwicklung verwende, ist SitePoint.com.Hier ist ihr CSS-Referenz.Wenn Sie ein gutes CSS-Buch suchen, ist dieses eines meiner Favoriten.

Answer 5

Was einem „Designmuster“ in CSS am nächsten kommt, sind gängige Layouts.Das beste Tool, um gängige Layouts, Spaltenbreiten usw. zu nutzen.Ist 960 Rastersystem, bei 960.gs

Sehen Sie sich diesen Screencast für eine kurze Einführung an.Das spart eine Menge Zeit und hilft Ihnen, alle gängigen Layoutmuster mit minimalem Code anzuwenden:

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

Sie müssen lediglich die richtigen Klassen anwenden und ein wenig rechnen, um sicherzustellen, dass alle Spaltenbreiten zusammenpassen.

Das Buch, das ich für CSS am meisten empfehle, ist CSS-Beherrschung von Andy Budd (cssmastery.com).Es ist etwas klein, aber es hat mir mehr geholfen als jedes andere CSS-Buch.