Segue o quarto exemplo com DIV e CSS Externo:
OBS: "A pasta de imagem não esta aqui mas poderá colocar outras imagens".
style_cinza.css
style_cinza.css
-------------------------------------------------------------------------------
body{
background: url("img/fundo_cinza_claro.jpg") repeat-x;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#estrutura{
width:789px;
margin:0 auto;
text-align:left;
}
#esquerda{
width:200px;
height:505px;
background: url("img/fundo_cinza.jpg") repeat-x;
float:left;
}
#direita{
width:550px;
height:500px;
padding-left:10px;
padding-top:5px;
background-color:blue;
float:left;
font-size:12px;
}
.barra{
width:194px;
height:28px;
background: url("img/fundo_cinza_small.jpg") repeat-x;
padding:9px 3px 3px 3px;
}
.barra h1{
color:white;
font-weight:bold;
font-size:18px;
margin:0 0 0 0;
}
#esquerda ul
{
list-style-type: none;
padding: 0.5em 0.5em 0.5em 0.5em;
background-color: blue;
}
#esquerda ul li a
{
font-size:14px;
text-decoration: none;
color:#000000;
display: block;
}
#esquerda ul li a:hover
{
color: red;
}
principal.html
-------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ANSI" />
<link rel="stylesheet" type="text/css" href="style_cinza.css"/>
<title>::RODRIGOWEB e-Learning :: Mural de Recados</title>
</head>
<body>
<div id="estrutura">
<div id="esquerda">
<div class="barra">
<h1>CURSOS WEB</h1>
</div>
<ul>
<li><a href="http://www.w3schools.com/php/default.asp"
target="iframe_a">PHP</a></li>
<li><a href="http://www.w3schools.com/js/default.asp"
target="iframe_a">JAVASCRIPT</a></li>
<li><a href="http://www.w3schools.com/css/default.asp"
target="iframe_a">CSS</a></li>
<li><a href="http://www.w3schools.com/html/default.asp"
target="iframe_a">HTML5</a></li>
</ul>
</div>
<div id="direita">
<iframe src="img/web4.jpg" width="540" height="500"
name="iframe_a"></iframe>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
Nenhum comentário:
Postar um comentário