Gemeinsamer Ansatz für das Design von Webseiten-Komponenten

Question

Wir beginnen mit dem ersten Entwurf eines Webseitenlayouts und möchten wissen, wie wir die Webseite und alle Komponenten darauf einstellen. Die Seite hat eine horizontale Kopfzeile mit einer Navigationsleiste und drei Spalten darunter. Das ist, was ich mit so weit habe kommen: in einem drei mit horizontal ausgerichteten nav verbindet

feste Höhe und Breite in Pixel für Web-Komponenten

Komponenten residieren

• feste Höhe in Pixeln für Kopfteil Spalten (div-Elemente) mit minimaler Breite

Vermisse ich etwas oder es ist ein guter Weg zu gehen?

PS Ich bin vollkommen bewusst Bootstrap etc, kann aber keinen Rahmen in diesem Projekt verwenden, werden nur reine HTML/CSS

Answer 1

Wenn Sie grundlegende HTML und CSS (und möglicherweise JavaScript) wissen, würde ich sofort gehen und lesen up auf twitter-Bootstrap http://getbootstrap.com/

Wenn Sie nicht Frameworks verwenden können, dann https://html5boilerplate.com/ ein guter Ort, um ihnen gleiche Wettbewerbsbedingungen und eine gute Struktur zu starten wäre zu bekommen :) ich denke, dass der perfekte Start für Ihr Projekt sein könnte.

Answer 2

Ihre Frage ist ziemlich breit und kann geschlossen werden, aber Dinge zu beachten;

Betrachten Sie die Verwendung von HTML Boilerplate, wie jemand anderes darauf hingewiesen hat. Dies ist kein Framework, es ist nur ein Ausgangspunkt für ein HTML-Dokument, das einen Reset enthält, der Inkonsistenzen ausgleicht, die beim Start auftreten können. Sie sollten dies so anpassen, wie Sie es für Ihre Anforderungen benötigen.

In Bezug auf das Layout würde ich Flexbox verwenden, die Ihnen das Layout geben sollte, das Sie wünschen. Wenn Sie mobile Browser unterstützen müssen, dann sind Media Queries Ihr Freund. Dies sollte Ihnen genug Informationen geben, um zu beginnen.

Wie für JS, fügen Sie es hinzu, wenn Sie es brauchen!

Answer 3

Hier ist meine Lösung: Quick Slicer für die erste Planskizze Versuchen Sie, und bearbeiten Sie dann den Code, eine Feinabstimmung der CSS (.scss in der Tat), Refactoring die Dimensionen absolute p i x els oder em s (wenn nötig?), Und füllen Sie die Inhaltstexte, um Ihre Bedürfnisse zu erfüllen.