Wie gestalte ich Div+CSS-Webseiten? div+css Webseiten-Layout-Methode

Der Inhalt dieses Artikels befasst sich mit dem Layout einer Div+CSS-Webseite. Die div+css-Webseitenlayoutmethode hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

div+css-Layout ist das neueste Web-Layout-Konzept, das sich völlig von den alten Layout-Methoden (z. B. Tabellenlayout) unterscheidet. Verwenden Sie zunächst div-Tags, um die Inhaltsbereiche auf der gesamten Seite zu unterteilen, verwenden Sie dann CSS zur Positionierung und fügen Sie schließlich Inhalte zu den entsprechenden Bereichen hinzu. Das Layout von div+css ist sehr einfach und relativ einfach zu bedienen. Das Folgende ist eine Einführung in die CSS + Div-Layoutmethode.

1. Verwenden Sie Divs, um die Seite zu unterteilen.

Verwenden Sie Divs, um die Seite zu unterteilen. Der nächste Schritt kann nur sein erfolgt, nachdem das Gesamtgerüst der Webseite festgelegt wurde. Es verwendet hauptsächlich Divs, um jeden Inhaltsbereich zu unterteilen. Am Beispiel des einfachsten Seitenrahmens besteht die Seite im Allgemeinen aus mehreren Teilen: Banner, Hauptinhalt, Hauptnavigation im Menü und dem unteren Rand der Seite (Fußzeile wird auch als Fußnote bezeichnet). Jeder Teil besteht aus einer eigenen ID zur Identifizierung. Wie im Bild gezeigt:

2. Entwerfen Sie die Position jedes Inhaltsblocks

Nachdem der Seiteninhalt festgelegt wurde, können Sie Je nach Inhalt muss das Nachtschichtlayout berücksichtigt werden, z. B. Menü, zwei Spalten, links und in der Mitte. Große Websites verwenden meist drei Spalten, links, in der Mitte und rechts Generell wird empfohlen, zwei Spalten zu verwenden. Nachdem der Inhaltsblock bestimmt wurde, können Sie ihn direkt mit CSS positionieren.

3. Verwenden Sie CSS zum Positionieren

Nachdem Sie den Seitenrahmen festgelegt haben, können Sie die Inhaltsblöcke jedes Designs mit CSS positionieren , und erstellen Sie dann einen Gesamtplan für jeden Block und fügen Sie am Ende Inhalte hinzu.

Der Satz ist relativ einfach und verwendet zwei Gleitkommapositionierungen, fünf Mittelausrichtungen und eine klare Gleitkommaausrichtung. Bilder werden im Allgemeinen im Bannerbereich platziert und Links werden im Navigationsbereich platziert. Sie können a-Tags direkt oder ul-Tags oder h2-Tags mit a-Tags platzieren. Der Hauptinhalt der Website wird im Allgemeinen mit Links (ul oder ol) platziert Tags mit Tags), Bilder und Inhaltszusammenfassungen (p Tags wenden ein Tag an).

Wie gestaltet man oben eine Div+CSS-Webseite? Eine vollständige Einführung in die div+css-Webseitenlayoutmethode. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie gestalte ich Div+CSS-Webseiten? div+css Webseiten-Layout-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!