Op@alo - Challenge 4 - PHP,MySQL ,Jquery, HTML , CSS ...

Ir em baixo

Op@alo - Challenge 4 - PHP,MySQL ,Jquery, HTML , CSS ...

Mensagem  Op@alo em Qua Out 12, 2011 8:59 pm

2-)Usando o framework que bem entender ( ou linguagem de programação WEB ), crie um layout em código ou gráfico com aplicação WEB da sua linguagem de programação. É obrigatório ter os seguintes itens:* Título da página* Nome da página* Link de Index ( ou home ) , Sobre o site , Contatos.
* Comentários em todas as páginas. Ou seja, Index (ou home ), sobre o site , contatos.

É importante dizer qual framework usou, e não esquecer de dispor para download o source bem como comentar os códigos.
Usei o Jquery sómente....
index.html
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--Chamando a biblioteca Jquery -->
<script type="text/javascript" src="jquery.js"></script>
<link href='estilo.css' rel="stylesheet" type="text/css" />
<title>Challenge 4</title>
<script type="text/javascript">
//Ultilizando o Jquery
  $(document).ready(function(){
     //esconde os conteudos
    $(".conteudo").hide();
   //quando clicar no link index... aparece a div do conteudo index.
   $("#in").click(function(){
   $("#index").slideToggle("slow");
   });
   //quando clicar no link contato...aparece a div da mesma forma do index
   $("#cont").click(function(){
   $("#contato").slideToggle("slow");
   });
   //... e assim tbm para o link 'sobre o site'
   $("#sobsite").click(function(){
   $("#sobre").slideToggle("slow");
   });
  });
   

</script>
</head>

<body>
<div id="menu1" align="center"><img src="chall4.png"/></div>
<div>
      
   <ul id="menu">
      <li id="in" class="aba"><a href="#aba1">Index</a></li>
      <li id="cont" class="aba"><a href="#aba2">Contato</a></li>
      <li id="sobsite" class="aba"><a href="#aba3">Sobre o site</a></li>
   </ul>
</div>


   <div id="index" class="conteudo">
      <p align="justify"><br/><br/><br/>Usando o framework que bem entender ( ou linguagem de programação WEB ), crie um layout em
      código ou gráfico com aplicação WEB da sua linguagem de programação. É obrigatório ter os seguintes itens:<br/>
* Título da página<br/>
* Nome da página<br/>
* Link de Index ( ou home ) , Sobre o site , Contatos.<br/>
* Comentários em todas as páginas. Ou seja, Index (ou home ), sobre o site , contatos.<br/>
                                                                                       
É importante dizer qual framework usou, e não esquecer de dispor para download o source bem como comentar os códigos.
      </p>
   </div>
   <div id="contato" class="conteudo">
      <table align="center">
         <tr>
            <th>Nome</th>          
            <th>Telefone</th>          
            <th>Email</th>          
         </tr>
         <tr>
            <td>Mario Idival</td>
            <td>84 - 99191316</td>
            <td>marioidival@gmail.com</td>
         </tr>
      </table>
   </div>
   <div id="sobre" class="conteudo"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <p>O Site foi desenvolvido em prol do <a href="http://pzim.forumeiros.com">Challenge 4</>, uma competição de programadores bem inteligente , voltada para leigos e experientes na area .</p>
   </div>


</body>
</html>
estilo.css
Código:
*{
   margin:0px;
   padding:0px; // usado para zerar a pagina
}

.aba { // classe aba
   float:left;
   text-align:center;
   width:33%;
      
}

a{
   text-decoration:none;
   color:black;
}
table, th, td { // tags table,th , td
 padding:10px;
 font-family:Lucida Console;
 }
 p{ // tag paragrafo
    font-family:Lucida Console;
   font-size:17px;
 }
avatar
Op@alo

Mensagens : 67
Data de inscrição : 02/07/2011
Idade : 26
Localização : Parnamirim-RN

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum