Mudar o layout com CSS

Segue abaixo o esquema pra mudar o layout de sua página através do uso de CSS.

Código html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”><head><title>Mudar Layout</title>

<link href=”CambiarEstilo_arquivos/css1.css” rel=”stylesheet” type=”text/css” title=”css1“>
<link href=”CambiarEstilo_arquivos/css2.css” rel=”alternate stylesheet” type=”text/css” title=”css2“>
<script language=”javascript”>
function EstablecerCSS(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 &&
a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title)
a.disabled = false;
}
}
}
</script>
</head><body>
<div id=”contenedor”>
<div id=”cabecera”>
<span class=”WebTitulo”>Título da Página </span>
</div>

<div id=”contenido”>
<div id=”enlaces”>
<a href=”javascript:EstablecerCSS(‘css1‘);”>Estilo 1</a>
<a href=”javascript:EstablecerCSS(‘css2‘);”>Estilo 2</a>
</div>
<h1>Título do artigo</h1>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit
amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer
adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem
ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit
amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer
adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>

<div id=”navegacion”>
<h2>Categorias</h2>
<ul>
<li><a href=”#”>Recursos</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>PHP</a></li>
<li><a href=”#”>ASP</a></li>
<li><a href=”#”>AJAX</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>Ilustrações</a></li>
<li><a href=”#”>Fotografia</a></li>
</ul>
<h2>Arquivo</h2>
<ul>
<li><a href=”#”>Maio de 2007</a></li>
<li><a href=”#”>Abril de 2007</a></li>
<li><a href=”#”>Março de 2007</a></li>
<li><a href=”#”>Fevereiro de 2007</a></li>
</ul>
</div>
</div>
</body></html>

Código CSS1:

/* ————————–
GENERAL
—————————-*/
body,html {
min-height:100%;
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#enlaces { margin-top:20px}
#enlaces a{
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #993399;
background-color:#FAE1FB;
padding:5px;
margin:5px;
}
#contenedor {
position: relative;
width: 760px;
border-right: 1px solid #E4E4E4;
height:100%;
}
/* ————————–
CABECERA
—————————-*/
#cabecera {
border-top: 6px solid #2A4F6F;
border-bottom: 1px dotted #B2BCC6;
height: 4em;
}
#cabecera .WebTitulo {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #666;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#cabecera .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
/* ————————–
NAVEGACION
—————————-*/
#navegacion {
position: absolute;
top: 6em;
left: 1em;
width: 14em;
}
#navegacion ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#navegacion li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#navegacion a {
text-decoration: none;
color: #2A4F6F;
}
#navegacion h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
border-bottom: 1px dotted #cccccc;
}
/* ————————–
CONTENIDO
—————————-*/
#contenido {
margin-left: 17em;
margin-right: 2em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#contenido p {
font-size: 80%;
line-height: 1.6em;
}

Código CSS2:

/* ————————–
GENERAL
—————————-*/
body,html {
min-height:100%;
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#enlaces { margin-top:20px}
#enlaces a{
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #993399;
background-color:#FAE1FB;
padding:5px;
margin:5px;
}
#contenedor {
position: relative;
width: 760px;
border-right: 1px solid #E4E4E4;
border-left: 1px solid #E4E4E4;
height:100%;
margin-right: auto;
margin-left: auto;
background-color:#E2E2E2;
}
/* ————————–
CABECERA
—————————-*/
#cabecera {
border-top: 6px solid #2A4F6F;
border-bottom: 1px dotted #B2BCC6;
height: 4em;
}
#cabecera .WebTitulo {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #666;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#cabecera .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
/* ————————–
NAVEGACION
—————————-*/
#navegacion {
position: absolute;
top: 5em;
right: 1em;
width: 12em;
background-color:#FF3300;
}
#navegacion ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#navegacion li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#navegacion a {
text-decoration: none;
color: #FFF;
font-weight:bold;
}
#navegacion h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #B7C6F1;
border-bottom: 1px dotted #cccccc;
}
/* ————————–
CONTENIDO
—————————-*/
#contenido {
margin-left: 2em;
margin-right: 14em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#contenido p {
font-size: 80%;
line-height: 1.6em;
}

Resultado:
mudanca.png

Notícia completa
Fonte: www.webintenta.com

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s