Pagina web en Html5 y Css3
DISEÑANDO UNA PÁGINA DINÁMICA
En esta oportunidad veremos como se diseño una pagina web en html y css, esta pagina web es un modelo de la pagina oficial del BBC.
En este modelo haremos uso de las cajas o mas conocidos como (DIV)
(Código en Html)
<html>
<head>
<link href="css/estilo_css.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>BBC</title>
<header>
<hr/>
<table width="100%" height="50px" border="0" bgcolor=" #FFF">
<tr>
<td width="10%" height="">
<img src="images/Captura.JPG" width="100" height="" alt="logoppdz" align="right" />
</td>
<td width="10%" height=""> </td>
<td width="50%" height="">
<div class="caja1">
<nav>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Capital</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Autos</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Radio</a></li>
<li><a href="#">More...</a></li>
</ul>
</nav>
</div>
</td>
<td width="30%" height="">
<center>
<form>
<div>
<input type="search" id="mySearch" name="q" placeholder="Buscar aquí" size="30" >
<button>Buscar</button>
</div>
</form>
</center>
</td>
</tr>
</table>
<hr/>
</header>
</head>
<body>
<header>
<h1>CULTURE</h1>
</header>
<table width="100%" height="" border="0" bgcolor="#200552">
<tr>
<td width="90%" height="">
<div class="caja2">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Columns</a></li>
<li><a href="#">Programes</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
</div>
</td>
<td width="10%" height="">
<div class="caja2_1">
<nav>
<ul>
<li><a href="#"><img src="images/rss.PNG" width="26" height="24" alt=""/></a></li>
<li><a href="#">RSS</a></li>
</ul>
</nav>
</div>
</td>
</tr>
</table>
<table width="100%" height="500px" border="0" bgcolor="#FFF">
<tr>
<td width="30%" height="" colspan="2"><center><img src="images/imagen_1.JPG" width="80%" height="" alt="" /> </center></td>
</tr>
<tr>
<td width="60%" height="" rowspan="2"><img src="images/Imagen_2.JPG" width="100%" height="" alt=""/>
</td>
<td width="20%" height=""> <center><img src="images/Imagen_3.JPG" width="100%" height="" alt=""/> </center></td>
</tr>
<tr>
<td width="20%" height=""><img src="images/Imagen_4.JPG" width="100%" height="" alt=""/></td>
</tr>
</table>
<div class="foot">
<footer>
<table width="100%" height="50px" border="0" bgcolor="#D4CDCD">
<tr>
<td width="90%" height="">
<h3>Elaborado por: Henry Flores Arias</h3>
<h3>Todos Los Derechos Reservados 2018</h3>
</td>
</tr>
</table>
</footer>
</div>
</body>
</html>
(Codigo en Css3)
/* MENU HORIZONTAL (1) ------------ */
.caja1 nav {
display: inline-block;
text-align: center;
}
.caja1 nav ul {
list-style-type: none;
margin: 1px;
padding: 1px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
.caja1 nav ul li {
display: inline;
}
.caja1 nav ul li a {
font-family: changa-one;
color: #000;
text-decoration: none;
font-size: 1em;
display: block;
padding: 11px;
float: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
background-color: #FFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
border-right-width: 0.5px;
border-right-style: solid;
border-right-color: #CCC;
border-left-width: 0.5px;
border-left-style: solid;
border-left-color: #CCC;
}
.caja1 nav ul li a:hover {
color: #000000;
background-color: #FFF;
border-bottom-color: #0F9AF3;
border-bottom-width: 5px;
}
.clear {
clear: both;
}
h1 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 3em;
color: #200552;
}
/* ----------------------------- */
/* MENU HORIZONTAL (2) ------------ */
.caja2 nav {
display: inline-block;
text-align: center;
}
.caja2 nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border-left-width: 0px;
border-left-style: solid;
border-left-color: #200552;
}
.caja2 nav ul li {
display: inline;
}
.caja2 nav ul li a {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #FFF;
text-decoration: none;
font-size: 1.5em;
display: block;
padding: 11px;
float: left;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #CCC;
background-color: #200552;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #CCC;
border-right-width: 0px;
border-right-style: solid;
border-right-color: #CCC;
}
.caja2 nav ul li a:hover {
color: #FFF;
background-color: #5510C5;
}
.clear {
clear: both;
}
/* ----------------------------- */
/* MENU HORIZONTAL (2_1) ------------ */
.caja2_1 nav {
display: inline-block;
text-align: center;
}
.caja2_1 nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border-left-width: 0px;
border-left-style: solid;
border-left-color: #200552;
}
.caja2_1 nav ul li {
display: inline;
}
.caja2_1 nav ul li a {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #FFF;
text-decoration: none;
font-size: 1.5em;
display: block;
padding: 11px;
float: left;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #CCC;
background-color: #200552;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #CCC;
border-right-width: 0px;
border-right-style: solid;
border-right-color: #CCC;
}
.caja2_1 nav ul li a:hover {
color: #FFF;
background-color: #5510C5;
}
.clear {
clear: both;
}
/* ----------------------------- */
.foot h3 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 1em;
color: #000000;
text-align: center;
}
Para descargar los archivos Click abajo:
Comentarios
Publicar un comentario