Atividade prática 3
Algumas dicas para o desenvolvimento do mesma:
Estrutura HTML:
<html>
<head>
<title>Atividade prática 3 - JQUERY </title>
<link href="css/estilo.css" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/myjquery.js" type="text/JavaScript"></script>
</head>
<body>
<div id="pcores">
<div class="tam" id="cor1"> </div>
<div class="tam" id="cor2"> </div>
<div class="tam" id="cor3"> </div>
<div class="tam" id="cor4"> </div>
</div>
</body>
</html>
body {
background-color: #008B8B;
}
#pcores {
background-color: #FFF;
width: 250px;
height: 70px;
float: right;
}
.tam {
width: 40px;
height: 40px;
background-color: red;
display: inline;
float: left;
margin: 11 11 11 11;
}
#cor1 {
background-color: #008B8B;
}
#cor2 {
background-color: #F0E68C;
}
#cor3 {
background-color: #4682B4;
}
#cor4 {
background-color: #8B008B;
}
Estrutura jQuery (ideia inicial, desenvolva o restante):$(document).ready (
function() {
$("#cor1").click(
function() {
$("body").css("backgroundColor","#008B8B");
});
});
Observações:
- Crie a estrutura de pastas que vocês já conhecem;
- Não esqueçam de incluir dentro da pasta js o aquivo (código fonte) do jQuery.
- Lembre-se de que para cada uma das estruturas acima é criado um arquivo;
Nenhum comentário:
Postar um comentário