A criação de listas ou elementos de página semelhantes a listas com CSS sempre foi um tópico de discussão. Hoje aprenderemos uma lista de blogs comumente usada. Aprendemos muitas maneiras de fazer listas.
Renderização deste exemplo:
Primeiro, dê uma olhada em sua estrutura. Defina a data da camada de tempo à esquerda, o título do artigo h2, a meta da camada de descrição do artigo e o conteúdo do assunto do artigo p.
Exemplo de código-fonte
[www.downcodes.com] Coloque todos os elementos na camada com id wrap,
Vamos começar a escrever o código HTML em detalhes:
Exemplo de código-fonte
[www.downcodes.com] 03 de setembro
De: www.downcodes.com Editor: downcodes.com | Não há resposta?
Nova aba: Sempre que você abrir uma nova aba, você verá intuitivamente seus sites mais visitados, mecanismos de busca mais usados, páginas marcadas recentemente, abas fechadas recentemente, etc.
Atalhos de aplicativos: habilite aplicativos da web sem abrir um navegador. Os atalhos de aplicativos carregam diretamente seus aplicativos on-line usados com frequência.
26 de agosto
De: www.downcodes.com Editor: downcodes.com | Não há resposta?
Nova aba: Sempre que você abrir uma nova aba, você verá intuitivamente seus sites mais visitados, mecanismos de busca mais usados, páginas marcadas recentemente, abas fechadas recentemente, etc.
Atalhos de aplicativos: habilite aplicativos da web sem abrir um navegador. Os atalhos de aplicativos carregam diretamente seus aplicativos on-line usados com frequência.
22 de agosto
De: www.downcodes.com Editor: downcodes.com | Não há resposta?
Nova aba: Sempre que você abrir uma nova aba, você verá intuitivamente seus sites mais visitados, mecanismos de busca mais usados, páginas marcadas recentemente, abas fechadas recentemente, etc.
Atalhos de aplicativos: habilite aplicativos da web sem abrir um navegador. Os atalhos de aplicativos carregam diretamente seus aplicativos on-line usados com frequência.
Com a base acima, inicie a seguinte codificação CSS:
Declaração geral:
Exemplo de código-fonte
[www.downcodes.com] * {margem:0; preenchimento:0; tamanho da fonte:12px;cor da lista:none;
corpo{ background:#ebead1;}
a{ cor:#514f42;decoração de texto:nenhum;}
a:hover{ cor:#669900;}
Defina o estilo de quebra de toda a camada para uma largura de 650px; as margens superior e inferior são de 30px, e as listas de alinhamento horizontal e central esquerda e direita são definidas para uma largura de 650px para cada camada da lista;
Exemplo de código-fonte
[www.downcodes.com] #wrap{largura:650px;margem:30px auto;
.list{ largura:650px; preenchimento:0 0 20px 0; margem:0 0 20px 0; border-bottom:1px tracejado #666633;}
Defina o tempo para flutuar à esquerda, largura 76px; text-transform: lowercase;
Exemplo de código-fonte
[www.downcodes.com] .list .date{ float:left;largura:76px; altura:58px;margem:0 20px 0 0; preenchimento:2px 0 0; :10px;peso da fonte: cor em negrito:#FFF;}
.list b{display:bloco;tamanho da fonte:40px cor:#FFF;altura da linha:40px;}
Defina a meta da camada de descrição do título; defina sua margem inferior para 25px para que o conteúdo principal possa ser alinhado à esquerda sem quebra.
Exemplo de código-fonte
[www.downcodes.com] .list .meta{margem:0 0 25px cor:#979680;}
.list h2 a{tamanho da fonte: 1,8em };
.list p{display:bloco;altura da linha:18px;}
