Startseite>Webdesign-Tutorial>WEB-Standardisierung

DIVCSS-Beispiel: Erstellen Sie eine gemeinsame Blogliste

Autor：Eve Cole Aktualisierungszeit：2009-06-11 17:37:36
Das Erstellen von Listen oder listenähnlichen Seitenelementen mit CSS ist seit jeher ein Diskussionsthema. Heute lernen wir eine häufig verwendete Blog-Liste kennen. Hier sind Beispiele, auf die Sie sich beziehen können.

Darstellung dieses Beispiels:


Schauen Sie sich zunächst die Struktur der Zeitebene links, den Titel des Artikels h2, das Meta der Beschreibungsebene des Artikels und den Betreffinhalt des Artikels p an

div css xhtml xml Beispielquellcode Beispiel-Quellcode [www.downcodes.com]
<div id="wrap">
<div class="list">
<p class="date"></p>
<h2></h2>
<p class="meta"></p>
<p></p>
</div>
</div>

Fügen Sie alle Elemente mit ID Wrap in die Ebene ein.
Beginnen wir mit dem detaillierten Schreiben von HTML-Code:

div css xhtml xml Beispielquellcode Beispiel-Quellcode [www.downcodes.com]
<div id="wrap">
<div class="list">
<p class="date">3. September</b></p>
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">DIV-CSS-Layout-Beispiel: Zehn Schritte zur Verwendung des CSS-Website-Layouts! </a></h2>
<p class="meta">Von: <a href="http://www.downcodes.com/">www.downcodes.com</a> |. Herausgeber: <a href="#">downcodes.com </a> |. <a href="#">Keine Antwort?</a></p>
<p>Neuer Tab: Wenn Sie einen neuen Tab öffnen, sehen Sie intuitiv Ihre am häufigsten besuchten Websites, die am häufigsten verwendeten Suchmaschinen, kürzlich mit Lesezeichen versehene Seiten, kürzlich geschlossene Tabs usw. .
App-Verknüpfungen: Aktivieren Sie Web-Apps, ohne einen Browser zu öffnen. Anwendungsverknüpfungen laden Ihre häufig verwendeten Online-Anwendungen direkt. </p>
</div>
<div class="list">
<p class="date">26. August</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=813">Listen-DL definieren, um CSS-Listenelemente mit Bildern und Texten zu erstellen</a></h2>
<p class="meta">Von: <a href="http://www.downcodes.com/">www.downcodes.com</a> |. Herausgeber: <a href="#">downcodes.com </a> |. <a href="#">Keine Antwort?</a></p>
<p>Neuer Tab: Wenn Sie einen neuen Tab öffnen, sehen Sie intuitiv Ihre am häufigsten besuchten Websites, die am häufigsten verwendeten Suchmaschinen, kürzlich mit Lesezeichen versehene Seiten, kürzlich geschlossene Tabs usw. .
App-Verknüpfungen: Aktivieren Sie Web-Apps, ohne einen Browser zu öffnen. Anwendungsverknüpfungen laden Ihre häufig verwendeten Online-Anwendungen direkt. </p>
</div>
<div class="list">
<p class="date">22. August</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=792">Ein cooles CSS+JS-Menübeispiel, das ausgeblendet und ausgeblendet werden kann</a></h2>
<p class="meta">Von: <a href="http://www.downcodes.com/">www.downcodes.com</a> |. Herausgeber: <a href="#">downcodes.com </a> |. <a href="#">Keine Antwort?</a></p>
<p>Neuer Tab: Wenn Sie einen neuen Tab öffnen, sehen Sie intuitiv Ihre am häufigsten besuchten Websites, die am häufigsten verwendeten Suchmaschinen, kürzlich mit Lesezeichen versehene Seiten, kürzlich geschlossene Tabs usw. .
App-Verknüpfungen: Aktivieren Sie Web-Apps, ohne einen Browser zu öffnen. Anwendungsverknüpfungen laden Ihre häufig verwendeten Online-Anwendungen direkt. </p>
</div>
</div>

Beginnen Sie mit der oben genannten Grundlage mit der folgenden CSS-Codierung:
Gesamtaussage:

div css xhtml xml Beispielquellcode Beispiel-Quellcode [www.downcodes.com]
* { margin:0; padding:0; color:#666;
Körper{Hintergrund:#ebead1;}
a{ color:#514f42;text-decoration:none;}
a:hover{ color:#669900;}

Stellen Sie den Umbruchstil der gesamten Ebene auf eine Breite von 650 Pixel ein. Der obere und untere Rand beträgt 30 Pixel, und die Listen für die linke und rechte horizontale und mittlere Ausrichtung werden für jede Listenebene auf eine Breite von 650 Pixel eingestellt.

div css xhtml xml Beispielquellcode Beispiel-Quellcode [www.downcodes.com]
#wrap{ width:650px; margin:30px auto;overflow:hidden;}
.list{ width:650px; padding:0 0 20px 0; margin:0 0 20px 0;}

Stellen Sie die Zeit ein, um auf der linken Seite zu schweben, Breite 76px; Texttransformation: Großbuchstaben (Kleinbuchstaben in Großbuchstaben umgewandelt)

div css xhtml xml Beispielquellcode Beispiel-Quellcode [www.downcodes.com]
.list .date{ float:left;width:58px; margin:0 20px 0 0;background:#514F42;text-align: center;font-size :10px;Schriftstärke: fett; Farbe:#FFF;}
.list b{display:block; font-size:40px; color:#FFF;}

Legen Sie das Meta der Titelbeschreibungsebene fest; legen Sie den unteren Rand auf 25 Pixel fest, damit der Hauptinhalt ohne Umbruch linksbündig ausgerichtet werden kann.

div css xhtml xml Beispielquellcode Beispiel-Quellcode [www.downcodes.com]
.list .meta{margin:0 0 25px 0; color:#979680;}
.list h2 a{font-size: 1.8em }
.list p{ display:block; line-height:18px;}
Ähnliche Artikel