Tutorial de ejemplo de DivCSS: lista CSS de gráficos y texto mixtos con estructura superior e inferior

Hoy aprenderemos juntos cómo crear una "lista CSS con gráficos y texto mixtos" de uso frecuente. Primero, analice las características de esta lista, luego escriba código HTML y finalmente aplique estilos CSS para lograr el efecto final.

El efecto de este ejemplo:


Autor de este artículo: 52CSS.com Li Xiang Si desea reimprimir, cree un enlace a este sitio (http://www.52css.com/) y no podrá cambiar el contenido del artículo a voluntad. ¡Y conserve el texto de esta declaración de derechos de autor!
La parte superior es el nombre de la columna que me encanta 52css y más, y luego la parte inferior se divide en dos bloques, uno muestra imágenes en miniatura y el otro muestra enlaces de texto, los cuales se pueden lograr a través de ul+li. Con el análisis anterior, inicie la siguiente codificación HTML:


Coloque todos los elementos en la capa con id wrap y establezca el color del borde en #e5f2f8. Esto es para que parezca que tiene un efecto de sombra.
Luego cree una lista de capas dentro de ella y cree tres capas dentro de la lista, a saber:


Comencemos a escribir código HTML en detalle:


Haga flotar h3 hacia la izquierda en la capa list_title para crear el título, flote hacia la derecha para crear más conexiones y cree imágenes ul+li que se dejen flotando en la capa list_pic;
Cree ul+li en la capa list_text para crear una lista de noticias;
En la parte inferior, coloque una capa con clase clear para limpiar los flotadores.

Con la base anterior, comience la siguiente codificación CSS:
Declaración general:

Establezca el estilo de toda la capa, el ancho es 450 px, los márgenes superior e inferior son 30 px, los lados izquierdo y derecho están alineados horizontalmente y el borde está configurado en azul (aquí para aumentar el efecto de sombra)


Definición de estilo de la parte del título list_title:
Establezca el ancho en 426 px, el relleno superior e inferior en 0 y los márgenes izquierdo y derecho en 10 px.
El elemento h3 del nombre de la columna flota hacia la izquierda; el ancho es 300 px;
Configure el elemento span para que flote hacia la derecha con un ancho de 60 píxeles; alinee el texto a la derecha y configure el enlace;


Definición de estilo de la capa de imagen list_pic:
Primero, use la lista ul y establezca el ancho en 433px;
Lo que necesita atención es la configuración de padding: padding:15px 0 0 15px;
(La razón por la que el margen interior derecho se establece en 0 es por el problema de espaciado de li, que mejora el rendimiento de la página. También puede configurarlo en: padding: 15px 15px 0 15px; efecto de contraste)
li establece el tamaño del bloque de imagen en 94px y el margen de espaciado: 0 14px 0 0;
El color del borde de la imagen cambia de azul a gris cuando se mueve el mouse;

Establecer estilo de texto del enlace,
Convertir tramo en elemento de bloque. Los enlaces dentro del lapso también se convierten en elementos de bloque, y el ancho y el alto se establecen en 94 px y 20 px respectivamente; el interlineado se establece en 20 px y el texto se alinea horizontal y centralmente;


Definición de estilo de la capa de texto list_text:
Defina la lista de noticias a través de ul + li. Cabe señalar que el intervalo de tiempo flota hacia la derecha, el texto está escrito en el borde superior con una línea de puntos azul a la derecha y el margen superior está establecido en 10 px;


Finalmente, borre el flotador: .clear{ clear:both;}