Segue o segundo exemplo com DIV e CSS Externo:
OBS: "As imagens não estão aqui mas vc. poderá colocar outras imagens de universidades".
index.css
--------------------------------------------------------------------------------------
body{
background-color:#CCCC99;
}
div.topico{
width: 24%;
height:300px;
float:left;
background-color: white;
margin:4px;
}
div.geral{
width:100%;
height:308px;
background-color:bisque;
}
h3{
font-family: Arial;
text-align: center;
}
h6{
font-family: Arial;
text-align: center;
}
a{
text-decoration: none;
}
body{
color:red;
}
index.html
-----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Universidades</title>
<meta charset="ISO-8859-15">
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<center><h2>Universidades</h2></center>
<div class="geral">
<div class="topico" >
<a href="http://www.ufrj.br/"><img src="logo_ufrj.jpg" width="100%" height="180px">
<h3>UFRJ</h3>
<h6>Universidade Federal do Rio de Janeiro</h6></a>
</div>
<div class="topico" >
<a href="http://www.ufes.br/"><img src="logo_ufes.jpeg" width="100%" height="180px">
<h3>UFES</h3>
<h6>Universidade Federal de Espiríto Santo</h6></a>
</div>
<div class="topico" >
<a href="http://www.ufmg.br/"><img src="logo_ufmg.jpg" width="100%" height="180px">
<h3>UFMG</h3>
<h6>Universidade Federal de Minas Gerais</h6></a>
</div>
<div class="topico" >
<a href="http://www.unifesp.br/"><img src="logo_unifesp.jpg" width="100%" height="180px">
<h3>UNIFESP</h3>
<h6>Universidade Federal de São Paulo</h6></a>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
Nenhum comentário:
Postar um comentário