Formação web aula 07
•Transferir como PPTX, PDF•
0 gostou•583 visualizações
Exercício de XHTML e CSS...
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Formação web aula 07
- 1. Formação Web Aula 7 – Professor Douglas
- 2. CSS DIV - Layout
- 4. Criar os Arquivos Crie um arquivo Index HTML; Crie um arquivo estilo.css;
- 5. Declaração HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Exercícios CSS Design</title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
- 6. Declaração HTML <body> <div id="site"> <!--Inicia conteúdo Site--> <div id="ajuda"><!--Div de Apoio --> </div> <!--Finaliza a div site --> </body> </html>
- 7. Declaração CSS body { background: #ccc; font: normal 10px Verdana, Arial, sans-serif; color: #666; margin: 15px; text-align: center;} /* estilo do site */ #site { position: relative; width: 720px !important; background: #fffurl(fundo.gif) repeat-y; border: 15px solid #fff; margin: 0 auto; padding: 0; text-align: left; /* For IE, seeabove*/}
- 8. Declaração HTML <div id="ajuda"><!--Div de Apoio --> <div id="cabecalho"><!--Iniciacabeçalho --> <imgsrc="bannertitulo.jpg" alt="" width="720" height="220"/> </div><!--finalizacabeçalho --> <div id="barra"><!--iniciabarra --> <p></p> </div><!--finalizabarra -->
- 9. Declaração CSS /* Topo do site */ #cabecalho { width: 720px; height: 220px; position:relative; } #barra{ width: 720px; height: 39px; border-top: 1px solid #fff; background: #147; float:left; }
- 10. Declaração HTML <div id="linkList"> <!--Inicio --> <div id="grupo1"><!--Inicio 1--> <h3></h3><!--GolpeSecreto --> <!-- Lista de Liks Bloco 1 --> <ul> <li><a href="/">Link1</a></li> <li><a href="/">Link2</a></li> <li><a href="/">Link3</a></li> <li><a href="/">Link4</a></li> <li><a href="/">Link5</a></li> <li><a href="/">Link6</a></li> <li><a href="/">Link7</a></li> <li><a href="/">Link8</a></li> </ul> </div><!--Fim 1 -->
- 11. Declaração HTML <!-- Lista de Liks Bloco 2 --> <div id="grupo2"><!--Inicio 2--> <h3></h3><!--GolpeSecreto --> <ul> <li><a href="/">Link1</a></li> <li><a href="/">Link2</a></li> <li><a href="/">Link3</a></li> </ul> </div> <!--Fim 2 -->
- 12. Declaração HTML <!-- Lista de Liks Bloco 3 --> <div id="grupo3"><!--Inicio 3 --> <h3></h3><!--GolpeSecreto --> <ul> <li><a href="/">Link1</a></li> <li><a href="/">Link2</a></li> <li><a href="/">Link3</a></li> </ul> </div><!--Fim 3 --> </div> <!--Fim LinkList-->
- 13. Declaração CSS /* Declaração geral para links e listas*/ a:link, a:visited { color: #9c0; text-decoration: none;} a:hover, a:active { color: #fff; background: #9c0;} ul { margin: 0; padding: 0 23px 10px 27px; list-style: none; line-height: 1.2em;} li { padding-bottom: 7px;}
- 14. Declaração CSS /* Declaração geral para links e listas*/ #linkList { float:left; width: 275px; border-bottom: 1px solid #fff;} #linkList h3 { text-indent: -1100px; height: 45px; margin: 0;}
- 15. Declaração CSS #linkList a:link, #linkList a:visited { font-size: 11px; color: #fff;} #linkList a:hover, #linkList a:active { background: #fff; } #linkList li { background: url(linklinha.gif) repeat-x leftbottom; }
- 16. Declaração CSS /* INICIO Grupo 1 */ #grupo1 { border-top: 1px solid #fff; background: #18d; } #grupo1 h3 { background: url(grupo1.gif); } #grupo1 a:hover, #grupo1 a:active { color: #18d; } /* FIM Grupo 1 */
- 17. Declaração CSS /* INICIO Grupo 2 */ #grupo2 { border-top: 1px solid #fff; background: #9c0; } #grupo2 h3 { background: url(grupo2.gif); } #grupo2 a:hover, #grupo2 a:active { color: #9c0; } /* FIM Grupo 2 */
- 18. Declaração CSS /* INICIO Grupo 3 */ #grupo3 { border-top: 1px solid #fff; background: #d8c; } #grupo3 h3 { background: url(grupo3.gif); } #grupo3 a:hover, #grupo3 a:active { color: #d8c; } /* FIM Grupo 3 */
- 19. Declaração HTML <div id="conteudo"> <!--Inicio--> <div id="texto"> <!--Inicio--> <h3>Grupo de Texto 1</h3> <p id="p1">Lorem ipsum dolorsitamet,</p> </div><!—Fim G1--> <div id="texto"> <!--Inicio--> <h3>Grupo de Texto 2</h3> <p id="p1">Lorem ipsum dolorsitamet</p> </div><!—Fim G2--> </div> <!—Fim Conteudo --> <div id="rodape"><p>Rodapé do Site</p></div>
- 20. Declaração CSS #conteudo{ width: 445px; float:left;} #texto { border:10px; margin: 10px 10px 10px 10px;}
- 21. Declaração CSS #rodape { clear: both; width: 708px !important; height: 24px !important; background: #18d; margin-top: 15px; padding: 6px 12px 0 0; border-top: 1px solid #fff; text-align: right; }
- 22. Declaração CSS /* Declaração geral Texto p {margin: 0 0 5px 10px;} #p1 { font-size: 13px; line-height: 20px;} h3 { color: #18d; font-size: 10px; font-weight: normal; text-transform: uppercase; margin: 30px 0 2px 0;}