Aujourd'hui, nous allons apprendre ensemble comment créer une "liste CSS avec des graphiques et du texte mélangés" fréquemment utilisée. Commencez par analyser les caractéristiques de cette liste, puis écrivez du code HTML et enfin appliquez des styles CSS pour obtenir l'effet final.
L'effet de cet exemple :
Auteur de cet article : 52CSS.com Li Xiang Si vous souhaitez réimprimer, veuillez créer un lien vers ce site (http://www.52css.com/), et vous n'êtes pas autorisé à modifier le contenu de l'article à volonté , et conservez le texte de cette déclaration de droit d'auteur !
Le haut est le nom de la colonne que j'aime 52css et plus, puis le bas est divisé en deux blocs, l'un affiche des images miniatures et l'autre affiche des liens texte, les deux pouvant être obtenus via ul+li. Avec l'analyse ci-dessus, démarrez l'encodage HTML suivant :
Exemple de code source
[www.downcodes.com] <div id="wrap">
<div class="liste">
<div class="list_title"></div>
<ul class="list_pic"></ul>
<ul class="list_text"></ul>
</div>
</div>
Placez tous les éléments dans le calque avec id wrap et définissez sa couleur de bordure sur #e5f2f8 afin de donner l'impression qu'il a un effet d'ombre.
Créez ensuite une liste de calques à l'intérieur et créez trois calques à l'intérieur de la liste, à savoir :
Exemple de code source
[www.downcodes.com] liste_titre
liste_pic
liste_texte
Commençons par écrire du code HTML en détail :
Exemple de code source
[www.downcodes.com] <div id="wrap">
<div class="liste">
<div class="list_title">
<h3>J'adore le 52css</h3>
<span><a href="#">Plus</a></span>
</div>
<ul class="list_pic">
<li><a href="/u/info_img/2009-06/11/5394_quote.gif" /></a><span><a href="http://www.downcodes.com/">codes de téléchargement .com</a></span></li>
<li><a href="/u/info_img/2009-06/11/7852_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=9">Exemple de mise en page DivCSS</a></span></li>
<li><a href="/u/info_img/2009-06/11/8437_quote.gif" /></a><span><a href="http://www.downcodes.com/css_template/" >Téléchargement du modèle</a></span></li>
<li><a href="/u/info_img/2009-06/11/3408_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=3">Tutoriel DivCSS</a></span></li>
</ul>
<div class="clear"></div>
<ul class="list_text">
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=813">Liste de définition dl crée une liste CSS avec Élément images et textes</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=720">Exemple de mise en page de page Web CSS : avec les Les balises créent des tables sémantiques</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=669">Exemple de mise en page DivCSS : une image très pratique Liste CSS de textes mixtes - riche en sémantique</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=666">Un exemple de mise en page DivCSS utilise dl dt dd pour Faites une liste</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=636">Exemple de disposition DivCSS : trois lignes et une haut et bas de colonne hauteur fixe intermédiaire adaptatif</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
Faites flotter h3 à gauche dans la couche list_title pour créer le titre, flottez à droite pour créer plus de connexions et créez des images ul+li flottant à gauche dans la couche list_pic ;
Créez ul+li dans la couche list_text pour créer une liste d'actualités ;
Tout en bas, placez un calque avec la classe clear pour effacer les flotteurs.
Avec la base ci-dessus, démarrez le codage CSS suivant :
Déclaration globale :
Exemple de code source
[www.downcodes.com] * { marge : 0 ; remplissage : 0 ; taille de police : 12px ; couleur : #666 ; style de liste : aucun ;}
une{ couleur : #666666 ; texte-décoration : aucun ;}
a:hover{ couleur:#2764b4; text-decoration:underline;}
Définissez le style de l'ensemble du calque, la largeur est de 450 px, les marges supérieure et inférieure sont de 30 px, les côtés gauche et droit sont alignés horizontalement et la bordure est définie sur bleu (ici pour augmenter l'effet d'ombre).
Exemple de code source
[www.downcodes.com] #wrap{ width:450px; margin:30px auto; border:1px solid #e5f2f8;
.list{largeur :448px ; bordure :1px solide #a4a4a4;}
Définition du style de la partie titre list_title :
Définissez la largeur sur 426 px, le remplissage supérieur et inférieur sur 0 et les marges gauche et droite sur 10 px.
L'élément h3 du nom de colonne flotte vers la gauche ; la largeur est de 300 px ;
Définissez l'élément span pour qu'il flotte vers la droite avec une largeur de 60 px ; alignez le texte à droite et définissez le lien.
Exemple de code source
[www.downcodes.com] .list_title{ width:426px; padding:0 10px; border:1px solid #fff;#f2e9da;
.list_title h3{ float:gauche; largeur:300px;}
.list_title span{ float:right; largeur:60px; texte-align:right;}
Définition du style du calque d'image list_pic :
Tout d’abord, utilisez la liste ul et définissez la largeur sur 433 px ;
Ce qui nécessite une attention particulière, c'est le réglage du remplissage : padding:15px 0 0 15px;
(La raison pour laquelle la marge intérieure droite est définie sur 0 est due au problème d'espacement de li, ce qui améliore les performances de la page. Vous pouvez également la définir sur : padding : 15px 15px 0 15px ; effet de contraste)
li définit la taille du bloc d'image à 94px et la marge d'espacement : 0 14px 0 0 ;
La couleur de la bordure de l'image passe du bleu au gris lorsque la souris survole ;
Définir le style du texte du lien,
Convertir la travée en élément de bloc. Les liens à l'intérieur de l'étendue sont également convertis en éléments de bloc, et la largeur et la hauteur sont définies respectivement sur 94 px et 20 px ; l'espacement des lignes est défini sur 20 px et le texte est aligné horizontalement et centralement.
Exemple de code source
[www.downcodes.com] .list_pic{largeur:433px; remplissage:15px 0 0 15px;}
.list_pic li{ display:inline; float:left; width:94px; margin:0 14px 0 0;
.list_pic li img{ largeur:90px; hauteur:70px;}
.list_pic li a img{ border:2px solid #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li span{ display:block; largeur:94px; hauteur de ligne:22px;
.list_pic li s'étend sur un { display: block;}
Définition du style du calque de texte list_text :
Définissez la liste d'actualités via ul+li. Il convient de noter que la période de temps flotte vers la droite et que le texte est écrit sur la bordure supérieure avec une ligne pointillée bleue à droite et que la marge supérieure est définie sur 10 px ;
Exemple de code source
[www.downcodes.com] .list_text{width:426px; margin:10px; padding:10px 0 0; border-top:1px pointillé #2764b4 }
.list_text li{ float:left; largeur:100%; hauteur de ligne:22px;}
.list_text li span{ float:right; text-align:right;}
Enfin, effacez le flottant : .clear{ clear:both;}
