Página Inicial>Tutorial de web design>Normalização WEB

Exemplo DIVCSS: Crie uma lista de blogs comum

Autor：Eve Cole Data da Última Atualização：2009-06-11 17:37:36
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.

div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.downcodes.com]
<div id="wrap">
<div class="lista">
<p class="data"></p>
<h2></h2>
<p class="meta"></p>
<p></p>
</div>
</div>

Coloque todos os elementos na camada com id wrap,
Vamos começar a escrever o código HTML em detalhes:

div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.downcodes.com]
<div id="wrap">
<div class="lista">
<p class="date">03 de <b>setembro</b></p>
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">Exemplo de layout DIV CSS: dez etapas para usar o layout css de um site! </a></h2>
<p class="meta">De: <a href="http://www.downcodes.com/">www.downcodes.com</a> Editor: <a href="#">downcodes.com </a> | <a href="#">Não há resposta?</a></p>
<p>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. </p>
</div>
<div class="lista">
<p class="date">26 de <b>agosto</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=813">Definir lista dl para criar elementos de lista CSS com imagens e textos</a></h2>
<p class="meta">De: <a href="http://www.downcodes.com/">www.downcodes.com</a> Editor: <a href="#">downcodes.com </a> | <a href="#">Não há resposta?</a></p>
<p>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. </p>
</div>
<div class="lista">
<p class="date">22 de <b>agosto</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=792">Um exemplo legal de menu CSS+JS que pode ocultar e deslizar</a></h2>
<p class="meta">De: <a href="http://www.downcodes.com/">www.downcodes.com</a> Editor: <a href="#">downcodes.com </a> | <a href="#">Não há resposta?</a></p>
<p>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. </p>
</div>
</div>

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

div css xhtml xml Exemplo de código-fonte 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;

div css xhtml xml Exemplo de código-fonte 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;

div css xhtml xml Exemplo de código-fonte 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.

div css xhtml xml Exemplo de código-fonte 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;}
Artigos Relacionados