<html>
<head>
<title>FLORISTERÍA</title>
<link type="text/css" rel="stylesheet" href="estilos.css" />
</head>
<body>
<div id="principal">
<div id="cabecera">
</div>
<div id="menu">
<a href="pagina3.html" target="marco">ROSAS</a>
<a href="pagina1.html" target="marco">ARREGLOS</a>
<a href="pagina4.html" target="marco">DECORACIONES</a>
</div>
<div id="contenido">
<object name="marco" width="700" height="400" data="video.html"></object>
</div>
<div id="pie">
</div>
</div>
</body>
</html>
ESTILOS.CSS
body {
background-image: url(imagenes/fondo7.jpg);
}
#principal {
background: #FFBF00;
height: 800px;
width: 900px;
margin: auto;
position: relative;
margin-top: 200px;
margin-bottom: 50px;
box-shadow: 10px 10px 100px #000;
}
#cabecera {
background-image: url(imagenes/portada1.jpg);
height: 300px;
width: 900px;
position: absolute;
}
#menu {
background-image: url(imagenes/fondoo.jpg);
height: 400px;
width: 200px;
margin-top: 300px;
position: absolute;
}
#menu a {
background: #2F0B3A;
height: 40px;
width: 170px;
line-height: 40px;
color: white;
text-decoration: none;
display: inline-block;
text-align: center;
margin-left: 16px;
font-family: tahoma;
margin-top: 70px;
font-size: 1.4em;
}
#menu a:hover {
border-radius: 10px;
background-image: url(imagenes/boton1.jpg);
color: black;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:0px;
}
#contenido {
background: #610B21;
height: 400px;
width: 700px;
margin-top: 300px;
margin-left: 200px;
position: absolute;
}
#pie {
background-image: url(imagenes/pie5.jpg);
height: 100px;
width: 900px;
position: absolute;
margin-top: 700px;
color: white;
text-decoration: none;
font-size: 1em;
text-align: left;
display: inline-block;
line-height: 40px;
}
PARA PONER IMAGEN
<h1></h1>
<img src=imagenes/rosa19.jpg width=200 height=227 border=2 />
<br>
PARA PONER VIDEO
<object name="marco" width="690" height="380" data="video/video1.swf"></object>
CADA UNA EN VENTADAS DIFERENTES Y TODAS DENTRO DE UNA CARPETA.
