HTML
Código:
CSS<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8"/>
<title>Titulo Proyecto</title>
<link href="body.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="aprendejava.xml" />
</head>
<body>
<div id="container">
<div id="header">
<img src="./imagenes/banner.png" alt="Banner" width="100%" height="20%">
<ul class="menu">
<li><a href="#">Noticias</a></li><!--Algun que otro ejemplo html y css y presentacion-->
<li><a href="#">Capitulos</a></li><!--Introducir capitulos sobre java-->
<li><a href="#">Descargas</a></li><!--tabla con diferentes descargas-->
<li><a href="#">Contactanos</a></li><!--Formulario de envio de email-->
<li><a href="#">Libre</a></li>
</ul>
</div>
<br><br>
<div id="sidebar1">
<ul class="nav">
<li><a href="#">Capitulo 1</a></li>
<li><a href="#">Capitulo 2</a></li>
<li><a href="#">Capitulo 3</a></li>
<li><a href="#">Capitulo 4</a></li>
</ul>
</div>
<div id="content">
http://www.3dtin.com/
Contenido de content
<video width="480" height="240" controls>
<source src="tu_video.mp4" type="video/mp4" />
<p>Tu navegador no soporta HTML5 ni Flash ¿En que era estas?</p>
</video>
<p> </p>
<p> </p>
</div>
<div id="footer">
Esta pagina esta registrada a nombre de Sergio Tobal y cuenta con los siguientes certificados:
</div>
</div>
</body>
</html>
Código:
Con una ventana pequeña@charset "utf-8";#container {/*El # viene porque es un id y por lo tanto solo existira una copia del container*/
width: 80%;/*Unicamente ocupara el 80% de toda la pagina*/
max-width: 1260px;/*Por si acaso limito el maximo que puede alcanzar el bloque central*/
min-width: 720px;/*Lo mismo pero por el minimo*/
margin: 0 auto 0 auto;/*Con esto se definen los margenes de la web para que este centrado, en orden va top right bottom left*/
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; /*Letras que se van a usar, una detras de otra hasta encontrar alguna que tenga el usuario.*/
background: url(imagenes/body-back.jpg) fixed center center;
}
#header {
/*background: #6F7D94;*/
}
ul{
margin: 0 auto;
padding: 0;
}
ul.menu li{
text-align: left;
float: left;
list-style: none;
margin: 5px;
border: 1px solid #CCC;
display:block;
border-radius: 10px;
background-color: rgba(255,255,255,0.4);
}
ul.menu a, ul.menu a:visited {
display: block;
padding: 3px 10px 3px 10px;
text-decoration: none;
border-radius: 10px;
}
ul.menu a:hover, ul.menu a:active, ul.menu a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
background:rgba(0,51,255,0.4);
color: #FFF;
}
#sidebar1 {
float: left;
width: 19%;
background: #93A5C4;
/*padding-bottom: 10px;*/
margin-right:10px;
border-radius: 10px;
}
ul.nav {
list-style: none;/*Esto elimina el marcador de lista */
border-top: 1px solid #666;/*Esto crea el borde superior de los vínculos*/
margin-top: 10px;
margin-bottom: 10px;/*Esto crea el espacio entre la navegación en el contenido situado debajo */
}
ul.nav li {
border-bottom: 1px solid #666; /* esto crea la separación de los botones */
}
ul.nav a, ul.nav a:visited { /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
padding: 5px 5px 5px 15px;
display: block; /* esto asigna propiedades de bloque al vínculo, lo que provoca que llene todo el LI que lo contiene. Esto provoca que toda el área reaccione a un clic de ratón. */
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
background: #6F7D94;
color: #FFF;
}
#content {
float: right;
padding: 10px 0;
width: 80%;
height:700px;
float: left;
background-color:rgba(51,153,153,0.4);
border-radius: 10px;
}
#footer{
width:100%;
height:80px;
background: #6F7D94;
float:left;
clear: both;
margin-top:10px;
border-radius: 5px 5px 10px 10px;
}
A pantalla completa
