<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#marco{
border: 15px solid #696969;
width: 890px;
height: auto;
}
.contenedor {
border: 15px solid #DCDCDC;
width: 860px;
height: auto;
border:
}
.cabecera {
padding: 15px;
border: none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
clear: both;
}
.columnaderecha {
padding: auto;
border: 15px;
background-color: #A9A9A9;
margin-right: 15px;
width: 200px;
height: 60px;
float: right;
clear: both;
text-align: center;
}
.bloque1 {
padding: 15px ;
border: 15px;
background-color: #DCDCDC;
margin: 15px;
width:580px;
height: auto;
float: left-top;
}
.bloque2 {
width:540px;border-color:beige; border-style: dotted; border-width: 5px ;
margin: 15px;
}
.parrafo1 {
margin:dotte; padding-right:0% ;border-width: 5px ; border-color:beige; border-style: dotted; width:550px; margin-top: 15px font-size:19px;
}
.parrafo2{
position: relative;margin-left: -10px;margin-top: -33px
}
.pie {
padding: 15px ;
border : none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
}
.rojo {
color: red;
}
.blanco {
color: white;
}
</style>
</head>
<body>
<div id="marco">
<div class="contenedor">
<div class="cabecera">
<h1 class="rojo">CABECERA</h1>
<h3 class="blanco">Subtitulo de la cabecera</h3>
</div>
<div class="columnaderecha">
<h4>Esta es la columna derecha.</h4>
</div>
<div class="bloque1">
<p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
<p class="parrafo2" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
<p class="bloque2">Esto es el bloque 2.</p>
</div>
<div class="pie">
<h3 class="blanco">Esto es el pie de pagina.</h3>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#marco{
border: 15px solid #696969;
width: 890px;
height: auto;
}
.contenedor {
border: 15px solid #DCDCDC;
width: 860px;
height: auto;
border:
}
.cabecera {
padding: 15px;
border: none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
clear: both;
}
.columnaderecha {
padding: auto;
border: 15px;
background-color: #A9A9A9;
margin-right: 15px;
width: 200px;
height: 60px;
float: right;
clear: both;
text-align: center;
}
.bloque1 {
padding: 15px ;
border: 15px;
background-color: #DCDCDC;
margin: 15px;
width:580px;
height: auto;
float: left-top;
}
.bloque2 {
width:540px;border-color:beige; border-style: dotted; border-width: 5px ;
margin: 15px;
}
#contentP{
border: dotted 5px beige;
width: 540px;
margin-left: 15px;
padding: 5px;
}
#contentP p{
position: relative;
margin-left: -25px;
}
/*.parrafo1 {
margin:dotte; padding-right:0% ;border-width: 5px ; border-color:beige; border-style: dotted; width:550px; margin-top: 15px font-size:19px;
}
.parrafo2{
position: relative;margin-left: -10px;margin-top: -33px
}*/
.pie {
padding: 15px ;
border : none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
}
.rojo {
color: red;
}
.blanco {
color: white;
}
</style>
</head>
<body>
<div id="marco">
<div class="contenedor">
<div class="cabecera">
<h1 class="rojo">CABECERA</h1>
<h3 class="blanco">Subtitulo de la cabecera</h3>
</div>
<div class="columnaderecha">
<h4>Esta es la columna derecha.</h4>
</div>
<div class="bloque1">
<div id="contentP">
<p>esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
<p>esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
</div>
<p class="bloque2">Esto es el bloque 2.</p>
</div>
<div class="pie">
<h3 class="blanco">Esto es el pie de pagina.</h3>
</div>
</div>
</div>
</body>
</html>