Hola, te he hecho un pequeño ejemplo, copialo en un archivo .html y analizalo
:
Código HTML:
<!DOCTYPE html>
<!--
@author: jhonjaider1000.
-->
<html>
<head>
<title>Links to content</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul{
width: 100%;
}
ul li{
float: left;
list-style: none;
}
ul li a{
text-decoration: none;
float: left;
padding: 10px;
font-family: sans-serif;
border: 1px solid #ccc;
}
.pagrafo1{
background: #FFF;
padding: 30px;
padding-top: 150px;
padding-bottom: 150px;
}
.pagrafo2{
background: #F7F7F7;
padding: 30px;
padding-top: 150px;
padding-bottom: 150px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#quienessomos" >¿Quíenes somos?</a></li>
<li><a href="#portafolio" >Portafolio</a></li>
<li><a href="#contacto" >Contácto</a></li>
</ul>
<div id="home" class="pagrafo1" name="home">
<h1>Home</h1>
<br/>
<p>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
</p>
</div>
<div id="quienessomos" class="pagrafo2">
<h1>¿Quíenes somos?</h1>
<br/>
<p>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
</p>
</div>
<div id="portafolio" class="pagrafo1">
<h1>Portafolio</h1>
<br/>
<p>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
</p>
</div>
<div id="contacto" class="pagrafo2">
<h1>Contácto</h1>
<br/>
<p>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
Contenido.
<br/>
</p>
</div>
<div class="pagrafo1">
</div>
</body>
</html>