Sari la conținut
  • Bun venit pe Resursele.ro!

    Bun venit pe Resursele.ro! Pentru a avea un acces total la forum și pentru a beneficia de:

    • Navigarea pe un forum bine pus la punct și fără nici un fel de întrerupere
    • Privilegiul de a-ți face noi prieteni si de a învăța lucruri noi
    • Șanșa de a face parte din staff și dintr-o comunitate sigură
    • Posibilitatea de a învăța tot ceea ce nu cunoști
    • Șanșa și sprijinul de a-ți dezvolta planurile în lumea internetului și mai mult.

    Te invităm să te Înregistrezi acum pe forumul nostru, să ne cunoaștem și să ne începem împreună aventura și colaborarea pe internet!

Bobillho

O simplă pagină in două părti pentru incepători [HTML]

Postări Recomandate

Imagini: 

Spoiler

iEwgpzG.png

 

g2rS7tu.png

 

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
    height: 100%;
    margin: 0;
    font-family: Evogria;
}

/* Style tab links */
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 20px 24px;
    font-size: 20px;
    width: 50%;
}

.tablink:hover {
    background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    color: white;
    display: none;
    padding: 100px 20px;
    height: 100%;
}

#Home {background-color: slategrey;}
#pag {background-color: slategrey;}

</style>
</head>
<body>

<button class="tablink" onclick="openPage('Home', this, 'dodgerblue')" id="defaultOpen">Pagina 1</button>
<button class="tablink" onclick="openPage('pag', this, 'teal')">Pagina 2</button>


<div id="Home" class="tabcontent">








<center>
  <h3>Pagina 1</h3>
  <br>
  <Br>
  <br>
  <p>Aici este prima pagina a site-ului</p>
  </center>
  
  
  
  
  
  
  
  
  
  
</div>

<div id="pag" class="tabcontent">








<font color="azure">
<center>
  <h3>Pagina 2</h3>
  <br>
  <br>
  <br>
  <p>Aici este a 2-a pagina a site-ului</p> 
  </center>
  </font>
  
  
  
  
  
  
  
  
  
  
  
</div>

<script>
function openPage(pageName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
     
</body>
</html> 

Site creat de Bobillho

 

Aveti nevoie de font-ul 'Evogria' sau il puteti schimba din script.

 

Folositi butonul 'Reply' in caz de nelamuriri!

Partajează acest post


Link spre post
Distribuie pe alte site-uri
Vizitator
Răspunde la acest topic...

×   Alipit ca text avansat.   Alipește ca text simplu

  Doar 75 emoji sunt permise.

×   Linkul tău a fost încorporat automat.   Afișează ca link în schimb

×   Conținutul tău precedent a fost resetat.   Curăță editor

×   Nu poți lipi imagini direct. Încarcă sau inserează imagini din URL.


×
×
  • Creează nouă...