Your SlideShare is downloading. ×
0
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Formação web   aula 07
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Formação web aula 07

935

Published on

Exercício de XHTML e CSS...

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
935
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Formação Web<br />Aula 7 – Professor Douglas<br />
  • 2. CSS<br />DIV - Layout<br />
  • 3. Exercício layout<br />
  • 4. Criar os Arquivos<br />Crie um arquivo Index HTML;<br />Crie um arquivo estilo.css;<br />
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Declaração CSS<br />#conteudo{<br />width: 445px;<br />float:left;}<br />#texto {<br />border:10px;<br />margin: 10px 10px 10px 10px;}<br />
  • 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. 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 />

×