Exemple de didacticiel DivCSS : liste CSS de graphiques et de textes mixtes avec structure supérieure et inférieure

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 :


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 :


Commençons par écrire du code HTML en détail :


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 :

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).


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.


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.


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 ;


Enfin, effacez le flottant : .clear{ clear:both;}