La creación de listas o elementos de página similares a listas con CSS siempre ha sido un tema de discusión. Hoy aprenderemos una lista de blogs de uso común. Hemos aprendido muchas formas de hacer listas. Aquí hay ejemplos a los que puede consultar:
Representación de este ejemplo:
Primero, observe su estructura. Configure la fecha de la capa de tiempo a la izquierda, el título del artículo h2, la meta de la capa de descripción del artículo y el contenido del tema del artículo p.
Código fuente de ejemplo
[www.downcodes.com] Coloque todos los elementos en la capa con id wrap,
Comencemos a escribir código HTML en detalle:
Código fuente de ejemplo
[www.downcodes.com] septiembre 03
De: www.downcodes.com Editor: downcodes.com | ¿No hay respuesta?
Nueva pestaña: cada vez que abra una nueva pestaña, verá intuitivamente los sitios web más visitados, los motores de búsqueda más utilizados, las páginas marcadas recientemente, las pestañas cerradas recientemente, etc.
Accesos directos a aplicaciones: habilite aplicaciones web sin abrir un navegador. Los accesos directos a aplicaciones cargan directamente las aplicaciones en línea que utiliza con frecuencia.
26 de agosto
De: www.downcodes.com Editor: downcodes.com | ¿No hay respuesta?
Nueva pestaña: cada vez que abra una nueva pestaña, verá intuitivamente los sitios web más visitados, los motores de búsqueda más utilizados, las páginas marcadas recientemente, las pestañas cerradas recientemente, etc.
Accesos directos a aplicaciones: habilite aplicaciones web sin abrir un navegador. Los accesos directos a aplicaciones cargan directamente las aplicaciones en línea que utiliza con frecuencia.
22 de agosto
De: www.downcodes.com Editor: downcodes.com | ¿No hay respuesta?
Nueva pestaña: cada vez que abra una nueva pestaña, verá intuitivamente los sitios web más visitados, los motores de búsqueda más utilizados, las páginas marcadas recientemente, las pestañas cerradas recientemente, etc.
Accesos directos a aplicaciones: habilite aplicaciones web sin abrir un navegador. Los accesos directos a aplicaciones cargan directamente las aplicaciones en línea que utiliza con frecuencia.
Con la base anterior, comience la siguiente codificación CSS:
Declaración general:
Código fuente de ejemplo
[www.downcodes.com] * { margen:0; relleno:0; tamaño de fuente:12px; color:#666; estilo de lista:ninguno; familia de fuentes:Arial, Helvetica, sans-serif;}
cuerpo{ fondo:#ebead1;}
a{ color:#514f42;text-decoration:none;}
a: flotar{ color:#669900;}
Establezca el estilo de ajuste de toda la capa en un ancho de 650 px; los márgenes superior e inferior son de 30 px, y las listas de alineación horizontal y central izquierda y derecha se establecen en un ancho de 650 px para cada capa de lista;
Código fuente de ejemplo
[www.downcodes.com] #wrap{ ancho:650px; margen:30px auto; desbordamiento:oculto;}
.list{ ancho:650px; relleno:0 0 20px 0; margen:0 0 20px 0; borde inferior:1px discontinuo #666633;}
Establezca el tiempo para flotar a la izquierda, ancho 76px transformación de texto: mayúsculas (minúsculas convertidas a mayúsculas)
Código fuente de ejemplo
[www.downcodes.com] .list .date{ float:left;width:76px; height:58px; margin:0 20px 0 0; padding:2px 0 0;text-transform: mayúsculas;text-align: center;font-size :10px;peso de fuente: negrita; color:#FFF;}
.list b{display:bloque; tamaño de fuente:40px; color:#FFF;altura de línea:40px;}
Establezca la meta de la capa de descripción del título; establezca su margen inferior en 25 píxeles para que el contenido principal pueda dejarse alineado sin ajustarse.
Código fuente de ejemplo
[www.downcodes.com] .list .meta{margen:0 0 25px 0;#979680;}
.list h2 a {tamaño de fuente: 1,8 em};
.list p{ pantalla:bloque; altura de línea:18px;}
