More Related Content
Drop down horizontal menu Viewers also liked (9)
Presentacion efpa 2012 jose sande Tejido EconóMico Intensivo En Conocimiento Catálogo de servicios para la administración pública Redes sociales y admon sanitaria V Educación y Marketing QUINTA PARTE 5-5 Business plan el rincón mic site Exemplositecss
- 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link href="stilo.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="conteiner">
<div id="cabecalho">aqui o cabeçalho
<div class="links_cabecalho">
<ul><br />
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 1</a></li>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 2</a></li>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 3</a></li>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 4</a></li>
</ul>
</div>
</div>
<div id="barra_menu">
<div class="links_menu">
<ul>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 1</a></li>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 2</a></li>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 3</a></li>
<li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 4</a></li>
- 2. </ul>
</div>
</div>
<div id="barralateral_esq">barra lateral esquerda</div>
<div id="barralateral-dir">barra lateral direita</div>
<div id="corpo">copro<br/><div class="caixa">texto no interior da caixa<br/></div></div>
<div id="rodape">rodape</div>
</div>
</body>
</html>
#conteiner{
width:850px;
text-align:center;
}
#cabecalho{
width:850px;
height:150px;
position:relative;
background:url(imagens/img_cabecalho_ostudio.jpg);
border-bottom:2px solid #000;
}
#cabecalho a{
text-decoration:underline;
- 3. font-weight:bold;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background:#000;
}
#cabecalho a:visited{
color:#00F;
text-decoration:underline;
font-weight:bold;
}
#cabecalho a:hover{
color:#F00;
text-decoration:none;
font-weight:bold;
background:#333;
}
.links_cabecalho {
position:absolute; top: 2px; left:150px;
}
.links_cabecalho ul{
margin:0px;
}
.links_cabecalho li{
margin:0px 20px 0px 0px;
list-style:none;
- 4. display:inline;
}
.links_menu li a{
color:#FFF;
padding:5px 12px 7px;
text-decoration:none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}
.links_menu a:hover{
color:#FFF;
background:#060;
}
#barra_menu{
width:850px;
height:30px;
position:relative;
background:#0F0;
border-bottom:2px solid #000;
}
.links_menu{
position:absolute; top: 4px; left:200px;
}
.links_menu ul{
margin:auto;
- 5. }
.links_menu li{
margin: 0px 18px 0px 0px;
list-style-type:none;
display:inline;
}
#barralateral_esq{
float:left;
background-color:#0F0;
width:150px;
height:390px;
border:2px solid #000;
}
#barralateral-dir{
float:right;
background-color:#0F0;
width:150px;
height:390px;
border:2px solid #000;
}
#corpo{
width:auto;
}
#rodape{
clear:both;
background-color:#090;
}
- 6. .caixa{
margin-top:10px;
padding:5px 5px 5px 5px;
background:#CCC;
border:2px solid #06F;
width:500px;
color:#000;
}
