Embed Size (px)
DESCRIPTION
Exercício de XHTML e CSS...
Citation preview
Formação Web
Aula 7 – Professor Douglas
CSS
DIV - Layout
Exercício layout
Criar os ArquivosCrie um arquivo Index HTML;Crie um arquivo estilo.css;
Declaração HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="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>
Declaração HTML<body><div id="site"> <!--Inicia conteúdo Site--><div id="ajuda"><!--Div de Apoio -->
</div> <!--Finaliza a div site --></body></html>
Declaração CSSbody {
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: #fff url(fundo.gif) repeat-y;border: 15px solid #fff;margin: 0 auto;padding: 0;text-align: left; /* For IE, see above */}
Declaração HTML<div id="ajuda"><!--Div de Apoio -->
<div id="cabecalho"><!--Inicia cabeçalho --><img src="bannertitulo.jpg" alt=""
width="720" height="220"/></div><!--finaliza cabeçalho -->
<div id="barra"><!--inicia barra --><p></p>
</div><!--finaliza barra -->
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;}
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 -->
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 -->
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-->
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;}
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;}
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 left bottom;}
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 */
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 */
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 */
Declaração HTML<div id="conteudo"> <!--Inicio-->
<div id="texto"> <!--Inicio--><h3>Grupo de Texto 1</h3><p id="p1">Lorem ipsum dolor sit amet,</p></div> <!—Fim G1-->
<div id="texto"> <!--Inicio--><h3>Grupo de Texto 2</h3><p id="p1">Lorem ipsum dolor sit amet</p></div> <!—Fim G2-->
</div> <!—Fim Conteudo --><div id="rodape"><p>Rodapé do Site</p></div>
Declaração CSS#conteudo{
width: 445px;float:left;}
#texto { border:10px;
margin: 10px 10px 10px 10px;}
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;}
Declaração CSS/* Declaração geral Textop {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;}
