Formação web aula 07

1,120 views

Published on

Exercício de XHTML e CSS...

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,120
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formação web aula 07

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

×