Formação web aula 07

Formação Web
Aula 7 – Professor Douglas

CSS
DIV - Layout

Exercício layout

Criar os Arquivos
Crie 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">
<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>

Declaração HTML
<body>
<div id="site"> 
<div id="ajuda">
</div> 
</body>
</html>

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*/}

Declaração HTML
<div id="ajuda">
<div id="cabecalho">
<imgsrc="bannertitulo.jpg" alt="" width="720" height="220"/>
</div>
<div id="barra">
<p></p>
</div>

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"> 
<div id="grupo1">
<h3></h3>

<ul>
<li><a href="/">Link1</a></li>
</ul>
</div>

Declaração HTML
<div id="grupo2">
<ul>
</ul>
</div>

Declaração HTML
<div id="grupo3">
<ul>
</ul>
</div>
</div>

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 leftbottom;
}

Declaração CSS
/* INICIO Grupo 1 */
#grupo1 {
background: #18d;
}
#grupo1 h3 {
background: url(grupo1.gif);
}
#grupo1 a:hover, #grupo1 a:active {
color: #18d;
}
/* FIM Grupo 1 */

Declaração CSS
#grupo2 {
background: #9c0;
}
#grupo2 h3 {
}
color: #9c0;
}
/* FIM Grupo 2 */

Declaração CSS
#grupo3 {
background: #d8c;
}
#grupo3 h3 {
}
color: #d8c;
}
/* FIM Grupo 3 */

Declaração HTML
<div id="conteudo"> 
<div id="texto"> 
<h3>Grupo de Texto 1</h3>
<p id="p1">Lorem ipsum dolorsitamet,</p>
</div><!—Fim G1-->
<div id="texto"> 
<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>

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;
text-align: right;
}

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;}

Formação web aula 07

by Professor Douglas

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Formação web aula 07 Presentation Transcript