Moderator: julianmartinez16
:
: 
: Botonera e image map
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>ejercicios</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/ejercicios.css">
</head>
<body>
<div id="envoltura">
<header>
<img src="images/Logo1.png" id="logo">
<h1>-Publicaciones Digitales-</h1>
<nav>
<ul>
<a href="index.html">
<li>HOME</li>
</a>
<a href="videos.html">
<li>VIDEOS</li>
</a>
<a href="imagenes.html">
<li>IMAGENES</li>
</a>
<a href="ejercicios.html">
<li id="articulos">EJERCICIOS</li>
</a>
</ul>
</nav>
</header>
<article>
<h4>Botonera</h4>
<div id="boton1" class="botonn1"></div>
<div id="boton2" class="botonn2"></div>
<div id="boton3" class="botonn3"></div>
</article>
<section>
<h4>Mapa Feria del Libro 2017 (image map)</h4>
<img id="mapai" src="images/mapa.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="" href="pagesmapa/parqueexplora.html" shape="poly" coords="77,233,43,263,140,339,218,361,248,334" />
<area alt="" title="" href="pagesmapa/planetario.html" shape="poly" coords="438,435,375,483,434,524,493,522,528,484" />
<area alt="" title="" href="pagesmapa/casamusica.html" shape="poly" coords="561,501,488,601,570,627,636,627,655,554" />
<area alt="" title="" href="pagesmapa/udea.html" shape="poly" coords="291,627,307,541,452,553,448,628" />
<area alt="" title="" href="pagesmapa/fiesta.html" shape="poly" coords="8,183,25,137,64,169,134,213,176,241,219,264,265,288,334,334,371,358,387,377,361,392" />
<area alt="" title="" href="pagesmapa/orquideorama.html" shape="poly" coords="308,143,328,179,358,192,399,174,408,120,384,91,334,70,292,79,273,91,281,117" />
<area alt="" title="" href="pagesmapa/primerosauxilios.html" shape="poly" coords="105,82,84,103,108,123,148,147,182,151,159,117,123,82" />
<area alt="" title="" href="pagesmapa/lecturaviva.html" shape="poly" coords="596,101,563,112,576,149,611,180,635,149,619,119" />
<area alt="" title="" href="pagesmapa/jardin.html" shape="poly" coords="473,237,437,266,445,287,484,298,527,272" />
<area alt="" title="" href="pagesmapa/azaleas.html" shape="poly" coords="231,42,193,70,184,89,209,107,240,101,262,69" />
<area alt="" title="" href="pagesmapa/infantil.html" shape="poly" coords="182,102,171,109,183,135,207,164,217,176,234,198,265,214,285,236,303,248,337,261,392,284,418,291,435,255,426,229,337,199,265,157" />
<area alt="" title="" href="pagesmapa/lecturavivajardin.html" shape="poly" coords="507,101,474,118,461,148,531,160,518,111" />
<area alt="" title="" href="pagesmapa/lago.html" shape="poly" coords="392,34,360,57,367,76,430,81,452,66" />
</map>
</section>
<footer>
<h3>- 2017 -</h3>
</footer>
</div>
</body>
</html>Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Jardin</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos/planetario.css">
</head>
<body>
<div id="envoltura">
<header>
<nav>
<ul>
<a href="../ejercicios.html">
<li id="home">EJERCICIOS</li>
</a>
</ul>
</nav>
</header>
<h1>Jardin</h1>
<img src="img/jardin.jpg">
</div>
</body>
</html>Code: Select all
* { padding: 0px;
margin: 0px; }
body { font-family: arial;
text-align: center;
margin-top: 30px;
}
#envoltura { margin-left: auto;
margin-right: auto;
border-bottom-style: none;}
nav { width: 500px;
background-color: red;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-radius: 15px;
margin-bottom: 30px;}
li {display: inline-block;
color: white;
font-family: arial;
font-size: 15px;
margin-left: 10px;
margin-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
letter-spacing: 5px;
border-style: solid;
border-color: red;}
li:hover {border-style: solid;
border-radius: 10px;
border-color: black;
background-color: white;
color: black; }
h1 {font-family: arial;
color: red;
font-variant: small-caps;}
img {width: 1000px;
border-radius: 20px;}