Calcular el Área de un Rectángulo
<html>
<head>
<title>HTML5</title>
<link rel="stylesheet" type="text/css" href="estilomenu.css">
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>Cabecera header</h1>
</header>
<nav id="menu">
<ul>
<li>Fotos</li>
<li>Principal</li>
<li>Galeria</li>
<li>Videos</li>
<li>Contactos</li>
</ul>
</nav>
<section id="seccion">
<h2>calcula el area de un rectangulo</h2>
<?php
$base=$_POST['base'];
$altura=$_POST['altura'];
$area=$base*$altura;
echo $area;
?>
</section>
<aside id="columna">
<b>Tema Uno</b><br>
<b>Tema Dos</b>
</aside>
<footer id="pie">
<h2>Derechos de autor footer</h2>
</footer>
</div>
</body>
</html>
Código CSS
{
margin: 0px;
padding: 0px;
}
h1
{
font: bold 20px verdana, sans-serif;
}
h2
{
font: bold 14px verdana, sans-serif;
}
header, nav, section, aside, footer
{
display: block;
}
body
{
text-align: center;
}
#agrupar
{
width: 960px;
margin:15px auto;
text-align: left;
background-color: rgba(0,0,200,0.2);
}
#cabecera
{
background-color: #084B8A;
border: 1px solid #999999;
padding: 20px;
}
#menu
{
background-color: #01DF01;
padding: 10px;
}
#menu li
{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}
#menu li:hover
{
background: red;
}
#seccion
{
float: left;
width: 660px;
margin: 20px;
background-color: red;
}
#columna
{
float: left;
width: 200px;
margin: 20px;
padding: 10px;
}
#pie
{
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
No hay comentarios.:
Publicar un comentario