[R] Menú básico en HTML y CSS

Resultado:

Código:

HTML (index.html):

<!DOCTYPE html>

<html>

	<head>
	
		<title>Menú Básico en HTML y CSS</title>
		
		<link href="style.css" rel="stylesheet">
	
	</head>
	
	
	<body>
	
		<div class="header">
	
		<!-- Menu - lista desordenada -->
		
			<ul>
		
				<li><a href="#">Inicio</a></li>		
				<li><a href="#">Servicios</a></li>		
				<li><a href="#">Portafolio</a></li>		
				<li><a href="#">Contacto</a></li>
		
			</ul>
	
	
	</div>
	
		
	</body>

</html>

CSS (style.css):


/* General */ 

* {

	font-size: 16px;
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

/* Header */

}

.header {

	height: 100px;
	background-color: #333;
	

}

/* Menu */

ul {

	list-style: none;
	text-align: center;

}

ul li {

	display: inline-block;
	line-height: 100px;

}


ul li a {

	text-decoration: none;
	margin: 0 20px;
	color: #fff;
	
}

ul li:last-child a {

  border: 1px solid #FFC069;
  color: #FFC069;
	padding: 10px 25px;

}


ul li:last-child a:hover {

  background-color: #FFC069;
  padding: 10px 25px;
  color: #333;

}

<< Regresar a principal

Enlaces adicionales.

Blog
Podcast
Grupo de Facebook
Paletas cromáticas