Tutorial de exemplo DivCSS: lista CSS de gráficos e texto mistos com estrutura superior e inferior

Hoje aprenderemos juntos como fazer uma "lista CSS com gráficos e texto mistos" frequentemente usada. Primeiro, analise as características desta lista, depois escreva o código HTML e, por fim, aplique estilos CSS para obter o efeito final.

O efeito deste exemplo:


Autor deste artigo: 52CSS.com Li Xiang Se desejar reimprimir, crie um link para este site (http://www.52css.com/), e você não tem permissão para alterar o conteúdo do artigo à vontade e guarde o texto desta declaração de direitos autorais!
A parte superior é o nome da coluna que adoro 52css e mais, e a parte inferior é dividida em dois blocos, um exibe imagens em miniatura e o outro exibe links de texto, ambos podem ser obtidos por meio de ul+li. Com a análise acima, inicie a seguinte codificação HTML:


Coloque todos os elementos na camada com id wrap e defina a cor da borda para #e5f2f8. Isso fará com que pareça que há um efeito de sombra.
Em seguida, crie uma lista de camadas dentro dela e crie três camadas dentro da lista, a saber:


Vamos começar a escrever o código HTML em detalhes:


Flutue h3 para a esquerda na camada list_title para criar o título, flutue para a direita para criar mais conexões e crie imagens ul+li flutuando à esquerda na camada list_pic;
Crie ul+li na camada list_text para criar uma lista de notícias;
Bem no fundo, coloque uma camada com classe clear para limpar os carros alegóricos.

Com a base acima, inicie a seguinte codificação CSS:
Declaração geral:

Defina o estilo de todo o contorno da camada, a largura é 450px, as margens superior e inferior são 30px, os lados esquerdo e direito são alinhados horizontalmente e a borda é definida como azul (aqui para aumentar o efeito de sombra)


Definição de estilo da parte do título list_title:
Defina a largura como 426px, o preenchimento superior e inferior como 0 e as margens esquerda e direita como 10px
O elemento h3 do nome da coluna flutua para a esquerda;
Defina o elemento span para flutuar à direita com uma largura de 60px; alinhe o texto à direita e defina o link;


Definição de estilo da camada de imagem list_pic:
Primeiro, use a lista ul e defina a largura para 433px;
O que precisa de atenção é a configuração do preenchimento: padding:15px 0 0 15px;
(A razão pela qual a margem interna direita está definida como 0 é devido ao problema de espaçamento de li, que melhora o desempenho da página. Você também pode configurá-la para: preenchimento: 15px 15px 0 15px; efeito de contraste)
li define o tamanho do bloco de imagem para 94px e a margem de espaçamento: 0 14px 0 0;
A cor da borda da imagem muda de azul para cinza quando o mouse passa;

Definir estilo de texto do link,
Converta span em elemento de bloco. Os links dentro do intervalo também são convertidos em elementos de bloco, e a largura e a altura são definidas como 94px e 20px, respectivamente; o espaçamento entre linhas é definido como 20px e o texto é alinhado horizontalmente e centralmente;


Definição de estilo da camada de texto list_text:
Defina a lista de notícias através de ul+li. Deve-se observar que o intervalo de tempo flutua para a direita, e o texto é escrito na borda superior com uma linha pontilhada azul à direita, e a margem superior é definida como 10px;


Finalmente, limpe o float: .clear{ clear:both;}