So verwenden Float-Art Forms für HTML5 und CSS3 Programmierung

Viele Seitenlayout Probleme erscheinen Tabellen zu erfordern. Einige geschickte Nutzung des CSS3 schweben kann ohne den Overhead von Tabellen Elemente mit mehreren Spalten helfen. Formulare verursachen eine besondere Kopfschmerzen, weil eine Form oft mit Etiketten in einer linken Spalte, gefolgt von Eingang Elemente in der rechten Spalte.

Sie würden wahrscheinlich eine solche Form in einer Tabelle zu setzen versucht sein. Tabellen-Tags Hinzufügen macht die HTML viel komplexer und ist nicht erforderlich. Es ist viel besser CSS zu verwenden, um das Layout zu verwalten.

Sie können Elemente schweben zu attraktiven Formen erstellen, ohne Tabellen zu erfordern.

Als Seitendesign mehr beteiligt wird, macht es mehr Sinn des HTML zu denken und die separat CSS. Die HTML wird Ihnen ein Gefühl für die Gesamt Absicht der Seite, und die CSS kann separat verändert werden. Die Verwendung externer CSS ist eine natürliche Erweiterung dieser Philosophie. Beginnen Sie mit bei floatForm.html suchen und konzentrieren sich auf die HTML-Struktur vor über Stil besorgniserregend:

Während Sie diesen Code überblicken, beachten Sie einige interessante Dinge darüber, wie die Seite gestaltet ist:

• Die CSS ist extern. CSS wird in einem externen Dokument definiert. Das macht es einfach, den Stil zu ändern und hilft Ihnen, auf dem HTML-Dokument in Isolation zu konzentrieren.

• Der HTML-Code ist minimal. Der Code ist sehr sauber. Es umfasst eine Form mit einem. Die enthält Etiketten, Elemente und ein.

• Es gibt nicht einen Tisch. Es gibt keine Notwendigkeit, eine Tabelle als künstliche Organisationsschema hinzuzufügen. Eine Tabelle würde nicht auf die Klarheit der Seite hinzufügen. Die Formelemente selbst genug Struktur bieten alle Formatierungen zu ermöglichen, die Sie benötigen.

• Etiketten sind Teil des Designs. Sie können die Verwendung Etikette Element in der gesamten Form, ein Element zu geben, die gestylt werden können wie Sie wollen.

• Alles ist wählbar. Sie wollen ein CSS-Stil Etiketten aufzubringen, der andere an Eingang Elemente und ein dritter Stil der Taste. Sie können den HTML einrichten, so dass Sie CSS-Selektoren, ohne dass irgendwelche verwenden können Ich würde oder Klasse Attribute.

• Da ist ein Taste. Sie können ein verwenden Taste Element anstelle von absichtlich. Auf diese Weise können Sie einen Stil auf alle anwenden Taste Elemente und einen anderen Stil auf das Element.

Entwerfen einer Seite wie dieser so seine innere Struktur bietet alle Selektoren Sie brauchen ist wunderbar. Dies hält die Seite sehr sauber und leicht zu lesen. Dennoch haben Sie keine Angst Klassen oder IDs hinzufügen, wenn Sie sie benötigen.

Es ist oft eine gute Idee, auf Ihrer Seite mit geraden HTML zu suchen, bevor Sie mit CSS Herumspielen beginnen.

Wenn Sie eine Seite mit Stile haben und Sie wollen sehen, wie es ohne die Stilregeln aussehen wird, Chrome-Entwickler-Tools oder Firebug verwenden. Sie können einige oder alle CSS-Stilregeln sehen den Standardinhalt unter vorübergehend deaktivieren. Dies kann manchmal sehr praktisch sein.