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:
Código fuente de ejemplo
[www.downcodes.com] <div id="envoltura">
<div clase="lista">
<div class="list_title"></div>
<ul class="list_pic"></ul>
<ul clase="lista_texto"></ul>
</div>
</div>
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:
Código fuente de ejemplo
[www.downcodes.com] título_lista
lista_pic
texto_lista
Comencemos a escribir código HTML en detalle:
Código fuente de ejemplo
[www.downcodes.com] <div id="envoltura">
<div clase="lista">
<div clase="lista_título">
<h3>Me encanta 52css</h3>
<span><a href="#">Más</a></span>
</div>
<ul clase="lista_pic">
<li><a href="/u/info_img/2009-06/11/5394_quote.gif" /></a><span><a href="http://www.downcodes.com/">códigos descendentes .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">Ejemplo de diseño 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/" >Descarga de plantilla</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">Tutorial de DivCSS</a></span></li>
</ul>
<div class="claro"></div>
<ul clase="lista_texto">
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=813">Lista de definiciones dl crea una lista CSS con Elemento imágenes y textos</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=720">Ejemplo de diseño de página web CSS: con el formato apropiado Las etiquetas crean tablas semánticas</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=669">Ejemplo de diseño DivCSS: una imagen muy práctica Lista CSS de texto mixto: rica en semántica</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=666">El ejemplo de diseño DivCSS utiliza dl dt dd para Haz una lista</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=636">Ejemplo de diseño DivCSS: tres filas y una columna superior e inferior Altura fija intermedia adaptable</a></li>
</ul>
<div class="claro"></div>
</div>
<div class="claro"></div>
</div>
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:
Código fuente de ejemplo
[www.downcodes.com] * { margen:0; relleno:0; tamaño de fuente:12px; color:#666;
a{ color:#666666; decoración de texto: ninguna;}
a:hover{ color:#2764b4; decoración de texto:subrayado;}
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)
Código fuente de ejemplo
[www.downcodes.com] #wrap{ ancho:450px; margen:30px automático; borde:1px sólido #e5f2f8;
.list{ ancho:448px; borde:1px sólido #a4a4a4;}
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;
Código fuente de ejemplo
[www.downcodes.com] .list_title{ ancho:426px; relleno:0 10px; borde:1px sólido #fff;alto:22px;}
.list_title h3{ float:izquierda; ancho:300px;}
.list_title span{ float:derecho; ancho:60px; texto-align:derecho;}
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;
Código fuente de ejemplo
[www.downcodes.com] .list_pic{ancho:433px; relleno:15px 0 0 15px;}
.list_pic li{ pantalla: en línea; flotador: izquierda; ancho: 94px; margen: 0 14px 0 0;
.list_pic li img{ ancho:90px; alto:70px;}
.list_pic li a img{ border:2px solid #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li span{ pantalla: bloque; ancho: 94 px; altura de línea: 22 px;
.list_pic li abarca un{ display:block;}
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;
Código fuente de ejemplo
[www.downcodes.com] .list_text{ancho:426px; margen:10px; relleno:10px 0 0; borde superior:1px punteado #2764b4;
.list_text li{ float:izquierda; ancho:100%; altura de línea:22px;}
.list_text li span{ float:derecha; text-align:derecha;}
Finalmente, borre el flotador: .clear{ clear:both;}
