Page d'accueil>Tutoriel de conception de sites Web>Normalisation WEB

Exemple DIVCSS : créer une liste de blogs commune

Auteur：Eve Cole Date de mise à jour：2009-06-11 17:37:36
La création de listes ou d'éléments de page de type liste avec CSS a toujours été un sujet de discussion. Aujourd'hui, nous allons apprendre une liste de blogs couramment utilisée. Nous avons appris de nombreuses façons de créer des listes. Voici des exemples auxquels vous pouvez vous référer :

Rendu de cet exemple :


Tout d'abord, jetez un œil à sa structure. Définissez la date de la couche horaire à gauche, le titre de l'article h2, la méta de la couche de description de l'article et le contenu du sujet de l'article p.

div css xhtml xml Exemple de code source Exemple de code source [www.downcodes.com]
<div id="wrap">
<div class="liste">
<p class="date"></p>
<h2></h2>
<p class="meta"></p>
<p></p>
</div>
</div>

Mettez tous les éléments dans le calque avec id wrap,
Commençons par écrire du code HTML en détail :

div css xhtml xml Exemple de code source Exemple de code source [www.downcodes.com]
<div id="wrap">
<div class="liste">
<p class="date"><b>03</b></p> septembre
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">Exemple de mise en page CSS DIV : dix étapes d'utilisation de la mise en page de site Web CSS ! </a></h2>
<p class="meta">De : <a href="http://www.downcodes.com/">www.downcodes.com</a> | Éditeur : <a href="#">downcodes.com </a> | <a href="#">Pas de réponse ?</a></p>
<p>Nouvel onglet : chaque fois que vous ouvrez un nouvel onglet, vous verrez intuitivement vos sites Web les plus visités, les moteurs de recherche les plus couramment utilisés, les pages récemment ajoutées à vos favoris, les onglets récemment fermés, etc.
Raccourcis d'application : activez les applications Web sans ouvrir de navigateur. Les raccourcis d'application chargent directement vos applications en ligne fréquemment utilisées. </p>
</div>
<div class="liste">
<p class="date"><b>26</b></p> août
<h2><a href="http://www.downcodes.com/article.asp?id=813">Définir list dl pour créer des éléments de liste CSS avec des images et des textes</a></h2>
<p class="meta">De : <a href="http://www.downcodes.com/">www.downcodes.com</a> | Éditeur : <a href="#">downcodes.com </a> | <a href="#">Pas de réponse ?</a></p>
<p>Nouvel onglet : chaque fois que vous ouvrez un nouvel onglet, vous verrez intuitivement vos sites Web les plus visités, les moteurs de recherche les plus couramment utilisés, les pages récemment ajoutées à vos favoris, les onglets récemment fermés, etc.
Raccourcis d'application : activez les applications Web sans ouvrir de navigateur. Les raccourcis d'application chargent directement vos applications en ligne fréquemment utilisées. </p>
</div>
<div class="liste">
<p class="date"><b>22</b></p> août
<h2><a href="http://www.downcodes.com/article.asp?id=792">Un exemple de menu CSS+JS sympa qui peut se cacher et glisser</a></h2>
<p class="meta">De : <a href="http://www.downcodes.com/">www.downcodes.com</a> | Éditeur : <a href="#">downcodes.com </a> | <a href="#">Pas de réponse ?</a></p>
<p>Nouvel onglet : chaque fois que vous ouvrez un nouvel onglet, vous verrez intuitivement vos sites Web les plus visités, les moteurs de recherche les plus couramment utilisés, les pages récemment ajoutées à vos favoris, les onglets récemment fermés, etc.
Raccourcis d'application : activez les applications Web sans ouvrir de navigateur. Les raccourcis d'application chargent directement vos applications en ligne fréquemment utilisées. </p>
</div>
</div>

Avec la base ci-dessus, démarrez le codage CSS suivant :
Déclaration globale :

div css xhtml xml Exemple de code source Exemple de code source [www.downcodes.com]
* { margin:0; padding:0; font-size:12px; color:#666; font-family:Arial, Helvetica, sans-serif;}
corps{ arrière-plan :#ebead1;}
une{ couleur :#514f42;text-decoration:none;}
a:survol{ couleur:#669900;}

Définissez le style d'habillage de l'ensemble du calque sur une largeur de 650 px ; les marges supérieure et inférieure sont de 30 px, et les listes d'alignement horizontal et central gauche et droit sont définies sur une largeur de 650 px pour chaque calque de liste ;

div css xhtml xml Exemple de code source Exemple de code source [www.downcodes.com]
#wrap{largeur:650px; marge:30px auto;débordement:caché;}
.list{ width:650px; padding:0 0 20px 0; margin:0 0 20px 0;

Définissez le temps de flottement à gauche, largeur 76px ; text-transform : majuscule (minuscules converties en majuscules)

div css xhtml xml Exemple de code source Exemple de code source [www.downcodes.com]
.list .date{ float:left;width:76px; height:58px; margin:0 20px 0 0; padding:2px 0 0;text-transform: majuscule;text-align: center;font-size :10px;police-poids: gras; couleur:#FFF;}
.list b{affichage:bloc; taille de police:40px; couleur:#FFF;hauteur de ligne:40px;}

Définissez la méta du calque de description du titre ; définissez sa marge inférieure sur 25 px afin que le contenu principal puisse être aligné à gauche sans retour à la ligne.

div css xhtml xml Exemple de code source Exemple de code source [www.downcodes.com]
.list .meta{marge :0 0 25px 0 ; couleur :#979680;}
.list h2 a{taille de police : 1,8em ;
.list p{ display:block; hauteur de ligne:18px;}
Articles connexes